When you upload an image, WordPress and Divi create several images sizes for different purposes.
More info and sources:
- Overview of Divi and WP image sizes
- https://chetanprajapati.com/remove-extra-image-sizes-divi-theme
- https://divibooster.com/resize-non-module-divi-gallery-thumbnail-sizes/
- See also Divi stop cropping images (Divi gallery, blog, portfolio)
If there are image sizes you never use, you can prevent them from being generates, to save space. To do that, put the following code in functions.php of a child theme. Note that this example removes ALL Divi AND standard WordPress image file sizes. You shouldn’t do that though. You should keep the sizes you really need (another safer version below).
/**
* Remove extra image sizes
* @param array $sizes Array of image sizes.
*/
add_filter( 'intermediate_image_sizes_advanced', 'hws_remove_extra_image_sizes' );
function hws_remove_extra_image_sizes( $sizes ) {
unset( $sizes['et-pb-gallery-module-image-portrait'] );
unset( $sizes['et-pb-portfolio-image'] );
unset( $sizes['et-pb-portfolio-image-single'] ) ;
unset( $sizes['et-pb-portfolio-module-image'] );
unset( $sizes['et-pb-post-main-image'] );
unset( $sizes['et-pb-post-main-image-fullwidth'] );
unset( $sizes['et-pb-post-main-image-fullwidth-large'] );
unset( $sizes['et-pb-image--responsive--phone'] );
unset( $sizes['et-pb-image--responsive--desktop'] );
unset( $sizes['et-pb-image--responsive--tablet'] );
unset( $sizes['thumbnail'] );
unset( $sizes['medium'] );
unset( $sizes['large'] );
unset( $sizes['medium_large'] );
unset( $sizes['1536x1536'] );
unset( $sizes['2048x2048'] );
return $sizes;
}Code language: PHP (php)
Safer version to keep important sizes
This keeps the Divi srcset images and removes all:
- WP default sizes that are not needed when you use with Divi
- Divi special size that are not needed when you don’t use projects and blog posts.
/**
* Remove extra image sizes
* @param array $sizes Array of image sizes.
*/
add_filter( 'intermediate_image_sizes_advanced', 'hws_remove_extra_image_sizes' );
function hws_remove_extra_image_sizes( $sizes ) {
unset( $sizes['et-pb-gallery-module-image-portrait'] );
unset( $sizes['et-pb-portfolio-image'] );
unset( $sizes['et-pb-portfolio-image-single'] ) ;
unset( $sizes['et-pb-portfolio-module-image'] );
unset( $sizes['et-pb-post-main-image'] );
unset( $sizes['et-pb-post-main-image-fullwidth'] );
unset( $sizes['et-pb-post-main-image-fullwidth-large'] );
unset( $sizes['thumbnail'] );
unset( $sizes['medium'] );
unset( $sizes['large'] );
unset( $sizes['medium_large'] );
unset( $sizes['1536x1536'] );
unset( $sizes['2048x2048'] );
return $sizes;
}Code language: PHP (php)
To change the default sizes of the thumbnails
This example changes the portfolio grid image to a square image.
Note that you still need CSS to change the available space the new images needs in the grid.
add_filter('et_theme_image_sizes', 'db_resize_divi_gallery_images');
function db_resize_divi_gallery_images($sizes) {
unset($sizes['400x284']);
$sizes['225x225'] = 'et-pb-portfolio-image';
return $sizes;
}Code language: PHP (php)