Início » Arquivos » Internet » Acesso a sites em dispositivos móveis pode ficar mais rápido com este novo elemento HTML

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

Emerson Alecrim Por

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 picture para 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.

Web responsiva

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 do Tecnoblog inclusive, você pode conferir acessando o blog 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 exemplo bastante 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.

Comentários

Envie uma pergunta

Os mais notáveis

Comentários com a maior pontuação

Ricardo Comel
Existe uma tag chamada "viewport" onde tu define a escala que o site abrirá. Um exemplo disso é definir que um site abrirá com 320px de largura em um celular full hd, pro html e css o site terá essa escala, não os 1080px. Se eu colocar uma imagem com maior resolução (@2x), ele ajusta e criar aquelas imagens em "retina" visto em muitos sites, se não mostra a imagem serrilhada...
Washington Santos
Bem o que isso fez foi tornar mais automática uma tarefa, e ao mesmo tempo forçar os desenvolvedores e os programadores a utilizar dessa ferramenta, afinal a ferramenta existir não é suficiente para ela ser utilizada, mas sim força de vontade dos que desenvolvem programas e sites.
Fernando Camilo
O layout no IE (Windows Phone) daqui do blog continua ruim :(
Kazz
Só uma curiosidade, os dispositivos tem resoluções altas, mas não necessariamente usam essa resolução na proporção 1:1. Um exemplo disto foi quando lançaram o iPhone 4 com tela retina, que apesar de ter o dobro de resolução (640x960) ainda simulava a metade da mesma (320x480). Por que então utilizar resoluções maiores sendo que a proporção continua a mesma? Bom, esta pergunta é facilmente respondida pegando um smartphone antigo, colocando ele do lado de um novo e comparando as telas. A nitidez é muito maior quando você tem mais resolução mantendo a proporção.
Jedielson Almeida

Sofro com as imagens aqui no Tb. O layout carrega a imagem original e bagunça todo o layout do texto.

Rodrigo Caldas
Legal esse artigo, Lucas. Não sabia dessa meta tag, bem interessante mesmo. Obrigado pela informação!
Lucas Carnicelli
Faz sentido sim Rodrigo, mas para prevenir isso existe a meta tag "viewport" que permite você informar a escala inicial que o seu site será visualizado. Ela faz o site ser renderizado proporcionalmente à resolução no dispositivo. Aqui tem um artigo que explica legal: http://tableless.com.br/manipulando-metatag-viewport/
Rodrigo Caldas
Fiquei com a dúvida de uma coisa. Na matéria mostra que a medida é feita em pixels, e não no tamanho da tela. Hoje temos diversos celulares com resolução 1920x1080 que apesar do tamanho da tela ser pequeno (de 4 a 5,5 polegadas), ainda assim possui a mesma quantidade de pixels de um monitor de 24 polegadas. Ou seja, baseado nessa idéia, a imagem que será carregada será a mesma imagem pesada. A não ser que ele leve em consideração o tamanho da tela também. Será que estou enxergando de forma equivocada ou faz sentido o que eu disse?
Bruno Guerreiro
Isso é o tal de "layout responsivo", que está sendo bastante difundido. Inclusive, na nova versão aqui do Tecnoblog também já tem...
Wolfgang Marcos
Uma página que tem o layout adaptativo é a do The Verge lançada hoje. Deem uma olhada http://www.theverge.com/2014/9/2/6096609/welcome-to-verge-2-0 Você pode redimensionar a janela do navegador e o conteúdo da página vai se ajustando automaticamente. Parece tão natural que você se pergunta como isso apareceu só agora.