A new HTML element that can save you money?

Developers battled the red-tape to add a new element to the HTML spec

It sounds a little ridiculous but there is a new element being added to the HTML spec that could actually save you money.

When browsing the web, the bulk of the bandwidth being used is consumed by the transmission of image files. Web developers have long been aware of this fact and they usually take the time necessary to compress down images to a reasonable file size / quality ratio. Today, high dpi displays with large resolutions are commonplace. To make the most of these displays however, websites have had to increase the quality and overall image dimensions to support them - resulting in even bigger website payloads.

The average size of a website today is 1.85MB, over 1.0MB of which comes from images. This isn’t so bad on your desktop but when it comes to mobile browsers, there is significant waste here. If you’ve got an image on your homepage that is the full width of the content area, let’s say 1,200px, that same image will be used on a mobile browser even though the maximum resolution will be half that number. That means you’re sending at least twice as much data as necessary to the mobile browser. If you’ve got a metered data connection on your cell phone, and we basically all do now, this can translate to a waste of actual dollars, and fast.

Due to the way that modern browsers operate, solving this problem has been pretty much impossible. In an effort to speed up the loading of web pages, browsers will start loading images before even processing the HTML to see where they go. This is called prefetching. While great on the desktop, this prevents developers from executing any fancy tricks using javascript to load a different image on mobile since the JS isn’t even loaded yet. To solve this issue (and avoid separate / dedicated mobile sites), developers hashed out a new HTML element and battled the red tape to get it pushed into the HTML standard.

The new element is called picture and its concept is simple. Using a syntax similar to the way dynamic images are defined during native mobile development, you can provide instructions in HTML to tell the browser to use different image files at different pixel densities or screen sizes.

For example, different densities are defined like:

<img src="pic1x.jpg" srcset="pic2x.jpg 2x, pic4x.jpg 4x" alt="A rad wolf" width="500" height="500">

Different screen sizes are defined like:

<picture> <source media="(min-width: 45em)" srcset="large.jpg"> <source media="(min-width: 18em)" srcset="med.jpg"> <img src="small.jpg" alt="The president giving an award."> </picture>

The browser will parse the new img attribute srcset and the new picture element and choose the proper image file to fetch based on the instructions.

While this feature is just making its way into the latest releases of modern browsers this fall, there is nothing to stop developers from using it starting today because it will gracefully fall back to the normal image tag if picture is not supported.

The downside here is that there will be a lot more work to do up-front when prepping image resources for a site, but it your site gets meaningful traffic it will be worth it. Not only will you reduce bandwidth on your own servers but you can actually save your users money by not wasting their mobile data quotas.

Source: Ars Technica

ITWorld DealPost: The best in tech deals and discounts.
Shop Tech Products at Amazon