My Struggles with WordPress srcset and the Thumbnail Image Size
Handling images for responsive design got a massive push with the release of WordPress 4.4 and the inclusion of the srcset attribute for images.
For a general overview, the srcset attribute tells the browser about the different versions of the image available and lets it decide which one to download based on the current screen size.
This means, you can now have a full 1600px wide image output on desktop displays while mobile browsers will only download a 320px wide version of that image, saving a lot of valuable resources on mobile devices.
Wait, doesn’t the title say something about struggle with srcset?
Don’t get me wrong, this feature is awesome and I’m excited about being part of WordPress core! The trouble comes with the way the attributes are automatically created. There is an assumption that images used on mobile will always be smaller than those used on desktops. But, srcset should be used to supply the best image for the situation, not just the smallest.
srcset should be used to supply the best image for the situation, not just the smallest.
This issue is best seen when implementing a design that has featured images output at the Thumbnail (150 x 150) image size.
You see, when using srcset in WordPress, a sizes attribute is also created to tell the browser how the image will display at different screen sizes. To better understand the sizes attribute, take a look at this example from CSS-Tricks:
sizes="(min-width: 800px) 50vw, 100vw"
This says that if the width of the screen is over 800px wide, the image is intended to fill half of the screen. If it is under 800px wide, the image is intended to fill the entire screen.
When WordPress creates this attribute on a featured image, the logic used is “If the screen is larger than the width of the given featured image width, the image should fill the width (in pixels) of the image size. If the screen is smaller, the image should fill 100% of the screen”
So, for the Thumbnail image size, the created sizes attribute would look like:
sizes="(max-width: 150px) 100vw, 150px"
Alright, Alright! Getting to that “struggle with WordPress srcset”
My struggle is that 99% of the time, if I’m working on a design that uses the Thumbnail image size on desktop, I want the image to display larger on mobile devices.
99% of the time, if I’m working on a design that uses the Thumbnail image size on desktop, I want the image to display larger on mobile devices.
Take, for example, the layout of a recent blog project we completed at LimeCuda. The layout utilized a small featured image floated to the left of the title.
When going to mobile, the title and image block would each go full-width and display on their own rows. With the way WordPress handles this by default, we would end up with a much smaller image than needed to fill the full width of the screen on mobile.
The Solution that uses srcset WordPress
The great part about this though, is that we can sort of “game” how this works. My solution here was to call the “Medium” image size within my template rather than the “Thumbnail”. That way, we have more images that will automatically be added to the srcset by WordPress.
<?php echo the_post_thumbnail( 'medium' ); ?>
Next, we can filter the sizes attribute for images within our archive there and have the image display at a max-width of 150px when the screen size is above a certain width.
This way, we can have our desired Thumbnail size image layout on desktop and a larger image pulled and displayed on mobile.
