Let's get started with the most comprehensive website image size guidelines in 2023.
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:
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.
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.
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.