What Image Size is Best for a Website

This question is often asked by people who are new to publishing with WordPress. In this post, I’ll try explain what to take into account when choosing perfectly sized images for your website.

First of all we need clarification here. Are we talking about file size or image dimensions (e.g. width and height in pixels)? Yes, the bigger the image, the larger the file size. But don’t forget that there are many image file formats and types of compression. Same picture may differ in file size drastically if saved in different file formats or with different settings.  Let’s discuss one thing at a time.

Image Dimensions

Let’s see how WordPress handles image uploads. When you upload an image to your site it is saved to wp-content/uploads folder. WordPress also creates at least three more variants of that image: thumbnail, medium and large. There is also a post thumbnail (featured image). Its size is set in theme functions with set_post_thumbnail_size(). Besides default image sizes and post thumbnail, themes and plug-ins can introduce their own additional image sizes with add_image_size() function. Take a look at sample code from Twenty-Fourteen theme:

// Enable support for Post Thumbnails, and declare two sizes.
add_theme_support('post-thumbnails');
set_post_thumbnail_size(672,372,true);
add_image_size('twentyfourteen-full-width',1038,576,true);

What happens here is simple. First the support for post thumbnails is added. Then the size for thumbnails is declared. And after that, the new size “twentyfourteen-full-width” is introduced. So what we have right now is five registered image sizes:

• thumbnail – 150px
• medium – 300px
• large – 474px  (Equal to content width of the theme)
• post_thumbnail – 672×372 px
• twentyfourteen_full_width – 1038×576 px

This means that upon every upload five more variants of different size of the image will be created. At this point, it may seem pretty straightforward. You keep in mind the largest (1038×576 px) and make sure that the images you upload are wider than 1038px and taller than 576px. But it is not as simple as that.

Retina Screens

Well, maybe it was that simple before introduction of Retina displays (or HiDPI displays). But today this approach is outdated. You need to take into account that many of your site visitors may have displays with higher Pixel Density. For better understanding of the concepts of modern Web graphics, you need to know the difference between Device Pixels, CSS Pixels, and Bitmap Pixels. There is a very good article  by Smashing Magazine that explains these notions in a very understandable way.  But in a few words, on a normal display one CSS pixel takes the physical surface of one Device pixel while, on Retina display, one CSS pixel takes four Device pixels. Clearly the image sizes are set in WordPress in CSS Pixels. What does it mean in terms of uploads? Well, it’s simple. Just make sure that images you choose are at least two times wider and two times taller than the largest image size registered by your theme. In the case of Twenty Fourteen, it is 2076×1152 pixels.

Future Proof Uploads

As stated above in Twenty Fourteen the largest registered image size is 1038×576 pixels. Nothing against Twenty Fourteen, it’s a great theme, but what if you decide to change it after some time? And in your new theme the largest registered size will be, let’s say 1120×600 pixels. Even if you regenerate all image sizes after theme switching, there will be no retina-ready images for the largest registered size because our uploads were 2076×1152 pixels, remember? And now we need 2240×800 pixels. This can be a serious issue if you have a big library of images. So what is the best size for the uploads? Let’s think about it this way.

Many themes have a full-width page template or full-width slider on the homepage. This means that probably the largest registered image size will be equal or almost equal to the site width. 

But how wide sites are now and how wide will they be in the future, you might ask? That’s a good question. Theme developers create their themes with the grid systems that rely on most popular screen resolutions at the moment. I’m not talking about mobile devices right now because we need to find out the maximum possible width of the website, viewed from a desktop computer.

Around two-three years ago one of the most widely used grid systems were 960.gs. It was targeting all popular screen resolutions from 1024×768. Now when 1024×768 is almost gone, 1140 pixels grid is becoming more and more popular. Taking into account Retina displays, this makes the good size for uploads above 2280px width. I am saying above because, even though, 1140px grid is widely used and future-proof, it is good to have some extra space to breathe.

Usually, my uploads are always around 3000px wide whenever possible. It makes me feel kinda safe, knowing that even if I change my theme in the future and regenerate all the thumbnails, they will still look good on any screen.

File size

Talking about file sizes, I recommend following the rule: As small as possible, as large as necessary. Take a look at the example images below. Open them in separate tabs and try to notice the difference.

• png (1.2 MB)
• jpeg 100% quality (583 KB)
• jpeg 80% quality (269 KB)
• jpeg 60% quality (151 KB)
• jpeg 30%quality (68 KB)

Of course, it also depends on the given image, but while the visual difference between png and 80% quality jpeg is hardly noticeable, in file size they differ tremendously. This single png will use almost 4.5 times more bandwidth.  And that’s for one image and one visitor. But what if you have 10 visitors or 100 visitors or 1000 visitors, you got the idea. Don’t get me wrong , there are situations where png images are essential. But for general uploads, jpegs are much better in terms of filesize.

Conclusion

Summing everything up, I want to say that I did not have any image-size-related troubles using the principles stated above. If you have any questions, feel free to ask them in the comments.

Cover image by David Holt.

Table of contents

Want some more tips on image management in WordPress. Here is the list of articles that will help you do it faster and less painful. If an article is not clickable this means it has not been published yet. Check back later, and don’t forget to subscribe to my Twitter.

1. Better Image Workflow in WordPress
2. What Image Size is Best for a Website
3. Tips For Better Filenames in WordPress
4. Batch Rename Files in WordPress
5. Make Use of Image Metadata in WordPress
6. How to Make Images Retina Ready in WordPres