Um guia para iniciantes para imagens responsivas em HTML

Uma imagem responsiva é uma imagem que se adapta a 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 de imagem.

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 só acessavam a web de desktops ou laptops. Claro, isso não é verdade hoje.

De acordo com Estatista, mais de 90% da população global da Internet acessa a Internet usando seu telefone celular. 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: veiculando a mesma imagem com tamanhos diferentes ou veiculando 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 do conjunto de regras.

Relacionado: Como tornar seu site responsivo e interativo com CSS e JavaScript

Usando srcset

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

Sintaxe:

srcset permite que você forneça arquivos de origem adicionais, e o navegador escolherá a imagem que parece ideal para esse tamanho de imagem.

 src="cute-cat.jpg"
 alt="Um gato fofo">

srcset é composto de três partes: O nome do arquivo de 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

A questão de usar srcset é que você não tem controle de qual imagem o navegador escolherá para exibir. Combinando srcset com tamanhos resolve este problema. tamanhos defina um conjunto de condições de mídia que indiquem a imagem com o tamanho ideal.

Agora você pode reescrever o etiqueta acima da seguinte forma.

size="(max-width: 600px) 480px,
 800px"
 src="cute-cat.jpg"
 alt="Um gato fofo">

tamanhos é composto por uma condição de mídia, neste exemplo é (max-width: 600px) que representa a viewport largura, espaço e largura do slot (480px) especificando o espaço que a imagem preencherá se a condição da mídia for verdadeiro.

Relacionado: Como usar consultas de mídia em HTML e CSS para criar sites responsivos

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

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

srcset também permite que você sirva imagens em diferentes resoluções usando descritores x.

 src="cute-cat-low.jpg"
 alt="Um gato fofo">

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

Pixels de hardware e software

O problema dessa solução é que as imagens são responsivas apenas em termos de densidade de pixels do dispositivo. Esta é a proporção dos pixels de hardware para os pixels de software ou CSS. Um pixel de hardware é o ponto de luz real 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 imagens muito pixelizadas.

 src="cute-cat-low.jpg"
 alt="Um gato fofo">

Usando

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

Sintaxe:

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 se tornam minúsculos. A imagem não responsiva contribui para uma experiência ruim do usuário. Com você pode dizer ao seu navegador para mudar para uma imagem de retrato em close-up quando estiver no celular.

Como na primeira abordagem, contém um atributo de mídia que você pode usar para fornecer a condição de mídia. Por exemplo, o navegador exibirá o “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.

Relacionado: 7 novos recursos CSS para criar um site responsivo

Fallback para o formato de imagem WebP

Outra coisa que lida bem está fornecendo 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 suportam imagens WebP. Com, você não enfrentará esse problema, pois seu navegador poderá carregar uma imagem alternativa se não for compatível com WebP.

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.

Apontar para a melhor qualidade de imagem possível

Você viu como pode criar imagens responsivas em HTML usando > e neste artigo. A veiculação de imagens responsivas geralmente envolve considerar o tamanho da imagem e a resolução da imagem em relação ao tamanho da tela. Se feito de forma errada, a qualidade da imagem pode sofrer. Certifique-se de escolher uma imagem que forneça usabilidade ideal usando o menor número de recursos.

Princípios de Web Design Responsivo

Os web designers defendem o design responsivo há anos, mas o que é e como ele pode produzir páginas da web superiores?

Leia a seguir

Sobre o autor