Custom Image Sizes: Cheat Sheet

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.

5 Likes

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!

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/

Much appreciated @faebe :+1: :+1:

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 :laughing:). This lead to two things:

  1. 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
  2. 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.

@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' );

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 :open_mouth:)

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

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…

1 Like

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' ]);

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

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