Optimizing Your Themes For Responsive Images In WordPress Joe McGill @joemcgill 

An overview of responsive 
 image use cases • Display size (resolution/viewport) • Device density (retina devices) • Art direction More at: usecases.responsiveimages.org 

Display Size resolution differences viewport layout changes 

2x 1x Display Density 

Art Direction 

the image element 

Responsive Image HTML • srcset (x descriptors) • srcset (w descriptors) + sizes • The element 

srcset + x descriptors 

srcset + w descriptors NOTE: The browser doesn’t know the display size of the 
 image, so it assumes 100% of the viewport width. 

srcset + sizes 



WordPress ❤ ’s srcset + sizes • WordPress automatically creates extra sizes when you upload an image (e.g., thumbnail, medium, large, etc.) • Add your own custom sizes with add_image_size() • WP includes same ratio image sizes in srcset 

add_image_size() // Soft resize add_image_size( 'custom-size', 220, 180 ); // Hard crop add_image_size( 'custom-size', 220, 180, true ); 

The Sizes Dilemma • The sizes attribute tells the browser about the layout of the image. • The image layout is dependent on your theme’s CSS rules. 

A smart default sizes="(max-width: 600px) 100vw, 600px" 

Customizing the sizes attribute add_filter( 'wp_calculate_image_sizes', 'my_sizes_filter' ); function my_sizes_filter() { return '(max-width: 37em) 85vw, (max-width: 45em) 67vw, 840px'; } WP.org code reference 

Customizing the sizes attribute add_filter( 'wp_calculate_image_sizes', 'my_sizes_filter', 10, 2 ); function my_sizes_filter( $sizes, $size ) { if ( 'medium' === $size ) { $sizes = '(max-width: 37em) 85vw, (max-width: 45em) 67vw, 840px'; } return $sizes; } 

Calculating the sizes attribute • Start your browser at a small width and write down image widths at each breakpoint. • Tip: use calc() to combine relative and fixed size calculations. 

THANK YOU Joe McGill @joemcgill • joemcgill.net