Otimizando performance do site com background image-set()

Neste artigo vamos falar sobre uma notação para propriedades muito poderosas do CSS, a image-set() ela foi introduzida já a um bom tempo, mas os navegadores nunca deram um suporte apropriado. A sua funcionalidade é basicamente criar lista de imagens para o navegador decidir qual é o formato apropriado para carregamento.

Outras palavras, ela pode ser um forte aliado para melhorar o tempo de carregamento da sua imagem LCP. Como isso é possível? A resposta é simples, caso tenhamos uma imagem de background como a nossa imagem de LCP. Podemos utilizar formatos modernos sem medo de que o usuário não tenha suporte no seu navegador e também definir um tamanho específico para dispositivos móveis, assim reduzindo bastante o tamanho total da sua imagem LCP.

Como image-set() funciona?

A função image-set() fornece a resolução e formato de imagem mais apropriada para o dispositivo de um usuário, fornecendo um conjunto de imagens alternativas, assim o navegador decide carregar a imagem mais adequada.

background-image: image-set( "bg.png" 1x,
                             "bg-2x.png" 2x,
                             "bg-print.png" 600dpi );Code language: CSS (css)

No código acima, cada declaração passamos o endereço da nossa imagem e a resolução 1x e 2x, referentes a pontos por pixel e o último valor com a unidade de DPI específico para impressão.

Além disso, podemos incluir variações por formato de arquivo:

background-image: image-set(
  url("image1.avif") type("image/avif"),
  url("image2.jpg") type("image/jpeg")
);Code language: PHP (php)

No exemplo anterior, agora temos a disponibilidade de duas versões avif e jpeg da mesma imagem, mas apenas uma será carregada pelo navegador. Para passar o formato da imagem precisamos passar o formato MIME da nossa imagem:

image/jpeg
image/png
image/webp
image/avif

Com isso o navegador pode verificar qual formato ele tem suporte. Isso pode ser um ganho muito importante referente a performance, pois um arquivo PNG pode ser reduzido em até 90% quando passado para AVIF. Então sempre quando possível utilize formato modernos para imagens.

Trabalhado com gradiente

Também temos a possibilidade de trabalhar com variações de gradiente.

background-image: image-set(
  linear-gradient(blue, white) 1x,
  linear-gradient(blue, green) 2x
);Code language: JavaScript (javascript)

Também podemos realizar variações entre gradientes e imagens:

background-image: image-set(
  linear-gradient(blue, white) 1x,
  "bg-2x.png" 2x,
);Code language: JavaScript (javascript)

Suporte para a funcionalidade de image-set()

Anteriormente Safari e Firefox já disponibilizavam suporte para esse recurso, mas o Chrome era o único navegador que tinha suporte parcial. Além do suporte atrás de um prefixo, a especificação não era seguida completamente.

Agora na versão 113 do Chrome o recurso passou a ter suporte completo ao image-set(), assim com essa nova adição mais de 90% dos navegadores tem suporte a este recurso.

Chrome carregando image-set sem a necessidade de prefixo na versão 113

Fallback para navegadores antigos

Para navegadores antigos que não suportam o image set podemos utilizar o seguinte fallback:

.hero-block {
  background-image: url("bg.jpg");
  background-image: image-set(
    "bg.avif" type("image/avif"),
    "bg.jpg" type("image/jpeg")
  );
}Code language: CSS (css)

O que irá acontecer no código anterior, caso o navegador não tenha suporte a image-set ele irá ignorar a linha seguinte, mas isso será para um grupo muito pequeno de navegadores.

Como podemos ver, nesse exemplo a linha seguinte é ignorada pelo navegador, assim a primeira definição será considerada

Conclusão

Image set foi um dos recursos que eu votei para ter melhorias em 2023 no repositório do interop, principalmente pelo fato que esse pode ser um recurso muito útil principalmente para CMSs como o WordPress que alguns casos a imagem de LCP é definida pelo block cover image que utiliza imagem de background, e atualmente só uma imagem é definida para mobile e desktop.

Isso seria outro ponto para especificar no image-set a resolução do viewport assim como temos com picture. Mas o suporte desse recurso cross-browser já é uma vitória.

Outro ponto de atenção quando trabalhamos com imagens é que imagens incluídas no background de elementos não são anunciadas por leitores de telas. Então é um ponto de atenção referente a acessibilidade da nossa aplicação.

Para mais posts sobre CSS confira os links: