Adding Custom Image Sizes in WordPress – Here’s How to Do It Right!

Introduction

Images are a central component of any WordPress website. However, the default image formats are not always sufficient to achieve optimal design and performance. By adding custom image sizes, you can ensure that your images always fit perfectly into the layout while optimizing loading times.

Why Custom Image Sizes Are Important in WordPress

• Custom image formats for different areas of the website (e.g., header, blog posts, thumbnails)
• Reduction of unnecessary image sizes that take up storage space and loading times
• Consistent presentation of images for a professional appearance

Benefits for Performance and Design

• Faster loading times due to optimally cropped images
• Lower server load and reduced storage consumption
• Consistent design through tailored image formats

Standard Image Sizes in WordPress

WordPress automatically generates various image sizes when you upload an image to the media library. These standard sizes are:

• Thumbnail: 150x150 px (square, cropped)
• Medium: 300x300 px (proportionally scaled)
• Large: 1024x1024 px (proportionally scaled)
• Full Size: Original size of the uploaded image

How WordPress Automatically Scales Images

When uploading an image, WordPress automatically generates different versions based on the standard sizes. These can be adjusted under Settings > Media. However, sometimes this is not enough, and custom image sizes are needed.

Registering Custom Image Sizes

With the function add_image_size(), you can add custom image sizes. The code is inserted into the functions.php of the theme:

function custom_image_sizes() {
    add_image_size('custom-small', 400, 300, true); // Crop to 400x300 px
    add_image_size('custom-medium', 800, 600, false); // Proportionally scale
    add_image_size('custom-large', 1200, 800, true); // Crop to 1200x800 px
}
add_action('after_setup_theme', 'custom_image_sizes');

Explanation of Parameters:

• The first value is the name of the image size (e.g., custom-small)
• The second and third values are width and height in pixels
• The fourth parameter determines whether the image is cropped (true) or proportionally scaled (false)

Using Custom Image Sizes in the Theme

Using the_post_thumbnail()

To use a custom image size in a theme template, you can use the_post_thumbnail():

echo get_the_post_thumbnail($post->ID, 'custom-small');

If you want to generate a custom <img> element:

$image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'custom-small');
if ($image) {
    echo '<img src="' . esc_url($image[0]) . '" width="' . esc_attr($image[1]) . '" height="' . esc_attr($image[2]) . '" alt="">';
}

Regenerating Image Sizes

Why This Is Necessary

When you add new image sizes, they do not affect images that have already been uploaded. Therefore, existing images need to be regenerated.

Using Plugins like “Regenerate Thumbnails”

The plugin Regenerate Thumbnails can help adjust existing images for new sizes:

1. Install and activate the plugin.
2. Go to Tools > Regenerate Thumbnails.
3. Click on “Regenerate Thumbnails for All Attachments”.

Displaying Custom Image Sizes in Gutenberg & Media Library

To make custom image sizes selectable in the media library and Gutenberg editor, the function image_size_names_choose must be used:

function custom_image_sizes_in_admin($sizes) {
    return array_merge($sizes, array(
        'custom-small' => __('Small Custom Size'),
        'custom-medium' => __('Medium Custom Size'),
        'custom-large' => __('Large Custom Size'),
    ));
}
add_filter('image_size_names_choose', 'custom_image_sizes_in_admin');

After adding this code, the new image sizes can be used directly in the media selection.

Conclusion

When Custom Image Sizes Make Sense

• When the standard sizes do not fit your design
• To achieve better performance through optimized image sizes
• For a consistent appearance in your theme

Best Practices for Optimal Performance

• Use only the image sizes that you really need
• Enable the cropping function (true) to maintain consistent formats
• Use Regenerate Thumbnails if you want to adjust existing images

With these steps, you can add custom image sizes in WordPress and improve the design and performance of your website.