Guia para iniciantes de imagens responsivas: como acertá-las

Este tutorial de imagens responsivas passará por técnicas de CSS, recursos de HTML e algumas ferramentas que você deve considerar. Tudo isso deve fornecer uma boa visão geral de como começar a usar imagens responsivas em seus projetos hoje.

Índice:

• Imagens responsivas com CSS simples
• Imagens responsivas com os atributos srcset e sizes
• Usando srcset com um descritor de densidade de pixels
• Usando o elemento <picture>
• Ferramentas e serviços para ajudar com imagens responsivas

Imagens responsivas com CSS simples

A maneira mais simples de tornar qualquer imagem em uma página da Web responsiva não requer consultas de mídia ou HTML extra. Você pode fazer qualquer imagem crescer e diminuir dependendo do tamanho da janela com algumas linhas de HTML e CSS.

Primeiro, meu HTML incluirá atributos de width e height :

Incluir os valores de width e height no HTML é uma prática recomendada. Isso garante que o navegador reserve o espaço necessário para a imagem e não haja refluxo de página subsequente enquanto a imagem é carregada.

Junto com isso, vou usar o seguinte CSS:

 img { max-width : 100% ; height : auto; }
 Linguagem de código: CSS ( css )

Esses valores substituirão meu HTML. A propriedade max-width é definida como 100% para garantir que preencha qualquer espaço necessário, até um máximo de 1000px (o valor do HTML). O valor de height de auto garante que a altura da imagem mantenha as dimensões da imagem proporcionais à sua largura e altura naturais. Se eu remover a linha height: auto , a imagem ficará na altura definida no HTML, independente da largura – que normalmente não é o que eu quero.

Você pode experimentar este exemplo simples usando o seguinte CodePen. É melhor abrir a demonstração em uma nova janela se você quiser testar a capacidade de resposta.

E observe que no meu exemplo, as dimensões naturais da imagem são 2000px x 1333px, mas estou optando por exibi-la em um máximo de 1000px.

Teoricamente, eu poderia fazer o acima para todas as imagens da minha página, e essa seria uma maneira rudimentar e aceitável de incorporar imagens responsivas em meus projetos. Mas, idealmente, eu gostaria de levar isso para o próximo nível e ganhar controle sobre a resolução da imagem e outros fatores, para melhorar o desempenho e ajudar com SEO, que discutirei nas próximas seções.

Imagens responsivas com os atributos srcset e sizes

No exemplo simples de CSS acima, estou carregando uma imagem com cerca de 1,44 MB de tamanho – mesmo depois de usar compactação sem perdas para reduzir o tamanho. Isso não é terrível por si só quando visto em um desktop, mas certamente não é do tamanho que eu quero carregado em um dispositivo pequeno, como um smartphone. É aqui que os atributos srcset e sizes são úteis.

O atributo srcset permite especificar vários tamanhos de imagem em um único valor. Estas serão as imagens às quais o navegador ou dispositivo terá acesso em circunstâncias definidas. O atributo de sizes funciona junto com srcset para informar ao navegador qual das imagens escolher.

Aqui está um exemplo que usa várias versões da imagem leopard.png do exemplo anterior:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Linguagem de código: HTML, XML ( xml )

Se você nunca viu os atributos srcset e sizes antes, isso pode parecer confuso à primeira vista. Vou dividir tudo para que seja relativamente fácil de entender.

Quebrando o atributo srcset

O atributo srcset aceita uma lista separada por vírgulas de uma ou mais strings. Cada string contém:

• Um URL apontando para uma imagem
• Um dos seguintes descritores opcionais (separados por um espaço):
  • Um descritor de largura
  • Um descritor de densidade de pixels

No meu exemplo, incluí um descritor de largura, que é o que você verá com mais frequência. Incluí três versões diferentes da imagem: A versão grande de alta resolução, junto com uma com 800px de largura e outra com 480px de largura.

Observe que quando usei o descritor de largura no exemplo acima, a sintaxe é o valor de largura imediatamente seguido por um “w” (não use um valor de unidade “px”!). Para cada um dos descritores de largura que representam as imagens, estou usando a largura intrínseca da imagem em pixels. Você pode obter o tamanho real de qualquer imagem de várias maneiras diferentes - referenciando suas propriedades em seu sistema de arquivos, um editor de fotos ou até mesmo em seu navegador ou ferramentas de desenvolvedor do navegador.

Quebrando o atributo de sizes

O atributo de sizes só funciona junto com o atributo srcset . Você pode usar srcset sozinho (veja a próxima seção), mas a maneira mais comum de usar o srcset é junto com os sizes .

O atributo de sizes aceita uma lista separada por vírgulas de uma ou mais strings. Cada string contém:

• Uma condição de mídia (semelhante às consultas de mídia usadas em CSS)
• Um valor que define o tamanho do “slot” que a imagem ocupará

O valor do slot pode ser um comprimento absoluto como em ou px ou uma unidade relativa da viewport (por exemplo, vw ). Observe no meu exemplo que os valores de slot no atributo de sizes não correspondem exatamente aos três descritores de largura. Aqui está o código novamente:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Linguagem de código: HTML, XML ( xml )

O fato de os valores de slot não corresponderem exatamente aos descritores de largura é bom. No meu caso, posso dividir o valor dos sizes como:

• Uma janela de visualização de 600px de largura carregará a imagem de srcset do valor srcset dentro de um slot com 480px de largura.
• Uma janela de visualização de 1000px de largura carregará a imagem de 800w em um slot de 800px.
• A imagem padrão em tamanho real (2000w) preencherá um slot de 1000px se as condições de mídia anteriores não forem atendidas.

A última string é apenas um valor de slot, sem condição de mídia. Como mencionado, isso garante que o navegador tenha algo para exibir se nenhuma das condições da mídia for atendida, funcionando como padrão.

Você pode ver o código de exemplo em ação usando a demonstração do CodePen abaixo. Observe que, neste caso, você terá que testar em algo que imite dispositivos diferentes (como o DevTools no Chrome). Você também pode abrir a página usando uma variedade de dispositivos reais para fazer um teste verdadeiro. Por conveniência, incluí uma sobreposição de texto em cada uma das imagens para que você possa ver quais são carregadas ao visualizar a página.

Observe que depois que a imagem original é carregada, a imagem não muda de tamanho quando você altera o tamanho da viewport. Os atributos srcset e sizes são úteis para carregar imagens de acordo com as condições da mídia no primeiro carregamento, mas não ajudam a alternar imagens com base no redimensionamento da tela. Mais tarde, mostrarei um recurso diferente de imagens responsivas que resolverá esse problema.

Usando srcset com um descritor de densidade de pixels

Anteriormente, mencionei que o atributo srcset pode ser usado com um descritor de densidade de pixels. Esse descritor permite que o navegador decida qual imagem usar com base nos recursos de resolução do dispositivo. Aqui está o que parece:

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 Linguagem de código: HTML, XML ( xml )

Observe algumas coisas aqui. Em primeiro lugar, para o atributo src regular, estou usando a menor imagem, garantindo uma abordagem mobile-first. Em seguida, o atributo srcset inclui algumas outras versões da imagem, com resolução indicada pelos descritores 1,5x e 2x. A imagem 480 não inclui um descritor porque o 1x está implícito. Por fim, observe que não há atributo de sizes presente, o que não preciso neste caso. MDN explica como o navegador escolhe a imagem:

Para entender como funcionam os descritores, basta lembrar que um pixel de dispositivo representa cada pixel CSS. Portanto, 1x seria uma proporção de 1:1, 1,5x seria uma proporção de 1,5:1 e assim por diante. Você pode experimentá-lo no CodePen abaixo, mas terá que usar dispositivos diferentes (ou usar uma ferramenta que os imite) para ver a diferença.

Usando o elemento <picture>

Até agora, os recursos que discuti para incorporar imagens responsivas pressupõem que estou sempre exibindo a mesma imagem, mas em tamanhos e resoluções diferentes. E embora eu esteja usando CSS em todos os exemplos para alterar a largura das imagens quando o usuário redimensiona o navegador, a imagem em si nunca muda quando a página é carregada.

O elemento <picture> é um recurso HTML que permite oferecer versões alternativas de uma imagem com base na presença de recursos de mídia específicos. Isso também permite que as imagens sejam trocadas quando o usuário redimensiona a janela de visualização e essencialmente permite que você faça direção de arte com suas imagens, mostrando variedades da mesma cena, mas cortadas ou ampliadas de maneira diferente, dependendo do tamanho do dispositivo.

Por exemplo, uma tomada ampla com um pequeno objeto no meio seria apropriada para um dispositivo maior em um desktop ou tablet, mas um dispositivo menor, como um smartphone, pode carregar a mesma imagem cortada ou ampliada.

Aqui está um código de exemplo que me permitirá fazer alguma direção de arte na minha imagem:

Observe o seguinte sobre o código:

• O elemento <picture> aceita vários elementos <picture> aninhados como filhos
• Cada um dos elementos <source> dentro de <picture> está usando o atributo media para definir a condição de mídia que aciona o uso dessa imagem de origem
• O elemento <picture> aceita o padrão <img> elemento como filho, que o navegador reconhece como substituto se não suportar <picture>
• Não há atributos diretamente no elemento <picture> ( <picture> só aceita atributos globais do HTML e não possui atributos próprios)

O CodePen abaixo demonstra isso:

Se você abrir a demonstração em uma nova janela, poderá redimensionar a janela para ver a alteração da imagem. Observe como o assunto da imagem fica mais ampliado à medida que a janela do navegador fica menor. Essa é uma maneira fácil de criar imagens responsivas direcionadas à arte que parecem apropriadas em qualquer dispositivo que esteja sendo usado. Claro, isso dá um pouco mais de trabalho, mas vale a pena se você quiser que suas imagens sejam significativas em qualquer dispositivo usado.

Ferramentas e serviços para ajudar com imagens responsivas

Existem inúmeras ferramentas disponíveis, gratuitas e comerciais, que ajudarão na implementação de imagens responsivas. E alguns deles irão ajudá-lo a evitar até mesmo ter que escrever muito do código que discuti. Aqui estão alguns que você pode achar úteis:

É importante e conveniente que vários serviços diferentes possam fazer imagens responsivas automaticamente, oferecendo recursos como diferentes tamanhos de imagem, uma API para geração de imagem em tempo real e muito mais.

Até o próprio WordPress vem com suporte embutido para imagens responsivas (a partir da versão 4.4).

Outra ferramenta/serviço que vale a pena analisar é o Optimole. É uma ferramenta avançada de otimização e entrega de imagens criada pela equipe por trás do Themeisle. Este não apenas reduzirá o tamanho do disco de suas imagens sem prejudicar a qualidade visual, mas também cuidará de entregar as imagens aos visitantes do seu site por meio de um CDN de imagem. Um dos aspectos desse recurso de entrega de imagens é que suas imagens também serão otimizadas para visualização em diferentes dispositivos.

Há uma versão gratuita do Optimole disponível. Ele permite até 5.000 visitas mensais ao site e oferece todos os recursos de dimensionamento automático, CDN e muito mais.

Qual é a sua experiência com imagens responsivas em sites? Deixe-nos saber nos comentários abaixo.

Layout e apresentação de Chris Fitzgerald e Karol K.