WordPress image sizes
WordPress automatically generate some images on upload so when you upload one image by default there will be 5, or more variants of the same image with different sizes.
You may not need all these image sizes, an they are just using space on the server. this can be annoying if you are short on storage space, or you may need to buy additional storage.
To get rid of the unused images you can do the following:
1. Set media sizes from the WordPress admin:
— From your WordPress dashboard go to Settings -> Media
— Set the unused image sizes to 0
However, if you are uploading very big images there will be some additional sizes that are not listed in the media settings. To remove those either upload smaller images than 1536 x 1536 px, or use the nr.2 method that follows.
2. Remove unused images by filter.
If you are familiar with editing WordPress themes you can remove default image sizes by filter.
For documentation for editing files in WordPress visit: https://wordpress.org/support/article/editing-files/
For documentation about properly editing WordPress themes visit: https://developer.wordpress.org/themes/advanced-topics/child-themes/
Paste the following code to your theme`s functions.php
/*
* Custom filter to remove default image sizes from WordPress.
*/
/* Add the following code in the theme's functions.php and disable any unset function as required */
function remove_default_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 0 infinite height)
unset( $sizes[ 'large' ]); // Remove Large resolution (1024 x 1024 max height 1024px)
return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'remove_default_image_sizes' );
If you are using Woo-commerce and also want to remove the default Woo-commerce image sizes add these lines to the list:
/* 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)
This will remove the default WordPress image sizes, however if you upload large images there will be several additional sizes.
If you upload an image larger than 1536 pixel width, or height, WordPress will generate a max 1536×1536 px. image
If you upload an image larger than 2048 pixel width, or height, WordPress will generate a max 2048×2048 px. image and also the 1536×1536 px. image.
to remove these, add these lines to your filter:
unset( $sizes['1536x1536'] );
unset( $sizes['2048x2048'] );
remove_image_size( '1536x1536' );
remove_image_size( '2048x2048' );
But this is not all.
When you upload images directly from your camera without previous optimization, this images may be way to big to use on websites. that`s why starting from version 5.3 WordPress introduced a so called “big image threshold“.
When images bigger than 2560 px. width, or height are uploaded, WordPress automatically size them down to max 2560 px resolution, and this image will be used as the maximum sized image, but it will also keep the original image as well.
However it is not recommended, You still can remove this function by the following filter:
add_filter( 'big_image_size_threshold', '__return_false' );
Now it`s time to add your custom image sizes to your theme:
3. Adding custom image sizes to your theme
In functions.php add:
// post thumbnail sizes
add_action( 'after_setup_theme', 'vkb_setup_theme' );
function vkb_setup_theme() {
add_image_size( 'mycustomsize_XS', 128 );
add_image_size( 'mycustomsize_S', 256 );
add_image_size( 'mycustomsize_M', 512 );
add_image_size( 'mycustomsize_XL', 1024 );
}
//
Where mycustomsize_xx is your custom image size name, you can change this to whatever you want, and the second value is the size of the image.
For properly sizing and cropping the images check out: https://developer.wordpress.org/reference/functions/add_image_size/
to get the original (untouched) image use:
wp_get_original_image_path() // path to the image
wp_get_original_image_url() // url of the image