New ‘Adaptive Image’ HTML Tag Stirs Controversy

The rising global popularity of smart phones and other small-screen Internet devices has created a number of dilemmas for web developers. Among the most pressing is the issue of serving the proper image files for widely divergent screen sizes.

The industry has responded with a variety of solutions, including separate mobile websites that are much leaner in terms of shown images.

A new attribute, <img srcset>, has the potential to resolve some of the issues by enabling the desired image size, among several options, to be served by a browser. However, this ‘adaptive’ HTML tag has fueled both controversy and an ardent industry debate, as detailed later on.

The attribute syntax consists of an image ‘candidate string’, in which a comma delimits a set of alternate images to be displayed according to a device’s screen size.

The default image is desktop.jpg. If the device screen size is 400px in width, or less, mobile.jpg will be displayed. At 600px, the user-agent can display either mobile.jpg or medium.jpg.

The ‘descriptors’ that provide the necessary information to determine which image should be exhibited are:

400w — maximum viewport width of 400 CSS pixels
2x — maximum pixel density of two device pixels per CSS pixel
Maximum viewport height can be set with the use the ‘#h’ descriptor (ex. 600h)

A few words of explanation about ‘CSS pixels’ vs. ‘device pixels’:

CSS pixels are the ones utilized in CSS declarations, such as width: 200px. The noted size is equivalent to 200 device pixels only when the screen zoom factor is exactly 100%.

When a user utilizes the ‘zoom in’ function, a 200px-width element will occupy a larger portion of the screen and become wider when measured in device pixels, though in CSS pixels it remains the same.

In the above example, suppose that mobile.jpg is 100 x 100px and medium.jpg is 200 x 200px. If the former is selected, the user-agent will calculate the intrinsic size as (100/1) x (100/1) = 100 x 100px. 1x is the default pixel density setting. However, if medium.jpg is chosen, with a 2x density designation the computation will be (200/2) x (200/2) = 100 x 100px. Therefore, the same image size will be on display, but one will be of higher viewing quality.

Practical Uses

The new attribute has any number of practical applications. For instance, say you wanted to maximize the landscape and vertical views of an image in a smart phone. The coding would look something like this:

The Controversies

A longstanding debate on the most effective way to enable the capability for adaptive images has set web developers against browser engineers, as well as causing a schism among developers.

The first dispute centers on the browser mandate to display a given web page as quickly as possible. By presenting a number of image options, the <img srcset> tag conflicts with a browser’s pre-fetch function, which downloads all page elements even before the design parameters are known. By causing even a short pause to determine the correct image, a browser would be precluded from loading as swiftly.

Obviously, any such delays run counter to one of the most important goals of any browser maker, all of whom tout blinding speed as a major selling point to attract more users.

Controversy also erupted within the web development community over the new tag, as one working group espoused a preference for dealing with the image size problem via a proposed <picture> tag. Nonetheless, the Web Hypertext Application Technology Working Group (WHATWG) recently went ahead and added the <img srcset> attribute to their HTML specs.

A separate developer bloc, W3C’s Responsive Images Community Group, has created a hybrid coding solution that incorporates both a <picture> tag and the <img srcset> attribute.

Conclusion

Although the new tag has already been added to the WHATWG HTML spec sheet, there appears to be no set consensus that it represents the most effective way to deal with the issue of adapting image files to various screen sizes. Developer working groups are therefore continuing on a collective quest to find a truly all-encompassing solution.

Adding an attribute to the image element to handle different sources for multiple resolutions and sizes feels like a hack. There is no way to define in your css file what image resource to use for your media query. So you have to change your responsive design in two places – the document and the style sheet?

In my opinion the picture element is a better solution. The html document is used to define your contents structure and the style sheet is used for the layout. You could remove the media query from the source tags, add classes or ids and decide in your stylesheet, when the browser should display which image.

The only wish that I’d have is to add a prefetch attribute to control which images should be cached beside the default img element.

Bjorngrunde

I think the use of image width 100% of the last element works better, usually most developers have very “low weight” images anyway and the need for several mobile, tablet and even laptop images feels lika alot of extra job. Unless the project spefication requires minimal download. Still..i want to try this out for testing to see if it works great with responsive fluid layouts.

Hey WordPress lovers. Every month dozens of incredible free WordPress plugins are released by the community, and we’re here to bring them to you. This seems to be a month of small but useful utilities that only do one or two things, with a few exceptions. So go on. March on down to the list, and get to it! (I'm only a little bit ashamed of that pun.) WP NoteUp ... Notes! Alongside your posts and pages! Use them to remind yourself, or other authors, about things you'd put in a note. That's really all there is to...

WordPress plugins are coming out all of the time, right and left. Every day, they’ve got new ones in the WordPress plugin repository for the curious developer to check out. Over time, your average designer or developer will end up with a list of their favorites. Usually, they’re plugins that solve common problems, are up-to-date and well-maintained, with good support. With that in mind, we’re sharing a list of some of the best plugins out there. Disable Comments ... Disable Comments does......

When I first started out creating websites with WordPress, I was in awe of the depth and variety of plugins available. During those golden days I would willingly install just about anything that looked cool. Shortly thereafter, I was smacked in the head by reality. Stuff started breaking and seriously hurt my good time. It turns out that not every plugin is a great one. And there are times when it seems like the work we do is held together with bubble gum and duct tape. Everything works splendidly until it...

WordPress is undoubtedly one of the most popular tools on the Internet because it makes it so easy to get a functional web site up and running in such a short time. And then there are the plugins. If you want your WordPress site to do something then odds are there is a plugin that you can install to make your site do what you want it to do. But plugins pose a bit of a problem at times. Since they are created by third-party developers you never know what quality control practices are used and what security testing...

WordPress beginners have difficulty customizing their websites past simple text changes, especially if they have no background knowledge of HTML or CSS. WordPress page builder plugins allow just about anyone to build a stylish or professional looking web page, through a user-friendly interface - quickly, and without knowing HTML or CSS. Though it may seem like WordPress page builder plugins have usefulness mainly for the technically unsavvy, they can also make a WordPress developer’s job...

Oftentimes, setting up a WordPress website results in a haphazard scramble to configure enough of the right plugins to make the client happy, and address any specific needs they might have mentioned. But a failure to install certain plugins means the client will come back at you with questions as to why it wasn’t done in the first place. Though you’re probably happy to rectify the problem (and collect a little extra money on the project), going back in to install plugins can distract from more profitable...

In Part 1 of this series we took a look at how you can better secure your WordPress files during, and after, the installation of the software. But once you have the files hardened against different threats, it is time to start looking at some of the different plug-ins available that can help you further protect and secure your WordPress site. WordPress Firewall 2 ... Having worked with a company that deals with web application firewalls, I can tell you from firsthand experience that these are by far one...

There’s a goal behind every website, and a specific chain of events that must occur before each goal is accomplished. Whether you want someone to sign up for your email newsletter, or fill out a contact form, these things don’t happen without the proper triggers. Used strategically, WordPress plugins can assist with the realization of important goals. Here’s how to turn your website into a conversion machine with WordPress Plugins. Essential Grid ... Essential Grid is an all-around grid solution...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.