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:

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

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

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

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

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:

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 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!

Published by Eric Gunawan

Happiness Engineer. WordPress Ambassador. Remote Worker. Soccer News Follower. Movie Lover. Proud Father. Lucky Husband.

3 thoughts on “Understanding WordPress Responsive Images

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: