The Ultimate Guide For Using Images On Your Website

Let's get started with the most comprehensive website image size guidelines in 2023.

What is the best image resolution on a website?

There are no industry standard on the aspect ratio of the images you have on your website. However, there are optimal configurations that you can follow so that you save time and maximize the results. This means you will be able to reuse the images elsewhere without any extra steps.

The most common aspect ratios for images for your website are 1:1, 4:3, and 16:9. However, we have found that 4:5 (portrait image) is better optimized for mobile than 16:9 aspect ratio. You can get away with this by having two sets of images (16:9 for desktop and 4:5 for mobile). For us, we use 4:5 straight out of the box as we cater toward mobile users more than desktop. 4:5 also looks great on desktop, and we only have to design it once.

In terms of pixel, here's the break down:

1. 1:1 aspect ratio: 1080 x 1080 px
2. 4:3 aspect ratio: 800 x 600 px
3. 4:5 aspect ratio: 1080 x 1350px
4. 16:9 aspect ratio: 1920 x 1080 px

Keep in mind that these image dimensions are our recommendation with regard to your time, and SEO. You can have a 4k image at the corner of your website, but it will drastically slow your website down as the image would take too long to load. It doesn't make sense to use a large image in a small placeholder, make sure you resize your image dimension to keep the file size small.

For full width image, we recommend that you use large image resolution such as 1920x1080 px so it looks crisp on the big screen. For profile images, you can resize your image dimension, let's say 1080 x 1080 px to 256 x 256 px to save you some space.

We like to use 72 dpi and 144 dpi for our graphic design to maintain the image resolution.

What's the file size for each image and how to optimize it?

The higher the image resolution, the better it looks without getting pixelated. However, high definition images are often heavy in size. The image size is how much space it takes up on your server. This means the larger the image size, the longer it takes to load and it will affect your SEO score as a result.

So, what can we do about it?

The best way to have HD images on your website is to optimize them before you upload them to your website. We often use TinyPNG to optimize our images before we upload them to our website.

Ideally, we want any images you upload on your website to stay around 100kb to 1MB. This file size is affected by the image resolution as we mentioned above, and the file type that you will see below.

What about image file types?

1. ‍JPG/JPEG files are great for most websites. They can be compressed by almost 80% when you use TinyPNG. Although JPEGs do not support transparency, so you will need to pick PNG instead.‍
2. PNG files are often used for transparent background images. We often use this for profile images, cut out figures, icons, etc. If we can choose between JPEG or PNG, we will also use JPEG. As JPEG can be compressed and is lighter in terms of file size, JPEG will help to bring your website performance to the top. You can always use PNG format for icons, but there is a better format for icons as you want them to stay crisp at any size.
3. Introducing SVG, Scalable Vector Graphics, a great format for simple graphic elements on your website. With SVG, you can also do some amazing on-page animation using code (such as GSAP), and they are so light that you won't even see a change on your site performance.
4. The last one is GIF. While video background and other video elements are so much more popular now, GIF still has its place in the web design world as it is easy to make. However, GIF is quite heavy and not optimal for web usage. If you can avoid GIF, use video element, on-page animation, or even Lottie as your alternatives.

Other images you need for your website

1. Favicon: The little icon at the top of your browser (32 x 32 px, PNG)
2. Web Clip: a URL-based bookmark when you add to your phone home screen (256 x 256 px, PNG)
3. Open Graph: The social sharing image when you share your webpage on social media (1200 x 630 px, JPG)
4. Logo: The actual size for your website logo does not matter if you use SVG instead.

The golden rules for web images:

• Use SVG for simple graphical images such as icons and logos
• Use JPG anywhere you can
• Use PNG where you need transparent background (if the background is a solid color, use JPG instead)
• Always optimize your images for file size and file dimension

The web just got faster

As we navigate through the future, new things are being implemented to ensure you (the end users) get the best result while browsing. This is where Content Delivery Network is such a crucial invention that truly eliminate the sluggish speed when you browse any website. Better yet, most website building platform like Webflow and Wix Studio are converting your image file types to a new format that make it load even faster, wherever you are, called WebP.

Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.