Custom Image Sizes: Cheat Sheet

faebe · April 11, 2022, 10:31am

The bricks theme comes without any usable image sizes for your design needs. Feel free to copy this cheat sheet to your Bricks child theme’s function.php to get usable image sizes in 1:1, 16:9, 3:2, 4:3, 3:4, 2:3 and the original aspect ratio of the image.

Make sure to always choose the resolution that most closely matches the maximum size that the image will be displayed at. All other smaller resolutions with the same aspect ratio will be automatically set in the srcset for smaller devices / resolutions (but it will max out at the one you set).

If you already have images uploaded, you will have to re-generate them using https://de.wordpress.org/plugins/regenerate-thumbnails/

/**
 * Custom Image Sizes
 */
add_theme_support( 'post-thumbnails' );

// 1:1 Hard Crop
add_image_size( '1x1-crop-1920px', 1920, 1920, true ); // Hard Crop Mode
add_image_size( '1x1-crop-1440px', 1440, 1440, true ); // Hard Crop Mode
add_image_size( '1x1-crop-960px', 960, 960, true ); // Hard Crop Mode
add_image_size( '1x1-crop-480px', 480, 480, true ); // Hard Crop Mode
add_image_size( '1x1-crop-240px', 240, 240, true ); // Hard Crop Mode

// 16:9 Hard Crop
add_image_size( '16x9-crop-1920px', 1920, 1080, true ); // Hard Crop Mode
add_image_size( '16x9-crop-1440px', 1440, 810, true ); // Hard Crop Mode
add_image_size( '16x9-crop-960px', 960, 540, true ); // Hard Crop Mode
add_image_size( '16x9-crop-480px', 480, 270, true ); // Hard Crop Mode

// 3:2 Hard Crop
add_image_size( '3x2-crop-1920px', 1920, 1280, true ); // Hard Crop Mode
add_image_size( '3x2-crop-1440px', 1440, 960, true ); // Hard Crop Mode
add_image_size( '3x2-crop-960px', 960, 640, true ); // Hard Crop Mode
add_image_size( '3x2-crop-480px', 480, 320, true ); // Hard Crop Mode

// 4:3 Hard Crop
add_image_size( '4x3-crop-1920px', 1920, 1440, true ); // Hard Crop Mode
add_image_size( '4x3-crop-1440px', 1440, 1080, true ); // Hard Crop Mode
add_image_size( '4x3-crop-960px', 960, 720, true ); // Hard Crop Mode
add_image_size( '4x3-crop-480px', 480, 360, true ); // Hard Crop Mode

// 3:4 Hard Crop
add_image_size( '3x4-crop-1920px', 1440, 1920, true ); // Hard Crop Mode
add_image_size( '3x4-crop-1440px', 1080, 1440, true ); // Hard Crop Mode
add_image_size( '3x4-crop-960px', 720, 960, true ); // Hard Crop Mode
add_image_size( '3x4-crop-480px', 360, 480, true ); // Hard Crop Mode

// 2:3 Hard Crop
add_image_size( '2x3-crop-1920px', 1280, 1920, true ); // Hard Crop Mode
add_image_size( '2x3-crop-1440px', 960, 1440, true ); // Hard Crop Mode
add_image_size( '2x3-crop-960px', 640, 960, true ); // Hard Crop Mode
add_image_size( '2x3-crop-480px', 320, 480, true ); // Hard Crop Mode

// Original Soft Crop
add_image_size( 'original-1920px', 1920, 1920 ); // Hard Crop Mode
add_image_size( 'original-1440px', 1440, 1440 ); // Hard Crop Mode
add_image_size( 'original-960px', 960, 960 ); // Hard Crop Mode
add_image_size( 'original-480px', 480, 480 ); // Hard Crop Mode
add_image_size( 'original-240px', 240, 240 ); // Hard Crop Mode

// Make sizes available in Bricks
function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        '1x1-crop-1920px' => 'Cropped 1:1 1920px', 
        '1x1-crop-1440px' => 'Cropped 1:1 1440px', 
        '1x1-crop-960px' => 'Cropped 1:1 960px', 
        '1x1-crop-480px' => 'Cropped 1:1 480px', 
        '1x1-crop-240px' => 'Cropped 1:1 240px', 
        '16x9-crop-1920px' => 'Cropped 16:9 1920px', 
        '16x9-crop-1440px' => 'Cropped 16:9 1440px', 
        '16x9-crop-960px' => 'Cropped 16:9 960px', 
        '16x9-crop-480px' => 'Cropped 16:9 480px', 
        '3x2-crop-1920px' => 'Cropped 3:2 1920px', 
        '3x2-crop-1440px' => 'Cropped 3:2 1440px', 
        '3x2-crop-960px' => 'Cropped 3:2 960px', 
        '3x2-crop-480px' => 'Cropped 3:2 480px', 
        '4x3-crop-1920px' => 'Cropped 4:3 1920px', 
        '4x3-crop-1440px' => 'Cropped 4:3 1440px', 
        '4x3-crop-960px' => 'Cropped 4:3 960px', 
        '4x3-crop-480px' => 'Cropped 4:3 480px', 
        '3x4-crop-1920px' => 'Cropped 3:4 1920px', 
        '3x4-crop-1440px' => 'Cropped 3:4 1440px', 
        '3x4-crop-960px' => 'Cropped 3:4 960px', 
        '3x4-crop-480px' => 'Cropped 3:4 480px', 
        '2x3-crop-1920px' => 'Cropped 2:3 1920px', 
        '2x3-crop-1440px' => 'Cropped 2:3 1440px', 
        '2x3-crop-960px' => 'Cropped 2:3 960px', 
        '2x3-crop-480px' => 'Cropped 2:3 480px', 
        'original-1920px' => 'Original 1920px', 
        'original-1440px' => 'Original 1440px', 
        'original-960px' => 'Original 960px', 
        'original-480px' => 'Original 480px', 
        'original-240px' => 'Original 240px',
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

Make sure to use the child theme (download in your bricks account) and not the main bricks theme.

Michael · April 11, 2022, 10:58am

Thanks for the cheat sheet @faebe. Do you know if this removes the current full, large, medium etc.

Also does this affect performance as you are making more copies of the image?

Thanks again!

faebe · April 11, 2022, 11:18am

Hey @Michael, the original sizes will stay but you could remove them with some additional code like:

// Remove default image sizes 
function wpb_remove_default_images( $sizes ) {
 unset( $sizes['small']); // 150px
 unset( $sizes['medium']); // 300px
 unset( $sizes['large']); // 1024px
 unset( $sizes['medium_large']); // 768px
 return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'wpb_remove_default_images' );

Not sure whether Bricks or some plugin you installed uses them, since they expect them to be there. Personally, I just ignore them and leave them as is.

It won’t effect the frontend page speed. By giving more srcset options to the browser it most likely will be even faster than before.

It will effect the time needed to process the image on upload in the WP backend. And of course it will take up more space on your webspace disk.

If you already have images uploaded, you will have to re-generate them using https://de.wordpress.org/plugins/regenerate-thumbnails/

Michael · April 11, 2022, 11:28am

Much appreciated @faebe

flimflam · April 23, 2022, 9:57am

Very useful @faebe - Thanks.

One note - my experience has been, the more image sizes you define, the more graphic files have to be generated (I guess that’s obvious ). This lead to two things:

Uploading a large image can hit the server processor quite hard, as it has to go off and generate multiple version of that image; and
Server storage gets gobbled up as there are so many different versions of the graphic.

With smaller sites, none of this really matters, but when sites grow or gain main posts/images, it can have quite an impact.

faebe · April 27, 2022, 6:58am

@flimflam This is true. However, server storage is hardly an issue with modern hosting providers since storage is cheap but only bandwidth is expensive. You can get 100Gb for under 5€/month with a good hosting provider. At average 0.5mb/image (considering the small resolutions) that would be 200k image files. With our 30 resolutions that’s 6666 image uploads. And the processing time was always fully acceptable as long as you don’t upload more than 10 images at once.

But if that’s an issue, you could always skip every other resolution and only use…

/**
 * Custom Image Sizes
 */
add_theme_support( 'post-thumbnails' );

// 1:1 Hard Crop
add_image_size( '1x1-crop-1920px', 1920, 1920, true ); // Hard Crop Mode
add_image_size( '1x1-crop-960px', 960, 960, true ); // Hard Crop Mode
add_image_size( '1x1-crop-240px', 240, 240, true ); // Hard Crop Mode

// 16:9 Hard Crop
add_image_size( '16x9-crop-1920px', 1920, 1080, true ); // Hard Crop Mode
add_image_size( '16x9-crop-960px', 960, 540, true ); // Hard Crop Mode

// 3:2 Hard Crop
add_image_size( '3x2-crop-1920px', 1920, 1280, true ); // Hard Crop Mode
add_image_size( '3x2-crop-960px', 960, 640, true ); // Hard Crop Mode

// 4:3 Hard Crop
add_image_size( '4x3-crop-1920px', 1920, 1440, true ); // Hard Crop Mode
add_image_size( '4x3-crop-960px', 960, 720, true ); // Hard Crop Mode

// 3:4 Hard Crop
add_image_size( '3x4-crop-1920px', 1440, 1920, true ); // Hard Crop Mode
add_image_size( '3x4-crop-960px', 720, 960, true ); // Hard Crop Mode

// 2:3 Hard Crop
add_image_size( '2x3-crop-1920px', 1280, 1920, true ); // Hard Crop Mode
add_image_size( '2x3-crop-960px', 640, 960, true ); // Hard Crop Mode

// Original Soft Crop
add_image_size( 'original-1920px', 1920, 1920 ); // Hard Crop Mode
add_image_size( 'original-960px', 960, 960 ); // Hard Crop Mode
add_image_size( 'original-240px', 240, 240 ); // Hard Crop Mode

// Make sizes available in Bricks
function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        '1x1-crop-1920px' => 'Cropped 1:1 1920px', 
        '1x1-crop-960px' => 'Cropped 1:1 960px', 
        '1x1-crop-240px' => 'Cropped 1:1 240px', 
        '16x9-crop-1920px' => 'Cropped 16:9 1920px', 
        '16x9-crop-960px' => 'Cropped 16:9 960px', 
        '3x2-crop-1920px' => 'Cropped 3:2 1920px', 
        '3x2-crop-960px' => 'Cropped 3:2 960px', 
        '4x3-crop-1920px' => 'Cropped 4:3 1920px', 
        '4x3-crop-960px' => 'Cropped 4:3 960px', 
        '3x4-crop-1920px' => 'Cropped 3:4 1920px', 
        '3x4-crop-960px' => 'Cropped 3:4 960px', 
        '2x3-crop-1920px' => 'Cropped 2:3 1920px', 
        '2x3-crop-960px' => 'Cropped 2:3 960px', 
        'original-1920px' => 'Original 1920px', 
        'original-960px' => 'Original 960px', 
        'original-240px' => 'Original 240px',
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

flimflam · April 27, 2022, 10:55am

Good point on the multi image upload - you must have a better host than us as we experience a server slow down if two or more images uploaded simultaneously! (That installed is quite busy traffic-wise and does have 35k+ entries in its media library though )

faebe · April 27, 2022, 11:11am

Holy — regenerating thumbnails for 35k existing media elements would be a nightmare anyway

So I guess you are right, this is not for everyone. I’d only use it if you are at the begninnign of creating your website (not many media or better no uploads existing) and you don’t plan to have 5k+ images…

riderworks · April 27, 2022, 9:43pm

I also reset my image sizes. WordPress default image sizes are useless.

I also removed these other Wordpress default images.

unset( $sizes[ '1536x1536' ]);
unset( $sizes[ '2048x2048' ]);

d19dotca · April 29, 2022, 5:09pm

I believe you can also just use the WP CLI as an alternative, prevents needing to install an additional plugin.

omega · May 2, 2022, 5:41am

@faebe I see so many image sizes will also add info to _wp_attachment_metadata. Will that have any significant performance implication?

omega · June 20, 2022, 12:41pm

@faebe What do you think of the image sizes which Bricks add?

Source: Image Sizes in Bricks – BricksLabs

faebe · June 20, 2022, 1:24pm

Are those new? I’ve never seen those before. But I guess most users will be fine using this option.

On the one hand, it’s way fewer options than my proposal, which is good for your webspace storage and processing time on creation. On the other hand, it is limited to square, original and 16:9 aspect ratios, my proposal has additional 2:3 and 3:4 aspect ratios as well as vertical formats — which bricks’ option is lacking. But most people might probably not need those.

However, not having a 1920px wide version in there seems to be an odd decision to me since 1920x1080px is the most common screen size and 1920px wide images are widely used for full-width headers. You will max out at 1200px width with the bricks option. And the 600px width sizes are just a little bit too small for mobile devices with @2x pixel density. E.g. a standard 375px iPhone will request a 750px min-width image. With my proposal the 960px asset will be loaded, with the bricks version the 1200px asset will be loaded — resulting in a larger request and theoretically slower loading speeds. Not sure if I’m missing something here though…

omega · June 20, 2022, 2:21pm

You need to enable them from Bricks Settings.

I agree with the logic behind the sizes. I am just wondering how should I handle this. I am looking at 10 images per post. I also need to generate avif and webp images. Avif size is drastically lower for me for some images. But it’s not supported well. So webp is the next option for other browsers and jpg/png for older browsers. So I am looking at at least 30 images per post going this way.

May be I should use a image cdn like ImageKit or Cloudinary. Automate Image Optimization | ImageKit.io

They can handle on fly optimizations with avif, webp and other formats.

Michael · June 20, 2022, 4:16pm

Hey @omega

If your images are well compressed and you choose your image sizes correctly then the factor of having 30 images per post is not so much of an issue.

A browser is smart and quick enough to determine which image to use in terms of size and image type. It does not load all 30 options.

I have found that using a CDN to deliver optimised photos is actually slower because it adds extra calls and latency.

The only caveat in which i would use a CDN to deliver this is for something like a photographer’s website or pages with very heavy img sizes and videos.

But for normal websites I wouldn’t there is a small saving in terms of offloading from the server space. But server space is super cheap nowadays.

dahunsi · August 14, 2022, 11:04pm

That’s a whole lot of images to choose from. Thanks a lot for this.

omega · August 21, 2022, 2:20pm

@faebe I was looking at the aspect ratio property in the css. The compatibility also looks great. I guess there is no need to have so many sizes now and to use aspect ratio css property. What say?

omega · August 22, 2022, 11:52am

This no longer works for removing the default image sizes. Instead you need to do it like this.

// Remove default image sizes

add_filter( 'intermediate_image_sizes', 'remove_default_img_sizes', 10, 1);

function remove_default_img_sizes( $sizes ) {

  $targets = ['thumbnail', 'medium', 'medium_large', 'large', '1536x1536', '2048x2048', 'woocommerce_thumbnail', 'woocommerce_single', 'woocommerce_gallery_thumbnail'];

  foreach($sizes as $size_index=>$size) {

    if(in_array($size, $targets)) {

      unset($sizes[$size_index]);

    }

  }

  return $sizes;

}

MarketingSpectrum · November 23, 2022, 4:05pm

Hey, was looking to create custom image sizes and found this.
I wanted to create my own system and added this to my child theme’s functions.php file.

But it’s not showing up in my builder settings for images?
Was the above still valid or am I doing something wrong?


/**
 * Custom Image Sizes
 */
add_theme_support( 'post-thumbnails' );

// 16:9
add_image_size( '2560-1440', 2560, 1440, false );
add_image_size( '1920-1080', 1920, 1080, false );
add_image_size( '1366-768', 1366, 768, false ); 
add_image_size( '1024-476', 1024, 476, false ); 
add_image_size( '768-432', 768, 432, false ); 
add_image_size( '608-342', 608, 342, false ); 

// 4:3
add_image_size( '2560-1920', 2560, 1920, false );
add_image_size( '1920-1440', 1920, 1440, false );
add_image_size( '1366-1024', 1366, 1024, false );
add_image_size( '1024-768', 1024, 768, false );
add_image_size( '768-576', 768, 576, false );
add_image_size( '608-456', 608, 456, false );


// Make sizes available in Bricks
function wpb_custom_image_sizes( $size_names ) {
    $new_sizes = array(
        '2560-1440' => '2560-1440', 
        '1920-1080' => '1920-1080', 
        '1366-768' => '1366-768', 
        '1024-476' => '1024-476', 
        '768-432' => '768-432', 
        '608-342' => '608-342', 
        '2560-1920' => '2560-1920', 
        '1920-1440' => '1920-1440', 
        '1366-1024' => '1366-1024', 
        '1024-768' => '1024-768', 
        '768-576' => '768-576', 
        '608-456' => '608-456', 
    );
    return array_merge( $size_names, $new_sizes );
}
add_filter( 'image_size_names_choose', 'wpb_custom_image_sizes' );

jmcbade · April 22, 2023, 10:53am

Has anyone got this working?