The New Picture HTML Code Could Make Your Website Load Faster

You’ve heard that the Web has become more visual and great images in your business website are important.

But those images may be the scourge of your website visitors. Images account for 1MB out of the 1.7MB the average web page contains.

This might not be much of a problem for your visitors on desktop computers using high-speed Internet connections. However, if you’re seeing or want to see increased traffic from mobile visitors, those images could be an issue. Image-heavy Web pages can take a long time to download. Visitors get frustrated and leave your site.

You may have implemented a responsive Web design, thinking that solves all your mobile problems. And it’s true that a responsive Web design solves some problems.  It automatically arranges and displays your site elements to be viewed on smaller, narrower mobile screens.

But responsive Web design isn’t the answer to everything.  It doesn’t necessarily solve the image download issue.  Even with responsive design, many times those heavyweight images still are downloaded anyway.  As Web performance specialist Yoav Weiss succinctly points out on the Opera website:

“Responsive Web Design [RWD] combined new browser capabilities and CSS techniques to create websites that adapt to the device displaying them, and look ideal everywhere. That enabled developers to stop worrying about unreliable device detection and think of their websites in terms of viewport dimensions.

But, even though RWD sites looked different on each device, underneath, most of them continued to download the same resources for all devices.”

The new <picture> HTML code element could change that.

What is The Picture HTML Element?

If you don’t know anything  about HTML code, a non-technical definition is:  it’s a special language. When used behind the scenes in your website code, this language gives instructions for how the browser should display the text and images .

The new Picture element is a type of HTML markup language. It is written like this (per the Responsive Images Community Group):

The Picture element is about responsive images, not responsive design.

To non-technical business people, that distinction may seem small.  But when it comes to your site’s performance on mobile devices, it could be significant.

According to an ArsTechnica report, the new markup element addresses the problems caused by images that were meant to be seen on a full-size monitor — images that don’t translate well to mobile devices. The <picture> markup code tells  Web browsers such as Firefox to load and display the right (read: smaller) images:

“When the browser encounters a Picture element, it first evaluates any rules that the Web developer might specify. *** Then, after evaluating the various rules, the browser picks the best image based on its own criteria. This is another nice feature since the browser’s criteria can include your settings. For example, future browsers might offer an option to stop high-res images from loading over 3G, regardless of what any Picture element on the page might say. Once the browser knows which image is the best choice, it actually loads and displays that image in a good old img element.

… what happens is Picture wraps an img tag. If the browser is too old to know what to make of a <picture> element, then it loads the fallback img tag. All the accessibility benefits remain since the alt attribute is still on the img element.”

Not all developers accepted the new Picture element at first.  Ars Technica’s story outlines the process that leaders in the Web development community went through to get to the point of where the <picture> element stands today.  Along the way there was even a successful crowdfunding campaign on Indiegogo featuring a guitar-playing Weiss.

But the issue now appears settled, with the new picture HTML element being adopted.

Key Points About the <Picture> Element

The <picture> markup element is coming soon to a browser near you.  By the end of 2014 support for it is expected to be turned on by default in the Chrome and Firefox browsers. Opera is also on the way.  And the latest version of the Safari browser by Apple appears to be in the works, too. Microsoft is “considering it” for Internet Explorer, according to ArsTechnica.

As business people, an important thing to know is that <picture> markup could speed up your website, especially on mobile devices.  That would be good for your site visitors.

Implementing the Picture HTML element for images is something to discuss with your Web developer. The technically-minded and the do-it-yourselfers can go here to learn how to use the Picture element. It’s an excellent write-up by Scott Gilbertson.

Feel free to implement <picture> markup in your website code now.  Even if a browser program doesn’t understand the new markup, there’s a fallback command to use standard HTML image tags, Gilbertson writes.

Images: Shutterstock; RICG

9 Comments ▼

---