Understanding WordPress Responsive Images

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:

• Responsive Images Feature Plugin Update

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.

• Responsive Images in WordPress 4.4 – Make WordPress Core

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:

• Solving the Responsive Images Problem with WordPress Responsive Images

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).

• Responsive Images Now Landed In WordPress Core – Smashing Magazine 

Then, stumbled upon this article. Which gives a better understanding of srcset.

• How to Build Responsive Images with srcset

But still not really understand about sizes. Go to next article:

• Responsive Images in Practice · An A List Apart 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 <picture>.

Can’t get thorough explanation about srcset and sizes (which the ones used in WordPress), so need another ones.

• Using Responsive Images (Now) · An A List Apart Article

Another reference from A List Apart. This one explains srcset and sizes better. Especially about the 'w' descriptor (and other descriptor such as 'x') used in srcset.

Another thing holding up is about 'vw' which turns out to be a new viewport units. This article added some knowledge:

• Viewport units: vw, vh, vmin, vmax – Web Design Weekly

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:

• The anatomy of responsive images – JakeArchibald.com

Was hoping can get a new knowledge by reading this. Unfortunately, not:

• Working with Responsive Images in WordPress Core | @thetorquemag

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:

• Optimizing your theme for WordPress 4.4’s responsive images | VIA Studio

***

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 srcset attribute 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.

Let’s wrap!