Responsive Images feature in WordPress
Do you have WordPress 4.4+ installed? All new images inserted in posts after the WP upgrade have scrset attribute then.
How scrset and sizes attributes work?
srcset
ands sizes
attributes contain the information to help browser decide which image size/file is the best.
<img src="image.jpg" srcset="image-300x188.jpg 300w, image-700x600.jpg 700w, image-1024x640.jpg 1024w, image-1200x750.jpg 1200w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px">
What does it mean?
- scrset: If image width on the page is 300px or less, then browser will load and show image-300×188.jpg, if more than 300px and but less than 700px — image-700×600.jpg etc.
- sizes: max image width for the given media query, actually it loos like if-else-statement — if viewport width is 709px or less, the maximum image width is 85% of the viewport, if none of the statements is true, then max image width is 840px.
It was described great in CSS-Tricks screencast here.
As for me, I would like to talk about WordPress.
Responsive images — WordPress 4.4 new feature
WordPress is using the_content
to add the responsive attributes to your uploaded images:
- If your image has wp-image-{ATTACHMENT_ID} class.
- If your image do not have already
scrset
attribute.
How to ask WordPress not to add responsive attributes to all content images
There are two ways — you can remove wp-image-{ATTACHMENT_ID} class from specific attachments or disable responsive images globally by adding this to your theme functions.php
.
remove_filter( 'the_content', 'wp_make_content_images_responsive' );
How to add scrset and sizes attributes to WordPress attachments in the code.
<img src="<?php echo wp_get_attachment_image_url( $attachment_id, 'medium' ) ?>"
srcset="<?php echo wp_get_attachment_image_srcset( $attachment_id, 'medium' ) ?>"
sizes="<?php echo wp_get_attachment_image_sizes( $attachment_id, 'medium' ) ?>" />
Let’s look at each function separately.
wp_get_attachment_image_url()
returns the URL of the image with the given image size (in the example — medium).wp_get_attachment_image_srcset()
the function loops throught all image sizes and adds each size in scrset in the following format:image-{WIDTH}x{HEIGHT}.jpg {WIDTH}w
. Please note, that the function ignores:- if resized image ratio differs from the original more than 0.002
- if resized image was edited
- if resized image width is more than maximum scrset image width (by default 1600 but can be hooked)
wp_get_attachment_image_sizes()
if themes or plugins don’t hook this function, it returns the following(max-width: {WIDTH}px) 100vw, {WIDTH}px
, where {WIDTH} is the factical width of the file.
How to use images with different ratio for mobile devices
Look at the picture below. Which image do you think looks better on this iPhone 5?

You may notice that image ratio (width/height) differs, so, WordPress wouldn’t add the right image size to scrset
attribute. How to force it to do it:
function misha_sources( $sources, $size_array, $image_src, $image_meta, $attachment_id ){
/*
* Your variables here
*/
$image_size_name = 'square500'; // add_image_size('square500', 500, 500, true);
$breakpoint = 500;
$upload_dir = wp_upload_dir();
$img_url = $upload_dir['baseurl'] . '/' . str_replace( basename( $image_meta['file'] ), $image_meta['sizes'][$image_size_name]['file'], $image_meta['file'] );
$sources[ $breakpoint ] = array(
'url' => $img_url,
'descriptor' => 'w',
'value' => $breakpoint,
);
return $sources;
}
add_filter('wp_calculate_image_srcset','misha_sources',10,5);
For better user experience you can use the Manual Image Crop plugin to crop image the way you want.


Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
Is it possible to adapt the “misha_sources” function to accept multiple custom image sizes? Been trying for a couple of days now, but I can’t seem to get it to work.
Hi
Thank you so much for your helpful blog article. How do I set scrset and sizes attributes in the functionы.php for all images? Im using the default wp-image-block and I cannot set these direct in the HTML. Thank you so much.
Hello,
I would like to have 2 versions of each image, one for large screen and one for mobiles. (I use Enfold theme).
If I already have a 1000×664 px image in my media library, which is too heavy for mobile, Do I need to upload a second size of my original image (for example 500×330 px) ? If yes, where do I upload It ?
Thanks in advance and thanks for sharing !
Christopher
Hi Misha, great article (again)!
I have a question about background images, i’m using a ‘partial block’ with a background image on multiple pages, now this block will change in width if you got a bigger or smaller screen. My question is; Is it possible to use functions like ‘wp_get_attachment_image_sizes’ for background images, and show the right one on the right width?
Thanks!