Imagens de fundo são malignas

Aprenda por que evitar imagens de fundo no seu site, como encontrar rapidamente imagens de fundo e como corrigir este problema

Arjen Karel - linkedin

Last update: 2024-11-27

Imagens de fundo são malignas

Aqueles de vocês que me conhecem ou me ouviram palestrar podem ter me ouvido falar sobre imagens de fundo. Aqueles que não: eu realmente não gosto de imagens de fundo. Neste artigo vou explicar rapidamente por que não gosto de imagens de fundo, como encontrar rapidamente páginas com imagens de fundo e como corrigi-las!

Table of Contents!

Imagens de fundo são malignas
Por que imagens de fundo são ruins para os Core Web Vitals
- Considere este exemplo real:
- Mas isso não é tudo!
Encontre rapidamente todas as imagens de fundo em uma página
Como evitar imagens de fundo
- No caso de 'imagens normais'
- No caso de imagens de cobertura:

Por que imagens de fundo são ruins para os Core Web Vitals

Ao carregar uma página web, cada elemento tem o seu tempo e o seu lugar. Com algumas técnicas modernas como deferring, preloading, async loading, scheduling, definição de fetchpriority etc etc, podemos ter todos os recursos críticos praticamente sob controle. Exceto as imagens de fundo!

Considere este exemplo real:

Diariamente, principalmente em sites WordPress, vejo este padrão. Todas as imagens normais são carregadas com lazy loading e algumas imagens (neste caso os ícones sociais no rodapé) são imagens de fundo. Consegue adivinhar o que acontece?

<html>
<head>
    <style>
        footer {
            /* a margin of 100 vh wil make the footer off-screen !*/
            margin-top: 100vh;
            >.social {
                >.facebook {background-image: url('img/facebook.jpg');}
                >.instagram {background-image: url('img/instagram.jpg');}
                >.linkedin {background-image: url('img/linkedin.jpg');}
                >.email {background-image: url('img/email.jpg');}
            }
        }
    </style>
</head>
<body>
    <!-- yes this image is lazy loaded, because tiny mistakes happen! -->
    <img loading="lazy" src="img/hero.jpg"></img>
    <footer>
        <div class="social">
            <span class="facebook"></span>
            <span class="instagram"></span>
            <span class="linkedin"></span>
            <span class="email"></divspan
        </div>
    </footer>
</body>
</html>

Provavelmente já adivinhou: as imagens de fundo fora da tela são colocadas na fila de download antes da imagem 'hero.jpg' muito mais importante que normalmente se tornará o elemento de Largest Contentful Paint da página.

Mas isso não é tudo!

Como eu disse, imagens de fundo são malignas! Isso porque, além da prioridade estranha que às vezes recebem, as imagens de fundo não têm as funcionalidades legais que as imagens normais têm!

Sem lazy loading: não existe atributo loading para imagens de fundo
Sem decodificação assíncrona: não existe atributo decoding para imagens de fundo
Sem fetchpriority: não existe atributo fetchpriority para imagens de fundo
Fontes de imagem responsivas: O atributo image-set() para imagens de fundo não tem o mesmo poder de funcionalidades que você obtém com um bom design responsivo.
Sem atributo de largura e altura. Não poder definir o simples atributo de largura e altura fará com que você use soluções alternativas que requerem código (mais código é sempre mais lento que menos código com a mesma complexidade!)
Sem texto alt: embora isso n

Encontre rapidamente todas as imagens de fundo em uma página

Então como descobrimos se uma página web tem imagens de fundo? Bem, você poderia verificar o inspetor de rede, filtrar por imagens, clicar com o botão direito na barra de menu, habilitar a coluna de initiator e verificar o initiator, mas é muito mais fácil colar este código no console de desenvolvimento.

Simplesmente abra o console de desenvolvimento com Ctrl-Shift-I, navegue até a aba console e cole este código. Ele mostrará todas as imagens de fundo na página

let bgimg = performance.getEntriesByType('resource')
  .filter(rs => rs.initiatorType == 'css')
  .map(rs => {
  return {
    name: rs.name,
    initiator: rs.initiatorType
  }
}) || [];

(bgimg.length > 0)?
    console.table(bgimg):
    console.log('No background images on this page!');

Isso mostrará uma tabela formatada de forma limpa com todos os nomes das imagens de fundo e os initiators

Como evitar imagens de fundo

Imagens de fundo são facilmente evitáveis. Como fazer isso depende da própria imagem. Existem basicamente 2 métodos.

No caso de 'imagens normais'

Você não acreditaria se eu dissesse, mas na maioria dos casos em que encontro imagens de fundo, a parte de fundo da imagem nem sequer tem um propósito. As imagens apenas 'precisam estar em algum lugar na página' e o background-image:url() é usado indevidamente para este propósito.
Se este for o caso, basta adicionar uma tag de imagem normal e remover a imagem de fundo da folha de estilos.

No caso de imagens de cobertura:

Imagens de cobertura são imagens que cobrem completamente um contêiner pai. Usar imagens de fundo como imagens de cobertura faz algum sentido porque há muito tempo esta era a única forma de obter imagens de cobertura e suponho que as pessoas simplesmente mantêm o que conhecem. Felizmente, existem opções melhores disponíveis para nós. Então vamos corrigir isso!
No caso de imagens de cobertura, basta remover o estilo background-image: url(hero.jpg); background-size: cover;e colocar uma imagem normal nesse mesmo contêiner e editar o CSS para ficar assim:

<style>
.img-container {
    position: relative;
    > img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       position: absolute;
       z-index: 1;
   }
}
<style>

<div class="img-container">
  <img 
       height="500" 
       width="300" 
       decoding="async" 
       loading="lazy" 
       src="hero.jpg"
       srcset="hero-320w.jpg, hero-480w.jpg 1.5x"
       alt="alt text"
       fetchpriority="low"
  >
</div>