A New HTML Tag for Images!

Remember when browsing the web with your smartphone was painful? “Hey, what happened to my flash!?!” But, then, did you notice a few years ago, it suddenly wasn’t so painful anymore? Well, what happened?

The improvement was due in large part to the introduction of Responsive Web Design–an idea first put into practice by web designer Ethan Marcotte. You can read Marcotte’s original ideas on Responsive Web Design here.

The idea is that the Web, unlike a building’s architecture, for example, is flexible. Instead of developing entirely different sites for mobile viewing, designers could take advantage of this flexibility, and design sites that respond to how they are being viewed, whether on a desktop, an iPhone or a tablet.

Ideas like Marcotte’s are important. First of all, it made browsing the Web with your phone easier, practical and, well, not painful. It also led to new ways of thinking about the issues web designers face in terms of making the user experience more agreeable.

A recent issue web developers were facing was how to speed up the download of pictures on mobile devices. The solution innovated by a team of developers, some of whom previously worked with Marcotte, is a new HTML tag known as Picture. This great article from Ars Technica explains the long, winding drama the developers faced getting the Picture element introduced into the markup language. Who knew HTML could be so exciting?

The article also explains how the Picture element will work:

“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.”

So, in this case, the word “best” is relative to browser 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.”

The solution goes back to the root of the problem which is how pictures are loaded on sites. This is from the Opera’s developer site:

“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.”

In the end, the Picture tag was their solution.

Thanks for reading our weekly blog post! You can expect more from us in the upcoming weeks! Remember we are Seattle CPAs and Bellevue CPAs! Get in touch!


About the author

Seattle CPA+John Huddleston has written extensively on tax related subjects of interest to small business owners. Since 2002, he has owned his own small business, Huddleston Tax CPAs. He is a graduate of Washington State University and the University of Washington School of Law.

Leave a Reply