The Ultimate Guide To WordPress Image Sizes

Have you ever wondered what image size you should upload to a WordPress blog, or what the best image size is for WordPress?

We’re going to delve into the inner workings of WordPress to understand how it treats images when uploaded, what the best image size is to upload to a WordPress blog, and how srcset helps to keep your pages loading quickly.

We’ll also look at how Google works with your images, and what the best image size is for Google Discover.

1 What do we mean by image size?

1.1 Image Dimensions

1.2 Data Size

2 WordPress Image Uses

2.1 What is a WordPress Post Featured Image?

2.1.1 Search engine result pages

2.1.2 Google Carousel

2.1.3 Google Discover

2.2 WordPress In-Content Images

3 WordPress Image Sizes

3.1 WordPress Built-in Image Sizes

3.2 Theme Image Sizes

4 WordPress Image Upload

4.1 Image Resizing

4.2 Image Compression

5 What image size does WordPress show to visitors?

5.1 WordPress srcset Support

5.2 How does srcset work?

5.3 Srcset Example

6 What does the WordPress “Image Size” setting do?

7 Do large images affect page speed?

8 Should I compress images before uploading them to WordPress?

9 What image size should I upload to WordPress?

What do we mean by image size?

Let’s start with the basics – images can be sized with two different “levers”. When referring to “image size”, we could be referring to either the dimensions of the image, or the data size. Both are important!

Image Dimensions

You’ll often see image measurements like 640×480, or 1024×1024. They are the amount of pixels that make up an image, in width and height. If someone says an image is 640×480, they are saying that the image is represented by 640 pixels in width, and 480 pixels in height.

The more pixels your image is represented by, the higher the storage requirements.

When reading about digital cameras you’ll also see reference to “megapixels”; a megapixel is a million pixels. So as an example, a three megapixel camera outputs images with a total of three million pixels, which equates to an image resolution of 2048×1536 (2048 * 1536 = 3,299,328 pixels).

Data Size

Data is measured in bytes. The same as megapixels, a million bytes equals one megabyte.

It’s important to keep track of the data size of your images as you manipulate them. As all images will be uploaded to your blog, you need to ensure that you’re sizing them sensibly to ensure your page load times stay within acceptable limits, and you’re not using all of your hosting storage with pictures way bigger than you actually need.

WordPress Image Uses

The images you upload to WordPress can be primarily used in two places – as a featured image to a post, and an in-content image.

What is a WordPress Post Featured Image?

The image selected as a post’s featured image is the one used by search engines in search results, Google’s carousel (if you’re a recipe blogger), Google Discover, WordPress archive pages, and so on. You can only set one image as a post’s featured image.

There are many differing opinions on what size and ratio the image should be, and given the many different uses, there is no “right” answer.

Consider their uses though, and decide for yourself what image ratio makes most sense:

Search engine result pages

Search engine result pages, or SERPs, use square thumbnails.

Google Carousel

Carousel results (the coveted “position 0”) appear above SERP results. If your post appears here, the image used is a 16:9 ratio.

Google Discover

Google Discover recommends content to users via “cards” that appear on their device. The images used can be 16:9 or squares.

WordPress In-Content Images

You can have as many in-content images as you like in a post. There are no restrictions on size or ratio, but it’s worth considering your target audience, and whether the bulk of your audience visits from desktop or mobile devices.

WordPress Image Sizes

For every image uploaded to WordPress, many different sizes will be created. The sizes are defined in a few different places.

WordPress Built-in Image Sizes

Out of the box, WordPress has support for three configurable image sizes – Thumbnail, Medium and Large. Unless you’ve adjusted the settings (Settings -> Media) they’ll be 150×150, 300×300, 1024×1024 pixels, respectively.

WordPress also defines a number of fixed image sizes, that are not configurable:

  • Full – the original image uploaded, untouched.
  • Full-scaled – 2560px wide
  • 2048px wide
  • 1536px wide
  • Medium-large: 768px

Confusingly, WordPress doesn’t show any of the additional sizes in the Media Settings UI. To find out all of the image sizes in your setup, you can find a list in the Regenerate Thumbnails plugin, if you have it installed.

Theme Image Sizes

Themes are able to add additional sizes to the list; this allows developers to ensure that you have correctly sized images that work with the layout they design.

WordPress Image Upload

When you hit the Upload button on your image, whatever size it is, WordPress performs a number of steps.

Image Resizing

WordPress will generate all of the images configured in the Media Settings UI and by the theme itself.

WordPress doesn’t upscale images due to potential loss of quality. For example, if you upload an image of 1400px, WordPress won’t generate the 1560px sized image. It’ll only create the sizes smaller than the original image uploaded.

Image Compression

Image compression is the process of reducing the data size of an image. Well-applied compression will reduce a file size with no noticeable degradation to the quality of the image.

WordPress compresses images as it creates them, ensuring that the data size of images uploaded are kept under control. It uses a piece of software called Imagemagick to achieve this, and since WordPress 4.5 has used a quality setting of 82, providing a nice balance of image quality and file size. You can see examples of different Imagemagick quality settings, if you’re interested.

What image size does WordPress show to visitors?

Despite many pieces of misinformation floating around the internet, WordPress does not show the same size image to all visitors of your website, and hasn’t done since 2015.

It uses a technique called “responsive images” to send a correctly sized image for the size of the screen your visitors are using.

WordPress srcset Support

You may still hear people say things like “I resize my images to 720px because that’s the content width of my theme”. Before browsers and WordPress supported srcset tags, this was the correct thing to do. In 2021, it’s not!

“srcset” defines a set of images that a browser can choose between based on certain criteria such as screen size and orientation. Browser support for srcset landed in 2014, and since WordPress 4.4 (released December 2015), WordPress has supported srcset tags too.

How does srcset work?

This is a traditional HTML img tag. Every device would be served a 1200px wide image (even tiny mobile devices!):

<img src="photo-1200x796.jpg" width="1200" height="796">

On my food blog, 80% of our visitors use mobile devices of varying age, so it doesn’t make sense to offer a 1200px wide image to all of these visitors.

Srcset allows us to offer multiple image sizes, and the browser selects the most relevant one based on its screen size, orientation and pixel density:

<img 
    srcset="photo-1200x796.jpg 1200w,
            photo-768x509.jpg 768w,
            photo-480x318.jpg 480w" # 1200px, 768px and 480px options
    src="photo-1200x796.jpg" # default for backwards compatibility
    sizes="(max-width: 1200px) 100vw, 1200px" 
    width="1200" 
    height="796"
/>

Using this technique – if someone is capable of seeing a high resolution image, then their browser will download it for them. If they’re on a five year old smartphone, then we ensure their page loads quickly by serving them an appropriately sized smaller image.

WordPress automatically generates srcset for every image you add to a post. All you need to do is upload correctly sized source images!

Srcset Example

Here’s an example of srcset in action – the image will change as you resize your window, or change the orientation of your device:

srcset demo image

Depending what device you’re viewing this page on, you might see anything from a 480px image, right up to a 1600px image!

What does the WordPress “Image Size” setting do?

Every time you add an image to a WordPress post, you’ll notice the right-hand panel flip to an image context, where you can set various things like alt text, additional CSS classes, and most confusingly, “Image Size”. Wait, what?

Confusingly, this doesn’t set the image size that gets shown to a user – it sets the size of the image container, and the image selected by the browser from the srcset options is scaled to fit within it.

So bluntly, it’s used for defining the layout of images within your blog posts, not the actual “image size” that WordPress shows visitors.

By example – if your site’s content width is 800px, and you hit the “50%” button – the image container will be 400px and take up exactly half of the page width. But, that container could be showing an image that’s 1200px wide, scaled down. Brain hurting yet?

Why does this happen? Well, for one – Apple. Apple’s “Retina” screens are high resolution devices that use two (or three in some cases) pixels for every one pixel of an equivalent “normal” screen. Rather than those pixels going to waste, the browser will download the srcset option that best fits the screen.

Do large images affect page speed?

Another favourite topic of debate is that uploading large images to WordPress will affect page loading speed. The short answer is yes, they could, but the longer answer requires slightly more explanation.

Remember that there are two levers we can pull with regards to the size of an image – dimensions (in pixels) and data size (in bytes).

Uploading an image that’s large in dimension won’t affect page speed. As explained above, when you insert an image into a post, WordPress will output srcset tags, and the browser will select the most relevant one for its size. No impact on page speed.

Uploading an image that’s large in terms of data size will affect page speed. Also as explained above, you’ll recall that WordPress performs a round of compression on your images as they are uploaded and scaled down to the various configured sizes.

However, this compression is very lightly applied to ensure that the quality of images aren’t affected. As we’re humans, and can see the changes – we can be more aggressive with compression before we even upload images to WordPress!

Should I compress images before uploading them to WordPress?

In order to answer whether you should compress images before uploading them to WordPress, we ran a test.

We started with a 9MB JPEG file, and then uploaded it to WordPress twice. The first run was uploaded, making no changes to the source file whatsoever.

The second run, we compressed it in our favourite free image compression tool (Squoosh) at an 85 quality setting (so there was no perceivable difference between the quality of the original and compressed image), and then uploaded it.

Here are the results, comparing each of the different image sizes that WordPress creates:

Image sizeFile Size
(uncompressed)
File Size
(Squoosh compressed)
Difference
Original9509kb1733kb-82%
2560px587kb486kb-17%
1536px249kb195kb-22%
1200px170kb126kb-26%
768px91kb57kb-37%
300px45kb15kb-66%

So what does this tell us? For starters, you should compress images before uploading them to WordPress. Looking at the 768px image, there’s a data saving of 37% by doing so!

Considering an average article with five images, that’s a saving of 170kb. The larger the image, the greater the saving. The more images, the more the saving!

Secondly, it tells us that the compression that WordPress applies is very basic, and not sufficient to satisfy Google Page Speed checks.

What image size should I upload to WordPress?

Given all this information, what is the best image size to upload to WordPress? The short answer, is the bigger the better.

To be featured in Google Discover, Google recommend that you upload high quality pictures of at least 1200px wide. The potential of extra traffic should not be ignored – so 1200px wide images are the absolute minimum you should upload to WordPress.

It also makes sense to upload at a size that will provide high quality images for the widest range of devices. Therefore, we recommend that you upload images at 1600px wide, ensuring you capture WordPress 1536px image size.

If hosting storage utilisation is of no concern – upload a 3000px wide image and cover the “Full-scaled” 2560px image size for super high-resolution devices that visit your site!

Finally – you should compress images before uploading them to WordPress. Squoosh is a great tool for doing this visually – you can see the impact various levels of compression have on your images as you adjust the sliders. Use a compression level of 85 as a starting point, and be more aggressive based on how your images look.

We hope this article has helped teach you about the best image sizes for WordPress. See our other posts on WordPress images.