Guia para iniciantes em imagens responsivas em HTML

Ter a mais alta qualidade de imagem possível é crucial para os sites atualmente. Nosso guia mostra uma maneira de conseguir isso.

Uma imagem responsiva é aquela que se adapta às diferentes características do dispositivo. Quando bem feitas, as imagens responsivas podem melhorar o desempenho e a experiência do usuário de um site.

Este artigo explora como você pode criar imagens responsivas em HTML usando srcset e o elemento picture.

Por que você deve usar imagens responsivas?

Quando os engenheiros de software estavam criando a web, eles não consideraram como os navegadores lidariam com imagens responsivas. Afinal, os usuários acessavam a web apenas em desktops ou laptops. Claro, isso não é verdade hoje.

De acordo com o Statista, mais de 90% da população global da Internet acessa a Internet usando seus telefones celulares. A maioria das páginas da web na internet contém imagens e essas imagens são uma das métricas usadas para medir o desempenho da web. Para melhorar o desempenho, você precisa otimizar suas imagens, tornando-as responsivas.

Como criar imagens responsivas em HTML

Você pode abordar imagens responsivas de dois ângulos: exibindo a mesma imagem com tamanhos diferentes ou exibindo imagens diferentes de acordo com as características de exibição. Você poderia usar ou . Essas duas opções lidam com imagens responsivas de maneira diferente, mas todas exibem uma imagem de determinadas alternativas, dependendo das regras definidas.

Usando srcset

O HTML padrão permite especificar apenas um arquivo de imagem. Se você deseja exibir uma imagem diferente dependendo do tamanho do dispositivo, você deve usar srcset.

Sintaxe:

<img srcset="" src="" alt="">

srcset permite fornecer arquivos de origem adicionais, e o navegador escolherá a imagem que parece ideal para aquele tamanho de imagem.

<img srcset="cute-cat.jpg 480w,
             cute-cat.jpg 800w"
     src="cute-cat.jpg"
     alt="A cute cat">

srcset é composto de três partes: O nome do arquivo da imagem que especifica o caminho para a imagem de origem, um espaço e a largura intrínseca ou real da imagem.

Usando srcset com tamanhos

O problema de usar srcset é que você não tem controle sobre qual imagem o navegador escolherá para exibir. Combinar srcset com tamanhos resolve esse problema. tamanhos definem um conjunto de condições de mídia que indicam a imagem com o tamanho ideal.

Agora você pode reescrever a tag acima da seguinte maneira.

<img srcset="cute-cat.jpg 480w,
             cute-cat.jpg 800w"
sizes="(max-width: 600px) 480px,
            800px"
     src="cute-cat.jpg"
     alt="A cute cat">

tamanhos é composto por uma condição de mídia, neste exemplo é (largura máxima: 600px) que representa a largura da janela de visualização, o espaço e a largura do slot (480px) especificando o espaço que a imagem preencherá se a condição da mídia é verdadeira.

Aqui, o navegador irá primeiro verificar a largura do dispositivo e compará-la com a condição da mídia. Se a condição for verdadeira, ele verificará a largura do slot e carregará uma imagem do srcset com a mesma largura ou a próxima maior.

Observe que você também está incluindo src , que fornece a imagem para uso em navegadores que não suportam srcset e tamanhos.

srcset também permite veicular imagens em diferentes resoluções usando descritores x.

<img srcset="cute-cat-high.jpg,
             cute-cat-high1.jpg 1.5x,
            cute-cat-high2.jpg 2x"
     src="cute-cat-low.jpg"
     alt="A cute cat">

Neste exemplo, se o dispositivo tiver uma resolução de dois pixels por CSS ou mais, o navegador carregará a imagem cute-cat-high1.jpg.

Pixels de hardware e software

O problema com esta solução é que as imagens só respondem em termos de densidade de pixels do dispositivo. Esta é a proporção entre os pixels de hardware e os pixels de software ou CSS. Um pixel de hardware é o ponto real de luz na tela, enquanto o pixel de software ou pixel CSS é uma unidade de medida. A densidade de pixels determina a resolução do dispositivo.

Ao renderizar imagens responsivas, não considere apenas a resolução; o tamanho da tela também é importante. Caso contrário, você pode acabar carregando desnecessariamente imagens grandes ou muito pixeladas.

<img srcset="cute-cat-high1-480w.jpg 1.5x,
            cute-cat-high2-640w.jpg 2x"
     src="cute-cat-low.jpg"
     alt="A cute cat">

Usando

é um elemento HTML que envolve vários elementos contendo diferentes arquivos de origem e um elemento . Embora torne as imagens responsivas ao exibir diferentes tamanhos da mesma imagem, permite que você realmente altere a imagem exibida.

Sintaxe:

<picture>
  <source media="" srcset="">
  <source media="" srcset="">
  <img src="" alt="">
</picture>

Considere uma situação em que você tem uma grande imagem de paisagem. A imagem é exibida e parece proporcional em um desktop, mas diminui significativamente em dispositivos móveis, de modo que os elementos da imagem ficam minúsculos. A imagem que não responde contribui para uma experiência ruim do usuário. Com você pode instruir seu navegador a mudar para uma imagem de retrato em close-up quando estiver no celular.

<picture>
  <source media="(max-width: 639px)" srcset="cute-cat-480w.jpg">
  <source media="(min-width: 640px)" srcset="cute-cat-640w.jpg">
  <img src="elva-640w.jpg" alt="A cute cat">
</picture>

Como na primeira abordagem, contém um atributo de mídia que pode ser usado para fornecer a condição de mídia. Por exemplo, o navegador exibirá “cute-cat-480w.jpg” se a largura da janela de visualização for 639px ou menos. O srcset contém o caminho do arquivo de imagem que você deseja exibir e src especifica a imagem padrão.

Fallback para formato de imagem WebP

Outra coisa que lida bem é fornecer um substituto para formatos de imagem modernos como WebP. As imagens WebP têm alto desempenho, são pequenas e oferecem uma experiência web rápida. Você pode, portanto, decidir usá-los em seus sites. Um desafio que você pode enfrentar é que nem todos os navegadores oferecem suporte a imagens WebP. Com , você não enfrenta esse problema, pois seu navegador pode carregar uma imagem alternativa se não suportar WebP.

<picture>
 <source type="image/webp" srcset="cute-cat.webp">
 <img src="cute-cat.jpg" alt="A cute cat.">
</picture>

Por que criar imagens responsivas em HTML e não em CSS?

CSS oferece opções robustas para lidar com imagens responsivas. Então por que não usá-lo? O navegador pré-carrega as imagens antes de analisar o CSS. Portanto, antes que o JavaScript do seu site detecte a largura da janela de visualização para fazer as alterações apropriadas nas imagens, as imagens originais já foram pré-carregadas. Devido a isso, é melhor lidar com imagens responsivas usando HTML.

Busque a melhor qualidade de imagem possível

Você viu como criar imagens responsivas em HTML usando > e neste artigo. Servir imagens responsivas geralmente envolve considerar o tamanho e a resolução da imagem em relação ao tamanho da exibição. Se feito de maneira errada, a qualidade da imagem pode ser prejudicada. Certifique-se de escolher uma imagem que ofereça usabilidade ideal usando o mínimo de recursos.