This week made a homework to self, getting to know (and how to utilize) about Responsive Image in WordPress. This is a new feature merged to WordPress since 4.4.
So here we go.
Since WordPress 4.4 itself released on December 8th, 2015, so actually have read several posts about Responsive Images. Decide to re-read those posts again and one of them is:
The other is the official release article from Make WordPress Core about Responsive Image. Have to read this post several times to finally understand the point of it.
Digging and cleaning up Pocket collection, found several posts which propose another idea of how to implement Responsive Images. One of them is proposed by Morten Rand-Hendriksen here (dated June 2015):
- WordPress Image Handling in a Responsive Images World – mor10.com
- WordPress, Responsive Images, and Dynamic Image Sizes – mor10.com
Another different approach by Web Dev Studios:
Those are nice ideas for responsive images. But since Responsive Images already at WordPress core, hence these are more for house cleaning. Will not look (or use them at the moment) as the focus is for getting better understanding of the official one.
Moving on, get this post by Smashing Magazine. Usually, articles from SM give a good explanation about new things. But unfortunately, this is just another introductory about the new feature. Good, but need to dig deeper (for how to really implement it in a theme).
Then, stumbled upon this article. Which gives a better understanding of
But still not really understand about
sizes. Go to next article:
This is the article that referenced by most when it comes about Responsive Images. It’s probably a complete reference. But WordPress not use all of the features. Especially
Can’t get thorough explanation about
sizes (which the ones used in WordPress), so need another ones.
Another reference from A List Apart. This one explains
sizes better. Especially about the
'w' descriptor (and other descriptor such as
'x') used in
Another thing holding up is about
'vw' which turns out to be a new viewport units. This article added some knowledge:
This wraps up things. By the time reading this (and re-read some previous articles), finally can understand a little bit about this Responsive Images thing:
Was hoping can get a new knowledge by reading this. Unfortunately, not:
Finally, can get another sample (beside Twenty Sixteen) how it need to be done in a theme development. This is going to be a good reference:
Note: when can’t find the reason why some images don’t show on
srcset, found the answers in here:
It’s important to note that custom crops will be left out of the
srcsetattribute if the aspect ratio differs from the original requested image.
And also in here:
WordPress will only include images that match the same aspect ratio as the image in the ‘src’ attribute.
Can’t claim that fully understand this Responsive Images for now. But at least got some picture. And that last article will definitely help in the next theme development.