We know that add_image_size() is used to create different attachment image sizes . We are doing this to display different sizes of image on web page.

Have you ever thought what add_image_size() will do? How different sizes of image are created when the attachment is created?

Same question arise in my mind when I used add_image_size() and faced problems and this encouraged me to know more about it.

Let’s see how it works?

Q1: what add_image_size() do?

add_action( 'after_setup_theme', 'demo_theme_setup' );
function demo_theme_setup() {
    add_image_size( 'post-thumb', 300, 300, true );
}

Once add_image_size() is called, all information like image sizer name, width, height, crop(bool) are stored in global variable $_wp_additional_image_sizes.

Click here to find more about add_image_size().

Q2: How different sizes of image are created when attachments are created?

When you upload image in WordPress it creates post with post type attachment. After attachment is created its called wp_generate_attachment_metadata() function to generate meta data of image.

You can filter sizes array using `intermediate_image_sizes_advanced` filter which is in wp_generate_attachment_metadata function.

/**
 * Filter the image sizes automatically generated when uploading an image.
 *
 * @since 2.9.0
 *
 * @param array $sizes An associative array of image sizes.
 */
$sizes = apply_filters( 'intermediate_image_sizes_advanced', $sizes );

After filter is applied on sizes, WordPress calls wp_get_image_editor() function to get object of image editor.

$editor = wp_get_image_editor( $file );

$editor is an object of either WP_Image_Editor_Imagick or WP_Image_Editor_GD class. The Class is chosen  based on image mime type and the image library installed. Both classes extend WP_Image_Editor class.

After that, multi_resize() function is called. This is abstract method defined in WP_Image_Editor class. WP_Image_Editor_Imagick and WP_Image_Editor_GD implemented this method.

multi_resize() function creates images with different sizes and return sizes information.

$metadata['sizes'] = $editor->multi_resize( $sizes );

Note: All meta information of attachments are stored using single meta key `_wp_attachment_metadata` in {prefix}_postmeta table.

You can also filter attachment meta using `wp_generate_attachment_metadata` filter.

/**
 * Filter the generated attachment meta data.
 *
 * @since 2.1.0
 *
 * @param array $metadata      An array of attachment meta data.
 * @param int   $attachment_id Current attachment ID.
 */
return apply_filters( 'wp_generate_attachment_metadata', $metadata, $attachment_id );

You can find more information by looking in WordPress core files. Here are the functions list along with file name.

media_handle_upload() - wp-admin/includes/media.php
wp_generate_attachment_metadata() - wp-admin/includes/image.php
multi_resize() - 'wp-includes/class-wp-image-editor-gd.php', 'wp-includes/class-wp-image-editor-imagick.php'

I hope you liked it found it useful.  🙂