Faster, Better Buffering: Mobile HTML Gets an Upgrade


Article by Alison K. Lanier | 626 words

Ars Technica writes that HTML5’s mobile Internet experience is about to get better thanks to a newly proposed image-management element. The Responsive Images Community Group (or RICG) is a team of developers that has been instrumental in creating a new HTML element to help phones manage pictures and videos faster while using less data.

As the website Gizmodo explains, code framework for images and videos is generally difficult, leading to slow, data-munching Internet speeds. That complex code associated with pictures and videos will be addressed by a new piece of HTML to prevent excessive data usage. The tag <picture> will prevent the large amount of data associated with the video and photo files from being processed by mobile Internet unnecessarily.

<Picture> will wrap picture and video data in an extra layer of code to facilitate how mobile Internet recognizes these larger, more complicated files at first glance. Facilitating the processing of these large pieces of data goes hand in hand with conserving data-plan limits.

Simplifying for Smaller Screens

The key to the proposed element is the role it plays as a guide in registering the image to begin with. It gives the host a set of immediate, preliminary data about the image or video that processes it more efficiently, with a greater number of conditions. The W3C’s working notes from July 22 describe in the abstract:

“This specification defines the HTML picture element and extends the img and source elements to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format and other factors.”

The website HTML5 Hub explains that the new element would address the issue of bandwidth usage. Current HTML processes massive high-res images despite the fact that the images are squeezed into a much more contained, minimized format on the phone screen. The large data implicit in high-res images—and the relatively gargantuan amount of data in videos— are not necessary in a small-screen format.

Hiccups and Solutions

There are a number of solutions to this issue of unneeded data already in place, but these solutions rely on different coding languages. JavaScript offers several popular tricks alone, writes HTML5 Hub. A solution within HTML itself is where the <picture> element comes in. As HTML5 Hub explains, “Proposed to be a part of HTML5, the <picture> element is a solution that is both complete and in need of no additional scripts or third-party services to do the job.”

The element is not perfect though. In articles like David Newton’s worried commentary in Smashing Magazine, there is a redundancy in the way images may load. Browsers that “look ahead” through the code and pre-load the images could reach for a fallback image format and download the large image file anyway. This can lead to inefficient double-downloads. The benefits of <picture> include that it can be designed to use non-image fallbacks, says Newton, and with the aid of the extra data defined by <picture>, browsers can select the appropriate resolution, preventing redundancy.

“The benefit to the user is that only one image file is downloaded,” says Newton, “regardless of feature support, viewport dimensions or screen density.” He goes on to mention that “the best part about this solution, though, is that it highlights how bad the current situation is.”

The code will only be effective though, as Gizmodo aptly points out, if it is adopted widely. But as Gizmodo says, <picture> is on its way to widespread acceptance. Google Chrome and Firefox will be adopting <picture> by the end of the year.

Developers’ busy hands in the code’s development and RICG’s championing efforts promise to make mobile Internet plans go at least a little farther, a little faster.

More To Read:

Leave a Reply

Your email address will not be published. Required fields are marked *