Types of Image Sizes in WordPress

Photo by Photo by Yayan Kurnia Akbar

When you upload an image to your WordPress website, WordPress automatically generates several different image sizes. Why does it do that?

Because WordPress doesn’t use a single image size everywhere on your site, such as:

• In posts
• In portfolios
• In pop-ups
• As post thumbnails on archive pages
• In widgets
• In the admin interface, etc.

So, WordPress allows you to use full-size images in post pages and a 150×150 (for example) size on archive pages.

Keep in mind that the more image sizes you have, the more files there are on your site, and the longer it takes to process images during the upload.

WordPress supports several default image sizes. You can find and change them in the admin area under “Settings > Media.”

If you don’t want WordPress to create copies of images for each size, you can add the following code to your theme’s functions.php file.

However, you should keep in mind that if your WordPress theme gets updated, it’s better to use a child theme or a custom plugin so your changes don’t get overwritten by theme updates.

add_filter('intermediate_image_sizes', 'misha_turn_off_default_sizes');


function misha_turn_off_default_sizes($default_image_sizes) {
    unset($default_image_sizes['thumbnail']); // turn off thumbnail size
    unset($default_image_sizes['medium']); // turn off medium size
    unset($default_image_sizes['large']); // turn off large size


    return $default_image_sizes;
}

The medium_large image size was introduced in WordPress 4.4 along with responsive image features. It has a fixed width of 768px and proportional height.

To deactivate the medium_large size, you can add the following code:

add_filter('intermediate_image_sizes', 'misha_deactivate_medium_large');


function misha_deactivate_medium_large($default_image_sizes) {
    unset($default_image_sizes['medium_large']); // deactivate medium_large size


    return $default_image_sizes;
}

Sometimes, you need to find out the list of available image sizes on your website. Unfortunately, there’s no way to change the default and custom image sizes directly, but if you need a list of the default sizes, you can use get_intermediate_image_sizes(). This function will return an array of available sizes, such as:

print_r( get_intermediate_image_sizes() );
/*
Array ( [0] => thumbnail [1] => medium [2] => medium_large [3] => large )
*/

To list custom sizes, you can access the global `$_wp_additional_image_sizes` variable, which also gives you the image dimensions. For example:

global $_wp_additional_image_sizes;
print_r( $_wp_additional_image_sizes );
/*
Array
(
[my-image-size-name] => Array
(
[width] => 400
[height] => 400
[crop] => 1
)

[twentyseventeen-featured-image] => Array
(
[width] => 2000
[height] => 1200
[crop] => 1
)
)
*/

It’s easy to use WordPress image sizes in the admin area, where you simply choose the required image size from a dropdown. Here are some functions you can use:

A. the_post_thumbnail()

This is the first function in our list because we use it more often than others.

the_post_thumbnail( $size = 'thumbnail', $attr = '' );

Note that this function prints the image tag (img), not the URL.

$size

You can use these values for the `$size` parameter:

• Image size identifier (name) – like ‘medium’, ‘custom’, etc. default is thumbnail.
• Custom size array (width, height). If you use this, it will display the most suitable image size.
• You can also pass full to show the original image.

$attr

You can send any HTML attributes here as an array, and you can even rewrite the src attribute!

B. get_the_post_thumbnail()

This function is similar to the_post_thumbnail(), with one difference:

• The first parameter is the post ID, etc
• It returns the image instead of printing it
• Exampleget_the_post_thumbnail()

echo get_the_post_thumbnail( get_the_ID(), 'medium' );

C. wp_get_attachment_image_src()

This function allows you to get the image URL.

wp_get_attachment_image_src( $attachment_id, $size = 'thumbnail' );

Note that the attachment ID is not the post ID, but you can easily get it. For example, if you need the featured image ID, you can use get_post_thumbnail_id().

$image_array = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
echo $image_array[0];

This process is simple and consists of two steps.

A. add_image_size()

To register a custom image size in WordPress, use this function in your theme’s functions.php file or in a custom plugin.

add_image_size( $size_name, $width = 0, $height = 0, $crop = false );

Explanation:

$size_name – Don’t use reserved image size names like thumb, thumbnail, post-thumbnail, medium, medium_large, large, full.

$width – Width in pixels, set to 0 for unlimited width.

$height – Height in pixels, set to 0 for unlimited height.

$crop – This parameter can accept false or true, but now it’s more flexible with options such as left, top, etc.

Example:

add_image_size( 'my-image-size-name', 200, 200, array( 'left', 'top' ) );

To keep the image looking good and simple, we recommend using square sizes in this example. Because if the original image is horizontal, the left part of the image will remain, but the right part will be cropped. Similarly, for vertical images, the bottom part of the image will be cropped.

Alternatively, you can crop the image manually using the “Manual Image Crop” plugin.

But don’t create too many image sizes:

The more image sizes you create, the more files will be in your upload folder. The more time it will take to upload images to your site.

How to Add Your Custom Image Size to the Media Uploader and Gutenberg

When adding images to widgets and posts, WordPress (3.5+) allows you to select the image size to use. You can add your custom size to the list of options by using the following code:

As you can see, you can add a custom size there:

add_filter('image_size_names_choose', 'misha_new_image_sizes');  

function misha_new_image_sizes($sizes) {  
    $addsizes = array(  
        "my-image-size-name" => 'Misha size' // "image size name" => "Label (anything)"  
    );  

    $newsizes = array_merge($sizes, $addsizes);  

    return $newsizes;  
}

This code also works for the Gutenberg block editor.

You may encounter a situation where, after modifying the add_image_size() parameters or changing your website theme, WordPress does not automatically generate image sizes for previously uploaded images that are still displayed on the site.

What should you do in this situation? If there are only 2-3 images in your upload folder, you can simply re-upload them. But what if there are thousands of images?

There are two ways to solve this issue: using a plugin or writing custom code:

A. Regenerating Thumbnails with Plugins

We recommend two simple plugins for this:

• Ajax Thumbnail Rebuild
• Force Regenerate Thumbnails

Each plugin has its own pros and cons, so depending on your situation, you can choose the one that works best for you.

B. Programmatically Regenerating Thumbnails

Here’s the code you can use to regenerate images:

$attachment_id = 5; // pass your attachment ID here

$path = get_attached_file( $attachment_id );
$meta = wp_generate_attachment_metadata( $attachment_id, $path );
wp_update_attachment_metadata( $attachment_id, $meta );

Imagine your website has 10 custom post types, each using 2-3 image sizes on the pages. When you upload any image, WordPress creates 20-30 copies!

To avoid this, use the intermediate_image_sizes and intermediate_image_sizes_advanced hooks to control which image sizes to generate for specific post types. Here’s an example:

add_filter('intermediate_image_sizes_advanced', function($sizes) {
    if (isset($_REQUEST['post_id']) && 'page' == get_post_type($_REQUEST['post_id'])) {
        unset($sizes['my-image-size-name']);
    }


    return $sizes;
});

A slightly more complex example, but the function remains the same:

/*
 * This hook will be fired while you uploading a picture
 */
add_filter('intermediate_image_sizes', 'misha_reduce_image_sizes');


function misha_reduce_image_sizes($sizes) {
    /*
     * $sizes - all image sizes array
     * Array (
     *   [0] => thumbnail
     *   [1] => medium
     *   [2] => large
     *   [3] => post-thumbnail
     * )
     * get_post_type() to get post type
     */
    $type = get_post_type($_REQUEST['post_id']); // $_REQUEST['post_id'] post id the image uploads to


    foreach ($sizes as $key => $value) {
        /*
         * use switch if there are a lot of post types
         */
        if ($type == 'page') {
            if ($value == 'regionfeatured') { // turn off 'regionfeatured' for pages
                unset($sizes[$key]);
            }
        } else if ($type == 'region') {
            if (!in_array($value, array('regionfeatured', 'misha335'))) { // for regions turn off everything except 'regionfeatured' and 'misha335'
                unset($sizes[$key]);
            }
        } else {
            if ($value != 'thumbnail') { // turn off everything except thumbnail
                unset($sizes[$key]);
            }
        }
    }


    return $sizes;
}

That’s the article on Various Image Sizes in WordPress shared by Mangcoding. Hopefully, this article is useful and provides new knowledge for you. If you have any constructive criticism or suggestions, feel free to leave a comment or send them via Email and Social Media of Mangcoding.

Source : Various Image Sizes in WordPress