How large should the images I upload be?

How large should the images I upload be?

This is a great question, and one that's important to consider, since incorrect image sizing is the cause of most blurry images and slow image loading on websites.

In the past, it was good practice to upload photos of the exact size you'd be displaying -- but things have changed. Now, for most sites, it's unnecessary to use the "pixel perfect" approach. Instead upload your images with a future-proof width. 

As rule of thumb, we recommend uploading your images at 2,000-2,500px wide, which will be full retina on viewing areas on screen areas up to 1000-1250px wide. 

This is because, since version 4.4, WordPress has responsive images built in. This means that WordPress creates and displays smaller copies of the image according to your current theme and layouts. 

WordPress Image Size FAQ

My images are larger than that. Do I have to edit them before uploading?

While we recommend you resize them before uploading, you don't have to. All our clients have the Kraken.io plugin installed, which automatically will resize your original images to the 2500px width. So if you don't have easy access to resizing tools ( hello phone!), or forget to resize a photo before uploading, this will be done for you after you upload it.
Not sure if it's working right? Just drop us a line and we'll check that out for you.

Do I need a plugin for responsive images? 

Not in most cases. WordPress has had support for responsive images since 4.4 (December 2015), and almost all themes and plugins now leverage that. Only extremely out-of-date themes will need additional help from a plugin.

Don't bigger images make my site slow?

A qualified 'yes'. Larger images have a bigger file size, and that takes more time to transfer from the server to the user's browser. This will definitely show up in the majority of automatic tests that you run against your site. 

However, the browser is responsible for downloading the best image size for its screen, so as long as you have a good range of image sizes available in the srcset, it should be able to make a good choice for both performance and display for your real users.

I'd like to understand more about this responsive technology...

If you're of a technical mind,  Smashing Mag has a good jumping off point. If you just want to understand how it works, read on!

The introduction of retina screens in high end phones and laptops meant a dramatic change in how images and text were rendered. Basically how they work is to 'squish' images into a smaller space to give the appearance of more depth and sharpness. It's a 2:1 ratio.

  • If the space for an image is 1000px wide, a 2000px image is best: that doubled size fits nicely. Something close to this can also work well; within 15% of target size is considered fine.
  • A 1000px image in that space is no good: it'll appear pixelated! Virtually, it's like having a half-sized image in that place. As it's "stretched" across the double-density space, it makes the pixels bigger, and they'll get 'blurry'.

So the rule of thumb is to have images that are twice the size of the space that you're trying to fill.

Do I need to 'optimise' images?

Performance Foundry does a lot of that work for you behind the scenes: tools like Kraken, which run on upload; our Content Delivery Network; our on-the-fly optimisations for Publisher clients; and our special object storage all help to optimise and accelerate image delivery. If you'd like us to check your site, please email support.

    • Related Articles

    • Faster images on your website

      Images are a very important consideration for site speed, since loading larger-than-necessary images is a quick way to slow your site down. Ideally, your site should load the correct sized image for the screen it's being viewed on -- and that means ...

    • Troubleshooting Thumbor Images

      Normally, Thumbor works without a hitch, but there are some cases where it can be a problem: Images won't appear in some browsers Thumbor will intelligently serve the best image format to different browsers. In practise, this normally means serving ...

    • How can I remove or replace images safely?

      If you're updating posts, and would like to change some of the images within the post without causing issues through your site, that's quite easy to do. Important: before starting this work, Performance Foundry staff will need to transfer your images ...

    • Why do my photos take a while to upload?

      If you notice that your photos are taking a while to upload to WordPress, this could be for a variety of reasons -- for instance, if you're on a slow internet connection, that will certainly affect upload speeds! However, one of the main causes of ...

    • Add ALT tags to images

      When inserting images to your posts or pages, you have the option to add an alt tag to the image. This is the text that will display if the image can't be loaded. It's important to add in an alt tag for all images, for two main reasons:  1. It helps ...