Acesso a sites em dispositivos móveis pode ficar mais rápido com este novo elemento HTML

Acessar sites a partir de smartphones ou tablets frequentemente é uma experiência “morna”, mesmo quando a página se adapta a telas menores ou direciona para uma versão específica a dispositivos móveis. A causa, na maior parte das vezes, é o peso de imagens. Mas uma pequena mudança no HTML pode acabar com isso em breve.

Segundo o Ars Technica, um grupo de desenvolvedores (muitos deles provenientes de companhias como Google e Opera Software) propôs um novo elemento chamado picturepara orientar o navegador a carregar imagens próprias para dispositivos móveis.

Em um passado recente, boa parte dos desenvolvedores web optava por criar versões móveis separadas, algo como “m.tecnoblog.net”. Mas esta abordagem requer uma série de cuidados, já que pode confundir o usuário, atrapalhar a indexação do site em mecanismos de busca (o Google não gosta de conteúdo duplicado) e aumentar as solicitações ao servidor.

Atualmente, os desenvolvedores têm optado por layouts responsivos. Neste conceito, a página se adapta automaticamente ao tamanho da tela, seja ela um monitor gigantesco ou um smartphone com visor de 4 polegadas (é o caso da Super T Host inclusive, você pode conferir acessando o nosso site em seu dispositivo móvel).

Layouts responsivos também ajustam o tamanho das imagens para a sua correta exibição em telas menores. Mas há uma séria limitação aqui: muitas vezes, o navegador simplesmente faz a figura ser exibida em tamanho menor, mas a carrega integralmente, ou seja, sem diminuir o seu peso.

Se uma página tem cinco imagens que totalizam 1 MB, provavelmente você não terá problemas para visualizá-la a partir da conexão da sua casa. Mas, ao acessá-la via redes móveis (mais sujeitas à lentidão), a página pode não só demorar a carregar, como consumir desnecessariamente parte da sua franquia de dados.

É neste ponto que o tal elemento picture entra cena. A ideia é que a novidade seja empregada para listar várias versões da mesma imagem e orientar o navegador a carregar aquela que mais se aproxima da largura de tela do dispositivo.

A ideia não é necessariamente nova. Códigos em JavaScript que fazem o navegador exibir versões específicas da mesma imagem já existem. O problema é a costumeira complexidade envolvida e, muitas vezes, a maior exigência de processamento.

O elemento picture é focado em simplicidade e desempenho. O Tableless dá um exemplobastante claro:

<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 que a segunda e a terceira linha indicam versões para telas com largura de 500 e 250 pixels, respectivamente, da imagem padrão “pequena.jpg” descrita na quarta linha. Se por ventura o navegador não suportar o picture, a imagem indicada na quinta linha pelo velho e conhecido elemento img é carregada.

O Tableless destaca outro atributo, o srcset. Observe o código abaixo:

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

O atributo srcset indica mais de uma imagem para o mesmo tamanho de tela, cabendo ao navegador “decidir” qual carregar (sistema operacional, histórico de navegação e outras informações podem servir como parâmetros de escolha).

No final das contas, o elemento picture facilitará a navegação web em dispositivos móveis por instruir o navegador a carregar a imagem mais leve e com as dimensões mais apropriadas para o tamanho da tela. Sistemas de gerenciamento de conteúdo poderão inclusive ter o elemento como base para gerar versões da mesma imagem automaticamente no momento da publicação.

Testes com o elemento picture vêm sendo feitos há alguns meses e, pelo jeito, a ideia agradou: Google e Mozilla pretendem dar suporte à novidade em seus navegadores até o final do ano. A padronização em si, se ocorrer, deve demorar um pouco mais, pois há a necessidade de mais testes.

Caso queira saber mais, acesse a página The picture Element.