Imagens responsivas

O texto na Web é ajustado automaticamente na borda da tela para não transbordar. As imagens, por outro lado, têm um tamanho intrínseco. Se uma imagem for mais larga que a tela, ela vai transbordar, e o usuário precisará rolar horizontalmente para ver tudo.

Felizmente, o CSS oferece ferramentas para evitar que isso aconteça.

Restringir suas imagens

Na sua folha de estilo, você pode usar max-inline-size para declarar que as imagens nunca podem ser renderizadas em um tamanho maior do que o elemento que as contém.

img {
  max-inline-size: 100%;
  block-size: auto;
}

Você pode aplicar a mesma regra a outros tipos de conteúdo incorporado, como vídeos e iframes.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

Com essa regra, os navegadores reduzem automaticamente as imagens para caber na tela.

Adicionar um valor block-size de auto significa que o navegador preserva a proporção das imagens ao redimensioná-las.

Às vezes, as dimensões de uma imagem são definidas por um sistema de gerenciamento de conteúdo (CMS) ou outro sistema de fornecimento de conteúdo. Se o design exigir uma proporção diferente da padrão do CMS, use a propriedade aspect-ratio para preservar o design do site:

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

Infelizmente, isso geralmente significa que o navegador precisa achatar ou esticar a imagem para que ela caiba no espaço pretendido.

Para evitar o achatamento e o esticamento, use a propriedade object-fit.

Um valor object-fit de contain informa ao navegador para preservar a proporção da imagem, deixando espaço vazio ao redor dela, se necessário.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

Um valor object-fit de cover informa ao navegador para preservar a proporção da imagem, cortando-a se necessário.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

É possível mudar a posição do corte da imagem usando a propriedade object-position. Isso ajusta o foco do corte para que a parte mais importante da imagem ainda fique visível.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

Entregar suas imagens

Essas regras de CSS informam ao navegador como você quer que as imagens sejam renderizadas. Você também pode fornecer dicas no HTML sobre como o navegador deve processar essas imagens.

Dicas para dimensionamento

Se você souber as dimensões da imagem, sempre inclua os atributos width e height. Mesmo que a imagem seja renderizada em um tamanho diferente devido à sua regra max-inline-size, o navegador ainda sabe a proporção largura/altura e pode reservar a quantidade certa de espaço. Isso evita que o restante do conteúdo fique pulando quando a imagem é carregada.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

Dicas para carregamento

Use o atributo loading para informar ao navegador se ele deve atrasar o carregamento da imagem até que ela esteja na janela de visualização ou perto dela. Para imagens abaixo da dobra, use um valor de lazy. O navegador não carrega imagens lentas até que o usuário role a tela para baixo o suficiente para que a imagem esteja prestes a aparecer. Se o usuário nunca rolar a tela, a imagem nunca será carregada.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

Para uma imagem principal acima da dobra, não use loading. Se o site aplicar automaticamente o atributo loading="lazy", geralmente é possível definir loading como o valor padrão eager para evitar o carregamento lento de imagens:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

Prioridade de busca

Para imagens importantes, como a LCP, você pode priorizar ainda mais o carregamento usando a Prioridade de busca ao definir o atributo fetchpriority como high:

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

Isso diz ao navegador para buscar a imagem imediatamente e com alta prioridade, em vez de esperar até que o navegador termine o layout e busque imagens normalmente.

No entanto, quando você pede ao navegador para priorizar o download de um recurso, como uma imagem, ele precisa reduzir a prioridade de outro recurso, como um script ou um arquivo de fonte. Defina fetchpriority="high" em uma imagem apenas se for realmente vital.

Dicas para pré-carregamento

É melhor evitar o pré-carregamento sempre que possível, incluindo todas as imagens no arquivo HTML inicial. No entanto, algumas imagens podem não estar disponíveis, como as adicionadas por JavaScript ou uma imagem de plano de fundo em CSS.

Você pode usar o pré-carregamento para fazer com que o navegador busque essas imagens importantes com antecedência. Para imagens realmente importantes, você pode combinar esse pré-carregamento com o atributo fetchpriority:

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

Use esses atributos com moderação para evitar substituir as heurísticas de priorização do navegador com muita frequência. O uso excessivo pode causar degradação do desempenho.

Alguns navegadores oferecem suporte ao pré-carregamento de imagens responsivas com base em srcset, usando os atributos imagesrcset e imagesizes. Exemplo:

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

Ao excluir o retorno href, você garante que os navegadores sem suporte a srcset ainda pré-carreguem a imagem correta.

Não é possível pré-carregar imagens em formatos diferentes com base no suporte do navegador a determinados formatos. Isso pode resultar em downloads extras que desperdiçam os dados dos usuários.

Imagens responsivas com srcset

Graças a essa declaração max-inline-size: 100%, as imagens não podem sair dos contêineres. No entanto, se um usuário tiver uma tela pequena e uma rede de baixa largura de banda, fazer com que ele baixe imagens do mesmo tamanho que usuários com telas maiores desperdiça dados.

Para corrigir esse problema, adicione várias versões da mesma imagem em tamanhos diferentes e use o atributo srcset para informar ao navegador que esses tamanhos existem e quando usá-los.

Descritor de largura

É possível definir um srcset usando uma lista de valores separados por vírgulas. Cada valor é o URL de uma imagem, seguido por um espaço e alguns metadados sobre a imagem, chamado de descritor.

Neste exemplo, os metadados descrevem a largura de cada imagem usando a unidade w. Um w é a largura de um pixel.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

O atributo srcset complementa o atributo src em vez de substituí-lo. Você ainda precisa ter um atributo src válido, mas o navegador pode substituir o valor dele por uma das opções listadas no srcset. Para economizar largura de banda, o navegador só faz o download da imagem maior se ela for necessária.

Tamanhos

Se você estiver usando o descritor de largura, também precisará usar o atributo sizes para dar mais informações ao navegador. Isso informa ao navegador o tamanho em que você espera que a imagem seja exibida em diferentes condições. Essas condições são especificadas em uma media query.

O atributo sizes usa uma lista separada por vírgulas de consultas de mídia e larguras de imagem.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

Neste exemplo, você está dizendo ao navegador que, em uma janela de visualização com largura superior a 66em, ele deve mostrar a imagem com largura não superior a um terço da tela (em um layout de três colunas, por exemplo).

Para larguras de janela de visualização entre 44em e 66em, mostre a imagem na metade da largura da tela (como em um layout de duas colunas).

Para qualquer coisa mais estreita que 44em, mostre a imagem na largura total da tela.

Isso significa que a imagem maior não será necessariamente usada na tela mais larga. Uma janela de navegador ampla que pode mostrar um layout de várias colunas usa uma imagem que cabe em uma coluna, que pode ser menor do que uma imagem usada para um layout de coluna única em uma tela mais estreita.

Descritor de densidade de pixels

Você também pode usar descritores para fornecer uma versão alternativa de imagens para mostrar em telas de alta densidade e manter a nitidez das imagens nas resoluções mais altas que elas oferecem.

Use o descritor de densidade para descrever a densidade de pixels da imagem em relação à imagem no atributo src. O descritor de densidade é um número seguido pela letra x, como em 1x ou 2x.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

Se small-image.png tiver 300 x 200 pixels e medium-image.png tiver 600 x 400 pixels, medium-image.png poderá ter 2x depois dele na lista srcset.

Não é necessário usar números inteiros. Se outra versão da imagem tiver 450 por 300 pixels, descreva-a com 1.5x.

Imagens de apresentação

As imagens em HTML são conteúdo. Por isso, inclua o atributo alt com uma descrição da imagem para leitores de tela e mecanismos de pesquisa.

Se você incorporar uma imagem decorativa, sem conteúdo significativo, use um atributo alt vazio.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

Sempre inclua o atributo alt, mesmo que ele esteja vazio. Um atributo alt vazio informa ao leitor de tela que a imagem é apenas para apresentação. Um atributo alt ausente não fornece essas informações.

O ideal é que as imagens de apresentação ou decorativas sejam incluídas com CSS em vez de HTML. O HTML é para estrutura. O CSS é para apresentação.

Imagens de plano de fundo

Use a propriedade background-image em CSS para carregar imagens de apresentação.

element {
  background-image: url(flourish.png);
}

É possível especificar vários candidatos a imagem usando a função image-set para background-image.

A função image-set em CSS funciona de maneira muito parecida com o atributo srcset em HTML. Forneça uma lista de imagens com um descritor de densidade de pixels para cada uma.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

O navegador escolhe a imagem mais adequada para a densidade de pixels do dispositivo.

Há muitos fatores a serem considerados ao adicionar imagens ao seu site, incluindo:

• Reservar o espaço certo para cada imagem.
• Descobrir quantos tamanhos você precisa.
• Decidir se a imagem é conteúdo ou decorativa.

Vale a pena dedicar tempo para deixar as imagens certas. Estratégias ruins de imagens podem irritar e frustrar os usuários. Uma boa estratégia de imagens faz com que seu site pareça rápido e nítido, independente do dispositivo ou da conexão de rede do usuário.

Há mais um elemento HTML no seu kit de ferramentas para dar mais controle sobre as imagens: o elemento picture.

Teste seu conhecimento

Teste seus conhecimentos sobre imagens.