How many image variants WordPress secretly generates?
- Thumbnail: 150×150 px
- Medium: 300 x height
- Medium_large: 768 x height
- Large: 1024 x height
Depending on the size of the image that is uploaded, images with sizes of 768px, 1536px, 2048px and 2560px (maximum size) may also be created to be used with the scrset HTML attribute.
You may think that unchecking box of creating images variant sizes in the WordPress admin dashboard is enough. That is too naive.
However, this is still not enough, WordPress will secretly generate an image size of medium_large 768px , which is not shown and stated in the admin dashboard.
If you have ever noticed and wondered why it took so long to load just to upload an image, it is because the WordPress software is secretly generating many image size variants behind the hood. It’s insane.
WordPress creates its various sizes upon upload, not upon serving to the browser. We need resizing on display.
The size uploaded by you is called the full-sized image.
WordPress doesn’t generate image variant when setting featured image.
Generating too many files that occupy unnecessary storage, as well as leading to large backups size.
Why is WordPress generating -scaled images?
Scaled image – New feature in WordPress 5.3 core release of November 2019.
When the image dimension (either width or height) exceeds the threshold of 2560 pixel, WordPress automatically scales it down to 2560 px with the corresponding width or height. This scaled down image is named as -scaled.jpg in WordPress.
Imposing a new naming schema on everyone, by default, and without even a setting to NOT use such an opinionated naming change is horrible. I dislike the way it pollutes all filenames.
To Disable Scaled Image and Image Threshold
Disable WordPress’ automatic scaling of large images, preventing files with “-scaled” in their filenames from being created.
// disable the big image size threshold
add_filter( 'big_image_size_threshold', '__return_false', 100, 1 );How to disable responsive image and image srcset in WordPress?
Prevent WordPress from Creating Extra Image Sizes
Whenever WordPress is going to create a new image size it uses this function to return the calculated resize dimensions for the image, hooking into the image_resize_dimensions filter and returning false will make the function exit early so no calculations are made and ultimately no extra image will be generated.
// return false for calculated resized image dimensions
add_filter( 'image_resize_dimensions', '__return_false' );If you want to disable every image sizes except for original just returns an empty array.
// return an empty list of image sizes to generate on upload
add_filter( 'intermediate_image_sizes_advanced', '__return_empty_array' );Now, if you are hooking into intermediate_image_sizes_advanced you don’t necessarily have to also hook into image_resize_dimensions. The reason for hooking into both filters is in case a theme or plugin is using it’s own “on-the-fly” cropping solution – which hopefully makes use of the image_resize_dimensions() function.
Returning false from wp_calculate_image_sizes filter will only disable WP’s addition of the sizes attribute, not necessarily disable responsive images entirely.
add_filter( 'wp_calculate_image_sizes', '__return_false' );
add_filter( 'wp_calculate_image_srcset', '__return_false' );
add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' );WP adds responsive image attributes srcset and sizes via the wp_image_add_srcset_and_sizes() function (reference). This function will only modify the image if it can find both a srcset and sizes attribute since they both have to work together. If no other plugins are involved, returning false from either the wp_calculate_image_srcset or wp_calculate_image_sizes hooks will result in no responsive images, but if the image has been modified in some way so that the srcset or sizes attribute is being added before WordPress does so, then the image may still end up with a srcset and sizes attribute.
By adding this filter, WordPress will no longer generate different image sizes and add the srcset attribute to your images. This can be useful in situations where you want to manage image responsiveness through other means, such as CSS or plugins.
If you want to use a plugin, this Disable Responsive Images Complete.
If you want to exclude certain images sizes, use this
/* Disable certain image variants from WordPress */
function disable_image_sizes( $sizes ) {
/* Default WordPress */
unset( $sizes[ 'thumbnail' ]); // Remove Thumbnail (150 x 150 hard cropped)
unset( $sizes[ 'medium' ]); // Remove Medium resolution (300 x 300 max height 300px)
unset( $sizes[ 'medium_large' ]); // Remove Medium Large (added in WP 4.4) resolution (768 x height)
unset( $sizes[ 'large' ]); // Remove Large resolution (1024 x 1024 max height 1024px)
/* With WooCommerce */
unset( $sizes[ 'shop_thumbnail' ]); // Remove Shop thumbnail (180 x 180 hard cropped)
unset( $sizes[ 'shop_catalog' ]); // Remove Shop catalog (300 x 300 hard cropped)
unset( $sizes[ 'shop_single' ]); // Shop single (600 x 600 hard cropped)
return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'disable_image_sizes' );Using a WordPress plugin, Disable Media Sizes
WordPress 6.7 adds sizes=”auto” for lazy-loaded images. allows the browser to use the rendered layout width of the image when selecting a source from the srcset list, since lazy loaded images don’t load until after the layout is known.
// disable auto-sizes to fix bug that WordPress 6.7 added.
add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );FAQ
Do deleting image in WordPress media library delete its associated image sizes?
Yes, deleting an image in media library will also delete all of its derived sizes.
Some tips
Optimize Images Prior to Upload
Why bloat up your site and consume server resources if you can optimize your images prior to upload. Compress it with lossless compression before upload. A great site such as tinypng.com and compressjpeg.com/.
Use Image Aspect Ratios
You don’t need to crop your images to keep a consistent look across your site. Rather, you can use the CSS aspect ratio property to target your images.