Chances are, your website has a lot of eye-catching images. In fact, if your site is typical of most websites, images probably account for about two-thirds of all the bytes that get delivered from your web server to the browser of someone looking at your site. And that’s OK, because a picture is worth a thousand words, right? But if the viewers of your website happen to be using smartphones, those pretty pictures may be worth a thousand angry words! Since that’s a problem for just about every website, HTML developers have come up with a new element tag: <picture>.
- How a new HTML element will make the Web faster (Ars Technica | Scott Gilbertson) “If you’ve got a nice fast fiber connection, that image payload isn’t such a big deal. But if you’re on a mobile network, that huge image payload is not just slowing you down, it’s using up your limited bandwidth. Depending on your mobile data plan, it may well be costing you money. What makes that image payload doubly annoying when you’re using a mobile device is that you’re getting images intended for giant monitors loaded on a screen slightly bigger than your palm. It’s a waste of bandwidth delivering pixels most simply don’t need.”
- The new picture HTML code could make your website load faster (Small Business Trends | Joshua Sophy) “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.”
- Native responsive images (Dev.Opera | Yoav Weiss) “But, even though RWD [responsive Web design] sites looked different on each device, underneath, most of them continued to download the same resources for all devices. And since images comprised the major part of the bytes that websites were downloading, the developer community started to look into possible solutions to avoid this waste. […] The picture element specification that was written in collaboration between the community and browser vendors was merged into the HTML spec, and both Blink & Gecko’s implementations are destined to ship early this fall!”
- Built-in browser support for responsive images (HTML5 Rocks | Pearl Chen) “The
<picture>element offers a declarative approach towards image resource loading. Web developers will no longer need CSS or JavaScript hacks to handle images in responsive designs. And users benefit from natively-optimized image resource loading—especially important for users on slower mobile internet connections. Alongside the newersrcsetandsizesattributes recently added to<img>, the<picture>element gives web developers more flexibility in specifying image resources.”
Articles from Ohio Web Library:
- Responsive design. (Online Searcher, Jan/Feb 2013, p74-76 | Jeff Wisniewski)
- Flexible everything: Getting responsive with web design. (Computers in Libraries, April 2013, p12-16 | Jeremy Snell)
- Rules for mobile performance optimization. (Communications of the ACM, Aug. 2013, p52-59 | Tammy Everts)
