So, I did some test for WordPress 4.4 beta3 new feature: Responsive Images. And it will make your content retina ready automatically! Awesome.
Not only that, it will also serve smaller image to low res device and it will make your site load faster to the less capable mobile device.
How WordPress 4.4 Responsive Image works?
It’s very simple actually. It uses HTML 5 srcset
attribute in the img
tag, and WordPress will add this tag dynamically by filtering the post content using some advance magic.
This srcset
attribute will list all image sizes available in the server for that image, and this allow browser to decide which image to display.
In WordPress when we upload an image it will create several image sizes (thumbnail, medium, large) for that image for easier use when we embed it in content. We can set the image sizes in “Settings > Media” in admin panel. And then when we insert image in the content we can choose which image size we want to use.
In the screenshot above I uploaded 1280×853 image. And WordPress will generate several image sizes based on my “Settings > Media” configuration:
- Thumbnail Image Size: 150×150 px
- Medium Image Size: 300×200 px
- Medium Large Image SIze: 768×512 px
- Large Image Size: 1024×682 px
- Full Size: original image size (1280×853).
Note: the image drop down option shows Large Image Size as 840×559 px, but it is not the actual large image size in server, but it’s embed size based on maximum content width set by the active theme I use.
Medium Large Image Size is a new default image size in WordPress 4.4 to accommodate tablet device, and it uses 768px width. This image size is not available (not configurable) in “Settings > Media” admin page and also not available in the drop down size in media modal window.
I add the large image size in content, and after I add the image in content, and check the HTML source, this is what I got:
<img width="840" height="559" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px" srcset="http://beta.play/content/uploads/2015/11/macbookair-coffee-300x200.jpg 300w, http://beta.play/content/uploads/2015/11/macbookair-coffee-768x512.jpg 768w, http://beta.play/content/uploads/2015/11/macbookair-coffee-1024x682.jpg 1024w, http://beta.play/content/uploads/2015/11/macbookair-coffee.jpg 1280w" alt="macbookair-coffee" src="http://beta.play/content/uploads/2015/11/macbookair-coffee-1024x682.jpg" class="size-large wp-image-1715 aligncenter">
While previously in WordPress 4.3 we only have a plain simple src
tag:
<img class="size-large wp-image-1715 aligncenter" src="http://beta.play/content/uploads/2015/11/macbookair-coffee-1024x682.jpg" alt="macbookair-coffee" width="840" height="559" />
As we can see, it’s a lot more complex HTML tag. Thank godzilla it’s done automagically.
Note: The srcset
attribute will only added in front end of your content (dynamically), and if you check the “Text” tab via content editor, it will display only the simple src
tag.
Why Thumbnail size not included.
If you check the HTML source of the post, all image sizes is added in srcset
attribute except the thumbnail image size (150×150 px). This is because WordPress will only add the images in the srcset
attribute if the ratio is the same as embedded image, in this case 3:2 ratio.
How to check this responsive image feature?
You can resize the browser to 300px (for example) and right-click the image, and select “view image” and you’ll get the 300x200px image size.
It’s a browser feature
That means it depends if your browser support it, and not all browser support it yet. but most major browser already support this feature, here’s the list of supported browsers:
Another way to test this
So, I play around a bit to test this. I add a medium size image (300×200 px) in the content, and then resize it to 600-ish width.
And after that, of course we will get a pixelated image in WordPress visual editor, because it’s a 300px width image stretched to fill 600px width space.
But if we check on the site front-end, we will get non pixelated image, because the browser choose to display 768×512 px image on desktop.
This is the HTML source generated in the front-end:
<img width="602" height="401" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px" srcset="http://beta.play/content/uploads/2015/11/macbookair-coffee-300x200.jpg 300w, http://beta.play/content/uploads/2015/11/macbookair-coffee-768x512.jpg 768w, http://beta.play/content/uploads/2015/11/macbookair-coffee-1024x682.jpg 1024w, http://beta.play/content/uploads/2015/11/macbookair-coffee.jpg 1280w" alt="macbookair-coffee" src="http://beta.play/content/uploads/2015/11/macbookair-coffee-300x200.jpg" class="alignnone wp-image-1715">
Resource to learn more about this WordPress 4.4 Responsive Image feature:
- WordPress Make Thread.
- WordPress Make Feature Merge Proposal.
- CSS Tricks about srcset.
- srcset browser support.
Do I like this feature?
I think it’s a good feature to have. But it didn’t really effect me much (maybe). I feel it’s not very useful for post content. Post content usually have narrower width like 500-650px width (for best readability, depends on font size, line height, design, etc), image size with that width is not that large. And serving smaller image (e.g. 500px original image width vs 300px generated image ) may not add much impact on performance. (for non-image heavy/non photography blog, which is still the majority of blogs/sites). And retina/higher density gadget is more common nowadays (even for low-mid end devices), this devices will display the higher resolution anyway.
And it is a very complex implementation, maybe possible performance and compatibility issue (CDN, gallery plugin, etc). I think for filtering content by default/automatically can wait a little, maybe in WP 4.5. and this content-filter feature can easily be added in a “feature plugin” until all scenarios are tested while user who need this feature can easily install and use the plugin.
However there are tons of functions we can use for other area in theme development such as featured image, header image, etc. And I’m excited about that.
Nice article, thank you but… how the soup I disable this? It’s making my large (neat images) appear “pixelated” on mobile devices… since it’s forcing the browser to load the trash resized images…
Any thought on how to disable this and let my theme do the “serving” WOULD BE MUCH appreciated!
Thank you
Hi Mark D.
Sorry for the late reply.
You can remove responsive image in your site “content” with this one line of code: