Responsive Media

by CSS HTML5 Mobile Research

Hey there…

This post is 978 days old. It was written on 19.11.2011. Please make sure to be careful with the information provided and check a more recent source on this topic.

There is a big discussion going on at the moment covering the actual point of how to deal with images and media et al. on mobile-phones and other devices as there are some things that don’t work as on a desktop computer:

The question is how to deliver responsive images on a mobile website.

You maybe use something like img { max-width: 100%; height: auto; } in your responsive design to prevent images from being bigger then the screen of a mobile device.

In most of the cases this shrinks images in its displayed size, which is a processor intensive thing to do – especially when you are on a mobile device and don’t have endless processor capacity this hurts.
The shrinking itself does not change the file-size that has to be loaded; it remains the same as on a desktop for example. As bandwidth is the bottleneck these days if you are on a mobile device, this is the issue where people want to see some improvement.

What can we do about it?

There are a couple of proposals and known techniques on how to solve the problem:

1. Resize images with PHP

This is something you could only do if you know the screen-size before you load the images them self. So you have to inject HTML through JavaScript for example and change the sources for images accordingly.

The Adaptive Images framework a similar technique. Check out the source on GitHub.

2. Request different images using data-attributes

An article by Nicolas Gallagher covers this method using CSS to detect which source would be best to use.

The method could work like this: You have an image which has a really small file size and is served for every device at first (mobile first approche).

<img src="image.jpg" alt="" data-src-600px="image-600px.jpg" />

Now you are going to change the file if the screen is bigger by using the content-property of CSS and its attr() function.

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

Please have a look at the article for detailed information.

An idea that goes beyond the replacement of images with the attr()-function is the usage of content: url(myimage.jpg) replaced;. This is something suggested by Tab Atkins Jr. on the W3C www-styles mailing list – called replaced content.
Something about replaced content appears in the CSS-spec but it does not look to be exactly what Tab is referring to.

3. Introduce new attributes to the <img>-tag

Anselm Hannemann shares the idea of introducing a media-attribute that has some sort of “sizing-parameter”. It is supposed to be combined with the media-src-attribute which also has the sizing-parameter.
The HTML could look something like this:

<img src="myimage_xs.jpg"
media-xs="(min-device-width:320px and max-device-width:640px)" media-src-xs="myimage_xs.jpg"
media-m="(min-device-width:640px and max-device-width:1024px)" media-src-m="myimage_m.jpg"
media-xl="(min-device-width:1024px)" media-src-xl="myimage_xsl.jpg">

As you can see the media-attributes contain media-queries which describe when to take a certain image-source.

4. Using JavaScript

There are some ideas on how to deal with this topic using JavaScript.

The FilamentGroup for example published its “Responsive Images”-project on GitHub. They are using “Mobile-First” to present a small-sized image on every device and replace this with JavaScript on window load.
You can find out more about how it works on their blog. They also published a demo.

Peter-Paul Koch presented a possible way on how to combine media queries with JavaScript. Which is not really new I think but a good summery.

Another approach could be a new attribute for the script-tag: Scott Jehl suggested to call it preparse. The script could then be used to replace sources in HTML fitting the current client-need.

5. A new image-format containing different sizes

People aso had the idea of creating an own image-format which contains for example four layers with different image sizes. The image then “decides” which format to take and serves this to the client without its three sibling-layers.

At the moment there is a format called MrSID developed by LizardTech which can have one or more compression rates.

Another approach is the JPEG 2000 file-format. It can carry out different optimization-levels for images. Read more about it on the Wikipedia-page I linked above.

Media? But this was only about images…

Yup, right! Images are just one aspect when it comes to responsive media.
Videos for example are another thing. YouTube offers different video-sizes for watching. You have to choose manually which one to use. A possibility to select this resource automatically, build into the browser would be awesome!

JPEG 2000 has a video-equivalent developed by the same group of people as the JPEG-format called Motion JPEG 2000. Find more information about this here.

Conclusion

As it turns out many developers are not aware of the problems that come up with a real responsive design – even HTML5-specification writer are calling it “a niche problem”. This is why it is hard to develop a specification for a native API as for example Anselm Hannemann suggests.

But maybe the decision which technique might be best for solving the problem of serving responsive media has to be finished first before anything is spec’d up.

Moar!

Some more resources where the topic is discussed:

Thanks!

Thanks goes out to Anselm, for reading what I wrote and helping me with some further information.


Jucallme

There is another option that would mean a small module and some CSS trickery… We can set an image to the background in CSS… So all we would need to do is define presets for resisting at the different @ media targets and then just build up a “dynamic” CSS file with all the image mappings… That way the image can be uploaded via standard Drupal media handling and the current styling works…

So quick recap.. What the module needs todo. - hook into image upload. - replaced the inserted image with a div and uuid (text input formats) - define the image styles to be added to CSS some setting form - then add the different target size images preset paths to a CSS file with media via the background attribute

And vola!


Gerry

I have found that some of these methods do not work with any attempts to use the html5 cache manifest. (Adaptive Images, for example, works fine but a website will no longer cache offline)

I also tried to implement the second method you mention, and it wasn’t until finding it didn’t work and reading the Gallagher article that I found it was only a theory.


Remi Grumeau

It really seems to me only the mobile-first way using Javascript is the most reliable way to go nowdays. Perhaps some HTML5 only API could help with it in a couple years (when old browsers will be gone) but for now, this really goes the right way, a progressive enhancement way.

Also, you can specify in offline manifest what should be store oflline, what should be taken online or, if no signal, a fallback for each element. And feel free to use navigator.online before to go from mobile-first to a higher resolution. Sorry, but offline mode doesn’t sound like a big issue… at least clearly not unsolvable.

The only problem i have with it is Google. A bot doesn’t have any screen.width Javascript value (even if it deals with JS). So what? Would only small 176px width image would be indexed? Should i need a server-side detection to push high-reslution images to bots … but would i get penalized by page load time? Would i get black-listed ? Or is the best solution is to keep mobile-first for SEO & put a link on images to original HD size? What W3C has to say about that? (not that anyone cares what W3C says btw)


Anselm H.

Hey Hans and Remi,

about image SEO: That shouldn’t be a real problem for the solution I proposed. You just use the normal src attribute and link you standard-image there. Additionally you add the other responsive-attributes linking xs, s, l, xl formats. And that said, mobile browsers are the ones that could be modified easy. So the only thing to use my solution would be, bringing this into standard, use it and some updates on iOS and Androids browsers. Not that difficult… But there seems low interest in that topic in general. I am currently writing a blog article to sum this up once again with a little more specific target on W3 / WHATWG lists.


Sebastian

Ha funny :D Googled for responsive images. Found Hans! Nice.

If have a question on that topic. What would you do if you have different image sizes for different screens and don’t want to load the image at all if the device has <480px (smart phone)


Sebastian

What do you think about using background-image? Depending on the viewport you (media-)query different versions of the image. This would solve the problem with the mobile version. Which is not loading the image at all. Plus: No need for JS.

The down side is obviously that you can not have a perfeclty scaled image. E.g.: height: auto; max-width: 100%; So this would only work if you have a fixed grid, in which you can place the image.


Leave a Comment

Remember what your mother told you: Be friendly. Your email address will not be published.
Markdown-Goodies available.