São PauloNavegar pela internet no smartphone, contando com uma conexão de internet móvel, logo deve se tornar uma tarefa bem menos demorada.

Mas não graças a um novo recurso mágico de uma empresa ou a uma melhoria nas operadoras, e sim a um novo elemento HTML chamado Picture, que poderá ser adicionado a códigos de páginas e tornar o carregamento delas bem mais ágil.

A tag, idealizada por Mat Marquis e mais um grupo de desenvolvedores, resolve um dos principais problemas de websites responsivos, aqueles que adaptam o conteúdo de uma página ao tamanho da tela no qual ela é aberta.

Páginas adaptáveis assim substituem os endereços “m.site.com”, por exemplo, e fazem com que as imagens também diminuam em dimensões – mas não em tamanho.

Por isso, acabam fazendo com que um smartphone ligado ao 3G carregue quase a mesma quantidade de conteúdo que um PC ligado à rede por conexão cabeada.

As vantagens do design responsivo são indiscutíveis, é claro, mas para usuários que precisam lidar constantemente com uma franquia de dados bem limitada, este último ponto não deixa de ser um grande inconveniente na hora de navegar.

De acordo com o HTTP Archive, as páginas pela web têm, em média, 1,7 MB de conteúdo.

E desse total, quase 1 MB vem das imagens, o que já uma mostra do que poderá ser economizado com uma eventual adoção maciça do elemento nos códigos de sites.

Nos navegadores, ao menos, isso deve acontecer em um futuro próximo, visto que Google e Mozilla já anunciaram que suportarão a tag até o fim deste ano.

Além disso, o desenvolvedor Yoav Weiss começou a implementá-la nas engines Blink e WebKit, motores usados no Chrome, no Opera, no antigo navegador padrão do Android e no Safari, do iOS, por exemplo.

Mas como funciona? – O Picture age sobre o já existente elemento img, como um contêiner, de forma que não existam duas tags separadas para imagens, como destacou o site Ars Technica.

Na hora de carregar uma página, o navegador identifica o trecho no código e “avalia quaisquer regras que o desenvolvedor web especificar”, de acordo com a reportagem.

A partir das especificações, ele pode selecionar a imagem melhor adaptada para o dispositivo em que o endereço está sendo aberto.

Para o caso de uma tela pequena (mesmo que de resolução alta), que acessa o site a partir de uma conexão lenta, o browser escolhe uma imagem compatível – e faz o download dela antes de carregar o resto do website, como já acontece nos navegadores hoje.

Aliás, caso o programa seja antigo demais para identificar o Picture no código, ele pode simplesmente pulá-lo e apenas carregar a tag img.

Se quiser saber mais sobre a conturbada história do elemento e conhecer algumas de suas possíveis aplicações, vale conferir a matéria completa no Ars, um artigo escrito por um dos desenvolvedores do Opera e algumas dicas do Tableless.