What tool should you use to provide responsive images?

Transfer
Tutorial

Recently there was a whole bunch of ways to create responsive images ( responsive images ) - in other words, there were technical means for substituting the correct illustrations, depending on the number of conditions (eg, screen size and Internet access speed of the reader). All these tools do their job in slightly different ways; to compare them, Christopher Schmitt and I compiled a spreadsheet of their capabilities and requirements.

The table shows the information, however, for their assimilation, let's think it through practical issues.

When choosing the method that is suitable for you and for your project, these questions can serve as a hint. Many of these questions may be relevant to your project, so you will have to evaluate which techniques are better in which circumstances, and then generalize this understanding.

How many previous content do I have?

Actually, this question means "do I have such old content that I can’t update?" For example, on the CSS-Tricks website I have more than a thousand pages, and I work on them alone:

[previous content statistics]

Yeah ... I’m not going to return and correct every <img> element on this site, so I need a method that allows me to leave them alone.

The only tool I know that doesn’t require any changes to the markup at all is Adaptive Images . It works by redirecting requests for images through a PHP script that intelligently selects (and if necessary creates) illustrations of a size that fits the width of the screen for the reader.

You should also ask yourself how much the old content bothers you. Perhaps the vast majority of visitors to your site are only interested in new content, the layout of which you can make the necessary changes to use any technical means. If so, read on to find out about them.

If you have a small site, or a new site, or if you can easily return to the previous content and update it, then you can also choose a tool that requires special markup; then again read on.

Is special markup suitable for me?

This is a sub-question of the previous question. Many means of providing responsive images will require you to use special HTML code. For example, for HiSRC, you need to put the addresses of high-resolution pictures in the data attributes:

<imgsrc="200x100.png"data-1x="400x200.png"data-2x="800x400.png">

This technique creates a clear, valid, semantically correct code, but it also leads to the need to add these attributes to each <img> element on the site, which may not be possible for sites with heaps of old content.

If you come to the conclusion that special markup (or specialized CSS style) is not suitable for you, then only Adaptive Images remain . After all, even for Sencha.IO, you will need to put a prefix in the src attribute , and this will require processing the old content.

Do I need semantic code?

Some techniques for creating responsive images involve markup that is, in the strict sense, not semantic. After all, there is only one way for an image to be semantic: its src attribute must point to a real image, and the alt attribute must contain text describing that image. What Brad Frost summed up well: In other words, if the technique may require that the src attribute of the image be absent, or refer to a transparent GIF, or something like that , then the code will not be semantic. Well, why do some means of creating responsive images resort to this? Yes, because if the illustration has an attribute

src points to a picture of a horse, then this picture will start downloading immediately after the browser reads the illustration code. There is no practical way to prevent this. Even if you superfastly replace this src with a more suitable version of the image, the browser will download two pictures instead of one - it will not win, but lose in speed. You can, however, find this acceptable (for example, desktops usually have a higher Internet connection speed than mobile phones). Usually, if such a technique is used, then in src indicate the smallest of the pictures of different sizes.

If semantics matter to you, take a look at the aforementioned Adaptive Imagesor on HiSRC - a plug - in for jQuery, created by Christopher Schmitt and allowing for use with the src semantic attribute .

Some other tools use the <noscript> element , which puts the <img> secure code in case JavaScript is disabled or inaccessible. I leave it to you to decide whether this code is semantic or not.

Do I need code validity?

Validity here refers to the ability of a code to pass the W3C Markup Validation Service test . This verification tool helps you find the problem code, helps you create markup better. But the code does not get worse simply because it does not pass the test: if the invalid code works fine in all browsers, then its validity should not concern you or anyone else.

However, if you need validity (for example, if the customer certainly requires it from you, threatening to refuse to pay for the work), then you cannot use some means of providing responsive images. For example, picturefill uses the <picture> element ,which may turn out to be standardized over time, but now it’s not, so the code is invalid. In addition, the standard requires the <img> element to have the src attribute - so rejecting this attribute with the intention of avoiding the aforementioned problem of double requesting pictures also leads to invalid code.

If code validity is a must for you, then I recommend Adaptive Images , or HiSRC , or Responsive Enhance . All of these tools use the simple and valid <img> syntax , which contains the src attribute.

Do I need subtle control over images?

Some means of providing responsive images give the reader proportionally smaller versions of the same large image. Although this makes life easier (less churning), the result may not be acceptable. Here is a good example of a better approach: The

[three illustrations]

left of these three images is for mobile phones and is initially indicated in src . Medium, slightly larger, can be used by tablets. On the right is the largest of the illustrations. ( Here is their source .)

These images are the result of the handmade work of the designer, who used cropping to preserve the meaning and impression of the photo. If instead we take the right picture and simply subject it to proportional reduction, then the people depicted in the photo will turn out to be very small, the impression of the illustration may be lost.

If the idea of fine control over images is important for your project, then you will need a tool that allows you to accurately indicate which src is used in which circumstances. Picturefill is ideal , allowing you to specify the addresses of the pictures and the circumstances of their use with sufficient accuracy:

<picturealt="description"><sourcesrc="small.jpg"><sourcesrc="medium.jpg"media="(min-width: 400px)"><sourcesrc="large.jpg"media="(min-width: 800px)"></picture>

Next up is JavaScript.

Do I need JavaScript?

Most of the tools for creating responsive images with javascript perform their tricks. Some of them are very few (just to put a cookie), but still with javascript. For a few tools, you have to put <img> inside the <noscript> element in case the JavaScript is disabled for the reader. If you don’t like this approach, but if you need to be sure that the pictures work without javascript, then it’s best for you to rely on Sencha.IO .This service is based on identifying devices using the “User-Agent” header and transmits a correspondingly reduced image. So you will refer to the largest (within reasonable limits) version of the image that you have, and Sencha will reduce it and give the reader a smaller version if necessary (for obvious reasons, it does not deal with enlargement).

How about dependency on javascript libraries?

And HiSRC , and rwdImages work on jQuery. If your project uses a different library, then these tools may not work for you. (But you can port them and then open the source code!) And if you do not use any library, well, then it’s time, probably - but now we won’t talk about that.

Do I need server scripts?

Some of the tools discussed by us depend not only on javascripts. Adaptive Images relies primarily on .htaccess and on PHP. Well .htaccess assumes an Apache server. And although, of course, we all know and love PHP (khe-ghm), many websites use technologies like Ruby or Python.

Responsive Images (initial release from the Filament Group) also uses .htaccess. So if you have something like Nginx as the server, you will either have to abandon this technical tool, or port the .htaccess code to a similar Nginx configuration syntax.

Do I need to check the speed of the Internet with the reader?

Finding out the width of the browser window and using it to decide which image to deliver to the reader is fine, and that is what underlies the very idea of responsive images. However, in fact, this should be only half the reason for such a decision. The other half is the speed of Internet connection. If the reader has a fairly fast Internet connection, then transferring large illustrations to him is normal. If the reader has a very slow Internet connection, then he should receive smaller images (regardless of screen width). What a pity that media queries about Internet speed are not implemented in the browsers themselves.

Two current image responsiveness tools test the speed of the Internet when making decisions: Foresight.js andHiSRC (they use the same technique from Foresight.js). This works by downloading a test file with measuring the download time (the threshold value is configured in the configuration). The test itself slows down the page loading somewhat, but, theoretically, saving on the size of images downloaded depending on speed is worth it.

Can I rely on the services of others?

Sencha.IO is a fully external responsive image service. As far as I know, she works perfectly, she did not have any major interruptions in work, but, of course, there is always a risk.

Of course, you can think like this: “Cool, Sencha.IO's techniques are excellent, but the need to rely on their server is troubling - I would like to run something similar on my server.” If you really want it, then there is a public WURFL database , and there is a Server Side Responsive Images tool for working locally with it.

Services like Device Atlas Cloud are also available.Recognizing devices. They also create dependence on themselves. There is no doubt: their goal is to stay online and work quickly, but think carefully about how and on whom you want to depend on your business.

Is there a special CMS with accessibility features?

Suppose your project is based on WordPress. But WordPress has a built-in image downloader. When you upload an illustration to the site, it can create several smaller versions of the image. It's cool, it's powerful, and you can (need) take advantage of it. Keir Whitaker discusses the use of this feature in his article “ Automatic Responsive Images in WordPress ”.

This technique, of course, is suitable not only for WordPress. I am sure that the same tool exists (or can be screwed) to any CMS.

Can I wait for the future?

The publication of the “new iPad” (that is, the third, note for the future) has led to the emergence of many of these technical tools and their discussions. The high pixel density of the new iPad is excellent for displaying vector images or large photos, but is not particularly suitable for small icons that have to stretch to their size and which therefore look blurry. But shipping high-resolution icons means increasing file sizes and slowing down sites. Therefore, it is necessary to deliver them only in those circumstances when the reader needs them.

Web standards are aware of this issue. A whole group is dedicated to its discussion.. Over time, they can solve this problem - and we can begin to use the funds that we are offered (suppose that these funds turn out to be much better than the current ones).

Perhaps we’ll start switching src for images using the CSS content property , as suggested by Nicolas Gallagher. Perhaps standardize the <picture> element . There might be an srclist attribute in HTML or an src property in CSS . Perhaps there will be a prefix .