Tutorial CSS - Elemento picture para imagens responsivas

SAVE OFFLINE

R$ 699,00

R$ 55,90

R$ 159,90

2

 

Imagens responsivas: Exemplos e códigos para iniciar seus estudos 5770 visualizações Crédito: essa matéria é uma tradução e foi escrita por Andreas Bovens. URL do original: http://dev.opera.com/articles/responsive­images

Introdução Finalmente a solução para servir imagens responsivas na web já é uma realidade. E mais, com uso de HTML puro sem necessidade de complicados hacks. O elemento picture e os novos atributos para o elemento img já são suportados no Chromium 37 com habilitação da respectiva flag (e em breve no Opera), no Firefox Nightly e está sendo implementado no WebKit embora ainda não haja informações se a Apple vai implementar suporte na próxima versão do Safari. Nota do Maujor:  Para iformação atualizada sobre suporte atual ao elemento picture consulte o site caniuse A sintaxe para o novo elemento picture pode parecer verbosa e confusa, mas isso deve­se ao fato de ele elemento resolver uma gama variada de casos para servir imagens responsivas. Escrevemos essa matéria com a finalidade de mostrar a vocês a sintaxe para servir imagens responsivas em diversas situações, ilustrando cada caso com os respectivos códigos e exemplos.

Quatro perguntas Antes de começar a usar imagens responsivas no seu projeto você deverá responder as quatro perguntas a seguir: As dimensões (sizes) da imagem variam em resposta às diferentes larguras de viewport? Serão servidas imagens otimizadas para telas de alta resolução (high­dpi)? Serão servidas imagens com diferentes tipo de mime (mime type) de acordo com o suporte oferecido pelo navegador? Será usada a técnica art direction para atender diferentes contextos de apresentação da imagem? Nos exemplos que mostraremos a seguir vamos usar as palavras­chave sizes, dpi, mime e art, respectivamente para vincular o exemplo a cada uma das respostas ou combinação de respostas para as quais o exemplo se refere. Para cada exemplo faremos um breve comentário explicativo do código. Para criar os exemplos eu resolvi usar esta imagem noturna da sede do Opera em Oslo.

Visão noturna da sede do Opera em Oslo

Lembre­se... Antes de iniciar o estudo dos exemplos convém lembrar alguns conceitos conforme relacionados a seguir: O elemento último­filho do elemento picture deverá ser obrigatoriamente o elemento img. Se assim não for, nada será renderizado. Isso é muito bom para a acessibilidade, pois podemos usar o atributo alt para fornecer uma alternativa textual para a imagem e ainda servir a imagem para navegadores antigos que não suportam o elemento picture. Pense no elemento picture e seus atributos sizes e srcset como sendo os substitutos dos elemento img e seu atributo src. Use a propriedade JavasScript currentSrc para inspecionar qual é a escolha do navegador. Navegadores antigos escolhem o elemento img. A lista de srcset e sizes presentes na sintaxe é uma dica para o navegqador e não um comando. Por exemplo um dispositivo com device­ pixel­ratio igual a 1.5 é livre para escolher uma imagem que na sintaxe tenha sido declarada como 1x ou 2x, dependendo de suas capacidades, da conexão, etc.  significa o seguinte: se a “media query” for verdadeira, mostre a imagem com largura igual a 100vw. A primeira “media query” verdadeira vence. Assim a ordem de declaração das “media queries” é importante.

Exemplo: art direction sizes   dpi   mime   art

               

Para larguras de janela iguais a 1024px CSS e maiores é servida a imagem em suas dimensões reais (fullshot) e para larguras menores serve­se uma parte da imagem (closeup).

Exemplo: tipo de mime sizes   dpi   mime   art

                  

Navegadores que suportam o formato WebP servem a imagem neste formato, outros navegadores servem a imagem no formato JPG.

Exemplo: tipo de mime e art direction

sizes   dpi   mime   art

                                  

Para larguras de janela iguais a 1024px CSS e maiores é servida a imagem em suas dimensões reais (fullshot) e para larguras menores serve­se uma parte da imagem (closeup). A imagem é servida no formato WebP para navegadores que suportam este formato, para outros navegadores a imagem é servida no formato JPG.

Exemplo: High­DPI sizes   dpi   mime   art



Navegadores em dispositivos com tela de alta resolução recebem a imagem em alta resolução, outros navegadores recebem­na em resolução normal.

Exemplo: High­DPI e art direction sizes   dpi   mime   art

                    

Para larguras de janela iguais a 1024px CSS e maiores é servida a imagem em suas dimensões reais (fullshot) e para larguras menores serve­se uma parte da imagem (closeup). A imagem será servida em sua versão alta resolução em navegadores instalados em dispositivos com tela em alta resolução e em resolução normal no demais navegadores.

Exemplo: High­DPI e tipo de mime sizes   dpi   mime   art

                  

 

Para navegadores em dispositivos com tela em alta resolução é servida a imagem com duas ou três vezes a quantidade de pixels da imagem normal, para outros navegadores é servida a imagem normal. A imagem é servida no formato WebP para navegadores que suportam este formato, para outros navegadores a imagem é servida no formato JPG.

Exemplo: High­DPI, tipo de mime e art direction

sizes   dpi   mime   art

                                

Para larguras de janela iguais a 1024px CSS e maiores é servida a imagem em suas dimensões reais (fullshot) e para larguras menores serve­se uma parte da imagem (closeup). A imagem será servida em sua versão alta resolução em navegadores instalados em dispositivos com tela em alta resolução e em resolução normal no demais navegadores. A imagem é servida no formato WebP para navegadores que suportam este formato, para outros navegadores a imagem é servida no formato JPG.

Exemplo: sizes sizes   dpi   mime   art



Para larguras de janela iguais a 640px CSS e maiores é servida uma imagem com largura igual a 60% da largura da viewport, para larguras menores é servida uma imagem com largura igual a largura da viewport. O navegador escolhe a imagem entre imagens com larguras iguais a 200px, 400px, 800px e 1200px, levando em conta a largura da imagem a servir e a resolução da tela em DPI.

Exemplo: sizes e art direction sizes   dpi   mime   art

                  

 

 

Para larguras de janela iguais a 1280px CSS e maiores é servida a imagem em tamanho real com largura igual a 50% da largura da viewport, para larguras de janela entre 640­1279px CSS é servida a imagem com largura igual a 60% da largura da viewport, para larguras menores é servida uma imagem com largura igual a largura da viewport. O navegador escolhe a imagem entre imagens com larguras iguais a 200px, 400px, 800px e 1200px, levando em conta a largura da imagem a servir e a resolução da tela em DPI.

Exemplo: sizes e tipo de mime sizes   dpi   mime   art

                  

 

 

Para larguras de janela iguais a 640px CSS e maiores é servida a imagem em tamanho real com largura igual a 60% da largura da viewport, para larguras menores é servida uma imagem com largura igual a largura da viewport. O navegador escolhe a imagem entre imagens com larguras iguais a 200px, 400px, 800px e 1200px, levando em conta a largura da imagem a servir e a resolução da tela em DPI. A imagem é servida no formato WebP para navegadores que suportam este formato, para outros navegadores a imagem é servida no formato JPG.

Exemplo: sizes, tipo de mime e art direction sizes   dpi   mime   art

                                   

 

Para larguras de janela iguais a 1280px CSS e maiores é servida a imagem em tamanho real com largura igual a 50% da largura da viewport, para larguras de janela entre 640­1279px CSS é servida a imagem com largura igual a 60% da largura da viewport, para larguras menores é servida uma imagem com largura igual a largura da viewport. O navegador escolhe a imagem entre imagens com larguras iguais a 200px, 400px, 800px e 1200px, levando em conta a largura da imagem a servir e a resolução da tela em DPI. A imagem é servida no formato WebP para navegadores que suportam este formato, para outros navegadores a imagem é servida no formato JPG.

Exemplo: sizes e high­DPI sizes   dpi   mime   art



Para larguras de janela iguais a 640px CSS e maiores é servida a imagem em tamanho real com largura igual a 60% da largura da viewport, para larguras menores é servida uma imagem com largura igual a largura da viewport. O navegador escolhe a imagem entre imagens com larguras iguais a 200px, 400px,

800px e 1200px, levando em conta a largura da imagem a servir e a resolução da tela em DPI.

Exemplo: sizes, high­DPI e art direction sizes   dpi   mime   art

                  

     

 

Para larguras de janela iguais a 1280px CSS e maiores é servida a imagem em tamanho real com largura igual a 50% da largura da viewport, para larguras de janela entre 640­1279px CSS é servida a imagem com largura igual a 60% da largura da viewport, para larguras menores é servida uma imagem com largura igual a largura da viewport. O navegador escolhe a imagem entre imagens com larguras iguais a 200px, 400px, 800px e 1200px, levando em conta a largura da imagem a servir e a resolução da tela em DPI.

Exemplo: sizes, high­DPI e tipo de mime sizes   dpi   mime   art

                  

 

 

Para larguras de janela iguais a 640px CSS e maiores é servida a imagem em tamanho real com largura igual a 60% da largura da viewport, para larguras menores é servida uma imagem com largura igual a largura da viewport. O navegador escolhe a imagem entre imagens com larguras iguais a 200px, 400px, 800px e 1200px, levando em conta a largura da imagem a servir e a resolução da tela em DPI. A imagem é servida no formato WebP para navegadores que suportam este formato, para outros navegadores a imagem é servida no formato JPG.

Exemplo: sizes, high­DPI, tipo de mime e art direction use case sizes   dpi   mime   art

                                                

 

Para larguras de janela iguais a 1280px CSS e maiores é servida a imagem em tamanho real com largura igual a 50% da largura da viewport, para larguras de janela entre 640­1279px CSS é servida a imagem com largura igual a 60% da largura da viewport, para larguras menores é servida uma imagem com largura igual a largura da viewport. O navegador escolhe a imagem entre imagens com larguras iguais a 200px, 400px, 800px e 1200px, levando em conta a largura da imagem a servir e a resolução da tela em DPI. A imagem é servida no formato WebP para navegadores que suportam este formato, para outros navegadores a imagem é servida no formato JPG.

Mas, isso não é tudo! Não se preocupe se você não entendeu o que acabou de ler. Em breve o autor publicará Yoav Weiss do Opera publicou um tutorial detalhado (em inglês) sobre o uso do elemento picture para servir imagens responsivas. Por enquanto divirta­se preparando­se para impressionar seu chefe e seus clientes com a proposta de uma substantiva economia de banda e aumento de performance para seus projetos.