WordPress image sizes

Figuring out proper values for WordPress image sizes takes a bit of effort, but it’s not rocket science.

Whenever you upload an image to a WordPress site, the software generates several scaled copies of the image. Some are built-in to WordPress, some are defined by the theme used, or by plug-ins, while others can be configured on a per-site basis.

Built-in images sizes

No matter what you configure in the settings, WordPress will generate smaller images that are 768px (the medium-large size), 1536px and 2048px on the longest side.

WordPress doesn’t scaled up images.

If the uploaded image is more than 2560px on the longest side, WordPress will generate a version scaled to 2560px and use that as if that’s the uploaded full size image. WordPress adds the text “-scaled” to the file name.

Other images sizes

Site theme and active plug-ins can add other image sizes.

The easiest way to find out which is to search for add_image_size in the source files of the theme or plug-in.

Most themes will define at least one addition image size for a full-screen image, like for a featured image at the top of a page, to match the theme design.

For example the Twenty Twenty theme adds the size 1980x9999px, which means 1980px wide, and height adjusted to fit.

Default configured sizes

Three images sizes are defined in the Media section of the site settings. They are for thumbnails, medium and large sizes.

WordPress defaults to a thumbnail size of 300x300px cropped square, medium size 600px wide scaled proportionally, and large size at 1024px scaled.

If you want fewer resized files on you site, you can set thumbnail to either 256x256px or 384x384px (⅓ or ½ of the standard medium-large size), the medium 768px and large to 1536px, replicating the sizes WordPress would make anyway.

The result will be few files, less disk usage on your hosting, but more bandwidth spent sending larger files.

Calculating ‘good’ sizes

The default sizes are not wrong, but it makes sense to change the sizes to match the theme’s idea of a large image and your preferred aspect ratio of images.

Images scale better if you use integer factors.

I tend to use an aspect ratio of 4:3 on general sites, but 3:2 on photography oriented sites, and the results can be slightly different.

I also upload photos to my sites at the ‘right’ size for the theme. If a site uses Twenty Twenty I will prepare the photos to be 1980px wide, as that is what the theme requires.

If the desired aspect ratio is 4:3 the images will be 1980x1485px (landscape) or 1980x2640px (portrait).

Factor these numbers into prime factors:

1980 = 2 x 2 x 3 x 3 x 5 x 11
1485 = 3 x 3 x 3 x 5 x 11
2640 = 2 x 2 x 2 x 2 x 3 x 5 x 11

The three numbers share the factors 3 x 5 x 11 = 165.

Based on this I will set thumbnail to 330x330px (downscaling the width by a factor 6 and the height by 4.5 or 8), the medium size to 660x9999px (downscaling by a factor 3) and the large to 1280×9999 (downscale 1.5).

If some sizes comes out very close to the WordPress built-in sizes, choose the same as WordPress.

Aspect ratio 3:2

If the desired aspect ratio is 3:2 the images will be 1980x1320px (landscape) or 1980x2970px (portrait).

Factor these numbers into prime factors:

1980 = 2 x 2 x 3 x 3 x 5 x 11
1320 = 2 x 2 x 2 x 3 x 5 x 11
2970 = 2 x 3 x 3 x 3 x 5 x 11

The three numbers share the factors 2 x 3 x 5 x 11 = 330.