Image Sizes in WordPress
WordPress is great at managing your images, and allows you to set custom crop dimensions for new uploads. It's important to provide optimized, custom-sized images rather than allow the browser to receive a large image to be resized on the fly.
You register image sizes via the
However, registering an additional image size incurs in a performance penalty every time you upload a new image. When an image is uploaded to the site, WordPress now has to resize and cut each of the specified image sizes, generating the appropriate thumbnails for you to use. These images also add up on the server, consuming storage even if they're not being used.
You should make an effort to use the fewest possible number of image sizes. If you require a custom size that's similar to one that already exists but is off by only a few pixels, you should consider reusing the existing image size rather than add another.
Naming Image Sizes
To prevent us from having more thumbnails than we need, we use a naming scheme that lets us see if any of the already registered sizes could be used in a new situation. The name has two components: (1) a qualitative dimension (like
large) and (2) an aspect ratio.
You should avoid giving your thumbnails a name that indicates a specific utilization because it will confuse maintainers if that image size ends up being used differently.
This should be one of the following:
small: under 300 pixels wide
medium: between 300 and 800 pixels wide
large: between 800 and 1300 pixels wide
huge: over 1300 pixels wide
The aspect ratio relates an image's width with its height. It also serves as a indicator of the images orientation (an image with a 4:3 ratio will be wider that it is taller).
Because WordPress generates HTML class names from the the image size slug, we use the word
by instead of the colon separator. So a medium 4:3 image would be named
A few guidelines on ratios:
- Try to hit a nice round number to factorize, such as
- If the image is square, declare it as
One fixed dimension
Sometimes images have a dimension that is set to an "absurd" value ir order to force a resize based on one dimension only. For these images the naming should be done using the information of that size and its orientation (
w - for width,
h - for height).
/** * See the WordPress documention for more information on the 'add_image_size()' function. * https://developer.wordpress.org/reference/functions/add_image_size/ */ // Both sizes fixed. add_image_size( 'medium_4by3', 400, 300, true ); add_image_size( 'medium_5by13', 500, 1300, true ); // Based on one of the dimensions. add_image_size( 'large_1600w', 1600, 99999, false );
- Register as few custom sizes as you can, and try to reuse existing image sizes.
- Images can be used and reused anywhere. Avoid giving your thumbnails a name that indicates a specific utilization because it will confuse maintainers if that size is used differently.