Access to Sites on Mobile Devices Can be Faster with This New HTML Element

Accessing sites from smartphones or tablets is often an experience “warm”, even when the page adapts to smaller screens or directs you to a specific version to mobile devices. The cause, in most cases, is the pictures weight. But a small change in HTML can end this soon.

According to Ars Technica, a group of developers (many of them from companies like Google and Opera Software) proposed a new element called picture to guide the browser to load own images to mobile devices.

In the recent past, most of the web developers chose to create separate mobile versions, something like “m.tecnoblog.net”. But this approach requires a lot of care, as it can confuse the user, disrupt indexing site in engines search (Google does not like duplicate content) and increase requests to the server.

Currently, developers have opted for responsive layouts. In this concept, the page automatically adapts to the screen size, be it a giant monitor or a smartphone with 4-inch display (in the case of our site inclusive, you can check by visiting the blog on your mobile device).

Responsive layouts also adjust the size of images to their correct display on smaller screens. But here there is a serious limitation: often, the navigator simply makes the picture be displayed in a smaller size, but the full load, that is, without decreasing its weight.

If a page has five images totaling 1 MB, you probably will not have trouble viewing it from the connection of your home. But when accessing it via mobile networks (more prone to slow), the page can not only take the load, as unnecessarily consume part of your data allowance.

It is at this point that such an element picture enters the scene. The idea is that this will be used to list multiple versions of the same image and direct the browser to load the one that most closely matches the device’s screen width.

The idea is not necessarily new. JavaScript code that makes the browser display specific versions of the same image already exist. The usual problem is the complexity involved, and often, the increased processing requirement.

The picture element is focused on simplicity and performance. The tableless gives an example quite clear:

<picture>
<source media=”(min-width: 500px)” src=”grande.jpg”>
<source media=”(min-width: 250px)” src=”medio.jpg”>
<source src=”pequena.jpg”>
<img src=”pequena.jpg” alt=””>
</picture>

Note that the second and third lines indicate versions for screens with a width of 500 pixels and 250, respectively, of the standard image “pequena.jpg” described in the fourth row. If perchance the browser does not support the picture, the image displayed on the fifth line by the old familiar element img loads.

The tableless highlights another attribute, srcset. Note the code below:

<source media=”(min-width: 500px)” srcset=”grande-1.jpg 1x, grande-2.jpg 2x”>

The attribute srcset indicates more than one image to the same screen size, leaving the browser “decide” which load (operating system, browsing history and other information can serve as a choice of parameters).

In the end, the picture element facilitate web browsing on mobile devices by instructing the browser to load the lighter image and with the most appropriate dimensions for the screen size. content management systems may even have the element as a basis to generate versions of the same image automatically at the time of publication.

Tests with the picture element have been made ​​a few months ago and, by the way, the idea appealed: Google and Mozilla are intended to support innovation in their browsers until the end of the year. The standardization itself, if it occurs, should take a little longer because there is a need for more tests.