Create uniquely resized image thumbnails for use in content pages, blog posts, landing pages and galleries, speeding up the loading speed of your WordPress website

For many of us, the standard set of gallery sizes in WordPress aren’t enough and for many, they create their own set of issues. In turn, for any knowledgable WordPress developer, controlling what sizes are being created every time you upload an image is crucial for a proper, fast, and well-performing website. Below you will find a snippet that we’ve created for one of our clients, which you need to add to functions.php in order for it to work. Naturally, if you aren’t adding this prior to developing your website and uploading new media, you will have to regenerate all the thumbnails – easily done by the Regenerate Thumbnails plugin, which you can download & install on your WordPress site for free.

/** Gallery Sizes */
add_image_size('images-medium', 450, 450, array('center', 'center'));

add_image_size('gallery-small', 480, 300, array('center', 'center'));

add_image_size('gallery-medium', 720, 405, array('center', 'center'));

add_image_size('gallery-thumb', 500, 350, true );

add_image_size('woocommerce_single_resized', 1000, 1000, true );
/** Media Gallery Sizes Add-on */
add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {

return array_merge( $sizes, array(

'gallery-small' => __( 'Gallery Medium Cropped' ),

'gallery-medium' => __( 'Gallery Medium' ),

) );

}

Copy

In this case, we’re adding 5 additional thumbnail sizes that we need for theme placements for our client’s website. These items are catered to a 1440px wide design grid size we’re using, allowing us to fill out the pages perfectly, all without adding too much weight to them. Naturally, it would be a great idea to use the <picture> element within the template’s design or ACF (Advanced Custom Forms). This will give you more leeway in terms of loading image sizes that fit each screen, allowing you to load smaller and less heavy imagery. In turn, this will undoubtedly speed up your site, as it stops loading large thumbnail sizes, albeit filling out the content area real estate perfectly. Below you will find an example of what is done on EV Car Scene, one of the websites we manage & develop.

EV Car Scene - Custom Sized Thumbnails For Use In Content Pages — EV Car Scene – Custom Sized Thumbnails For Use In Content Pages