Imagens em HTML ou imagens de fundo em CSS: quando usar cada uma | We.Inc
Escolha entre <img> e background-image, escreva texto alternativo, evite mudança de layout, monte srcset e sizes, use lazy-load e sirva WebP ou AVIF com <picture>.
Imagens em HTML e imagens de fundo em CSS
Use um <img> quando a imagem é conteúdo: uma foto de produto, um gráfico, um retrato. Dê a ele texto alternativo, width e height. Use um background-image em CSS quando a imagem é decoração atrás de um texto. Adicione srcset e sizes para que celulares baixem arquivos menores, e loading="lazy" para imagens abaixo da primeira tela, nunca para a imagem principal.
<img> ou background-image?
Pergunta
<img>
A imagem carrega significado?
Sim, com texto alternativo
Não, só decoração
Os buscadores devem indexá-la?
Sim
Raramente é captada
Arquivos responsivos
srcset e sizes
image-set() ou media queries
Lazy loading
loading="lazy"
Exige script
Recortar para preencher uma caixa
object-fit: cover
background-size: cover
Impressa por padrão
Sim
Geralmente não
Uma tabela de decisão, um gerador de srcset que mostra qual arquivo um celular ou notebook baixaria e exemplos editáveis de cada padrão: texto alternativo, dimensões fixas, lazy loading, uma imagem principal rápida, recorte com object-fit ao lado de background-size, formatos modernos com <picture> e fundos responsivos com image-set().
Comece pela tabela de decisão para escolher entre um <img> e um fundo em CSS.
Se usar <img>, informe as larguras das suas imagens no gerador de srcset e escolha o layout. Copie a tag gerada.
Mova os controles de largura de tela e densidade de pixels para ver qual arquivo o navegador escolheria em cada dispositivo.
Copie qualquer outro padrão que precisar dos exemplos, todos renderizados ao vivo ao lado do código.
Sempre defina os atributos width e height com o tamanho real da imagem em pixels. O CSS ainda pode redimensioná-la; os atributos deixam o navegador reservar o espaço certo antes de o arquivo chegar.
Marque a maior imagem da primeira tela com fetchpriority="high" e deixe-a eager. Usar lazy-load nessa imagem atrasa a maior pintura da página.
Deixe o alt vazio (alt="") em imagens puramente decorativas para que os leitores de tela as pulem, em vez de omitir o alt, o que faz alguns leitores anunciarem o nome do arquivo.
Exporte as fotos em duas ou três larguras, como 480, 960 e 1600 pixels. Mais tamanhos raramente ajudam e deixam os builds mais lentos.
Perguntas frequentes
background-image é ruim para SEO?
Os buscadores indexam imagens encontradas em elementos <img> de forma muito mais confiável do que as definidas no CSS. Se você quer que uma imagem apareça na busca de imagens ou descreva o seu conteúdo, coloque-a em um <img> com um bom texto alternativo. Fundos decorativos não perdem nada por estar no CSS.
O que o texto alternativo deve dizer?
Diga o que a imagem mostra de relevante naquele contexto, em uma frase curta. Para uma foto de produto, pode ser o produto e a sua cor; para um gráfico, a conclusão principal. Evite expressões como imagem de. Se a imagem for um link, descreva para onde o link leva.
Qual é a diferença entre srcset com w e com x?
Descritores de largura (480w, 960w) listam a largura real de cada arquivo e deixam o navegador escolher usando o atributo sizes e a densidade de pixels da tela. Descritores de densidade (1x, 2x) servem para imagens sempre exibidas em um único tamanho fixo, como um logo.
Ainda devo usar loading="lazy" se uso um framework?
O lazy loading nativo funciona em todos os principais navegadores atuais, então um atributo simples basta para a maioria das imagens. Componentes de imagem de frameworks muitas vezes o adicionam por você; confira se eles não aplicam lazy-load também na imagem principal.
Preciso de WebP e AVIF ao mesmo tempo?
Nem sempre. Os dois formatos têm suporte nos principais navegadores atuais. O AVIF costuma ser menor para fotos, mas é mais lento para codificar. Um elemento <picture> com uma fonte AVIF, uma fonte WebP e um JPEG de reserva atende todo mundo, mas só WebP com um JPEG de reserva é uma escolha mais simples e razoável.
Conteúdo ou decoração
A pergunta que resolve a maioria das decisões sobre imagens é se um visitante perderia informação caso a imagem não carregasse. Uma foto da equipe na página sobre, uma captura de tela em um tutorial e uma foto de produto em uma loja carregam significado, então pertencem ao HTML com texto alternativo.
Uma textura desfocada atrás de um título, um padrão em um rodapé ou uma foto que só cria clima podem ficar no CSS. Isso mantém o HTML limpo e permite trocar a imagem por tamanho de tela sem mexer na marcação. Se houver texto por cima, garanta que ele continue legível quando a imagem faltar, definindo também uma cor de fundo.
Como o navegador escolhe no srcset
Com descritores de largura, o navegador primeiro lê o sizes para saber com que largura a imagem será desenhada, por exemplo 100vw em celulares e 50vw em telas mais largas. Ele multiplica isso pela proporção de pixels do dispositivo e escolhe o menor arquivo com pelo menos essa largura. Os navegadores também podem escolher um arquivo menor em uma conexão lenta ou um maior que já esteja em cache.
Acertar o sizes importa mais do que adicionar mais larguras. Se o sizes diz 100vw, mas a imagem só ocupa um terço da tela no desktop, o navegador baixa um arquivo três vezes largo demais.
Mudança de layout e a imagem principal
Quando uma imagem sem dimensões carrega, tudo abaixo dela pula para baixo. Os atributos width e height deixam o navegador calcular a proporção de antemão, o que elimina esse pulo e melhora o Cumulative Layout Shift.
A imagem principal costuma ser o elemento de Largest Contentful Paint. Mantenha-a eager, dê a ela fetchpriority="high", sirva-a do seu próprio domínio ou de um host de imagens rápido e evite escondê-la atrás de um script que a define depois.
Um <img> completo
alt, width, height e lazy loading
Os atributos dão o tamanho real; o CSS a torna fluida. Por causa de width e height, a caixa é reservada antes de o arquivo carregar. As imagens da demo são pequenos SVGs inline.
A imagem principal: eager e alta prioridade
Use isso na única imagem grande no topo da página. Tudo abaixo da primeira tela recebe loading="lazy" em vez disso.
Regras de texto alternativo
Texto alternativo por tipo de imagem
Imagem
Foto de produto
Descreva o item e o detalhe que importa: Mesa lateral de carvalho com duas gavetas
Gráfico ou diagrama
Diga a conclusão: As vendas dobraram entre março e junho
Imagem que é um link
Diga o destino: Início
Padrão decorativo ou divisor
Vazio: alt=""
Foto com a mesma legenda ao lado
Vazio, ou um rótulo curto, para não ser lido duas vezes
Texto dentro de uma imagem
O mesmo texto
object-fit: cover ao lado de background-size: cover
Os dois recortam uma imagem para preencher uma caixa sem esticá-la. object-position e background-position escolhem qual parte fica visível.
O mesmo recorte, de duas formas
À esquerda, um <img> com object-fit; à direita, uma div com fundo. Ficam iguais; só a da esquerda tem texto alternativo e lazy loading.
Imagens de fundo em CSS
Um fundo atrás de um texto, com cor de reserva
O gradiente escuro sobreposto mantém o texto branco legível em qualquer foto, e a cor de fundo aparece se a imagem falhar.
Fundos responsivos com image-set()
image-set() deixa o navegador escolher pela densidade de pixels ou pelo tipo de arquivo. Mantenha uma linha url() simples primeiro para navegadores antigos.
WebP e AVIF com <picture>
Formatos modernos com um JPEG de reserva
O navegador usa o primeiro <source> cujo type ele suporta. O <img> dentro dele carrega o texto alternativo, o tamanho e o arquivo de reserva, e é o elemento que você estiliza.
Largura total em todas as telas
Largura total no celular, metade a partir de 768px
Grade de cards: 1, 2 ou 3 colunas
Coluna de conteúdo limitada a 720px
Gerador de srcset e sizes
Larguras que você exporta (px)
Caminho do arquivo sem a largura
Extensão
Com que largura a imagem é desenhada?
Informe pelo menos uma largura.
Copiar
Qual arquivo um dispositivo baixaria?
Celular pequeno
Celular grande
Tablet
Notebook
Notebook Retina
Largura da tela: {vw}px
Densidade de pixels: {dpr}x
A imagem é desenhada com {slot}px de largura, então o navegador precisa de cerca de {px} pixels do dispositivo e normalmente baixaria
nada ainda
(o maior arquivo, que é menor que o ideal: considere exportar um mais largo)
Os navegadores podem escolher um arquivo menor em uma conexão lenta ou um maior que já tenham em cache; isto mostra a escolha habitual.