Author: Dusan Markovic

Auto-generated thumbnails

When you upload an image to your WordPress website, the platform creates 4 additional image sizes alongside your original image.

Those automatically generated sizes are:

• Thumbnail (‘thumbnail’): image with a maximum width of 150px and a maximum height of 150px
• Medium (‘medium’): image with a maximum width of 300px or a maximum height of 300px
• Medium-large (‘medium_large’): since wordpress 4.4,  image with a width of 768px and no max height
• Large (‘large’): image with a maximum width of 1024px or a maximum height of 1024px

These sizes can be changed inside the media settings page (/wp-admin/options-media.php), and you can also add custom sizes:

// Must be included if your theme does not have it already.
add_theme_support( ‘post-thumbnails’ );

// Define new customs image sizes.
add_action( ‘after_setup_theme’, ‘proultima_add_image_sizes’ );
function proultima_add_image_sizes() {
  add_image_size( ‘portfolio’, 300, 9999 ); // 300px wide unlimited height
  add_image_size( ‘xl’, 1200, 9999 ); // 1200px wide unlimited height
}

// Add human-readable names to the newly added image sizes.
add_filter( ‘image_size_names_choose’, ‘proultima_add_image_size_names’ );
function proultima_add_image_size_names( $sizes ) {
  return array_merge( $sizes, array(
    ‘portfolio’ => __( ‘Portfolio’ ),
    ‘xl’ => __( ‘Extra Large’ ),
  ) );
}

Automatic image-size filters

WordPress detects big images (big in their dimensions) which you uploaded and scales them down if their dimensions are larger than the threshold (e.g. 2560px threshold).

The default width threshold can be overridden with max_srcset_image_width() function.

The default dimensions threshold is filterable with big_image_size_threshold filter, and you can even disable it with:

// completely disable image size threshold
add_filter( ‘big_image_size_threshold’, ‘__return_false’ );

Overriding image sizes

Based on the breakpoints of your theme you can choose to customize the sizes attribute of the adaptive image tag. You can do that for the content images and for thumbnail sizes too:

function proultima_content_image_sizes_attr($sizes, $size) {
    $width = $size[0];
    //Page without sidebar
    if (get_page_template_slug() === ‘template-full_width.php’) {
        if ($width > 910) {
            return ‘(max-width: 768px) 92vw, (max-width: 992px) 690px, (max-width: 1200px) 910px, 1110px’;
        }
        if ($width < 910 && $width > 690) {
            return ‘(max-width: 768px) 92vw, (max-width: 992px) 690px, 910px’;
        }
        return ‘(max-width: ‘ . $width . ‘px) 92vw, ‘ . $width . ‘px’;
    }
    //Page with sidebar
    if ($width > 597) {
        return ‘(max-width: 768px) 92vw, (max-width: 992px) 450px, (max-width: 1200px) 597px, 730px’;
    }
    if ($width < 597 && $width > 450) {
        return ‘(max-width: 768px) 92vw, (max-width: 992px) 450px, 597px’;
    }
    return ‘(max-width: ‘ . $width . ‘px) 92vw, ‘ . $width . ‘px’;
}
add_filter(‘wp_calculate_image_sizes’, ‘proultima_content_image_sizes_attr’, 10 , 2);

function proultima_post_thumbnail_sizes_attr($attr, $attachment, $size) {
    //Calculate Image Sizes by type and breakpoint
    //Header Images
    if ($size === ‘header-thumb’) {
        $attr[‘sizes’] = ‘(max-width: 768px) 92vw, (max-width: 992px) 450px, (max-width: 1200px) 597px, 730px’;
    //Blog Thumbnails
    } else if ($size === ‘blog-thumb’) {
        $attr[‘sizes’] = ‘(max-width: 992px) 200px, (max-width: 1200px) 127px, 160px’;
    }
    return $attr;
}
add_filter(‘wp_get_attachment_image_attributes’, ‘proultima_post_thumbnail_sizes_attr’, 10 , 3);