Exibir imagens decorativas otimizadas

Recursos da Web: image-set()

O envio de imagens decorativas otimizadas via CSS melhora o desempenho percebido sem sacrificar a qualidade visual. Ao usar a função CSS image-set(), você pode fornecer ao navegador várias opções para uma única imagem de plano de fundo ou máscara. É possível especificar formatos modernos (como AVIF ou WebP) com resoluções diferentes (como 1x e 2x). O navegador vai selecionar dinamicamente a menor imagem compatível que oferece a densidade de pixels adequada para o dispositivo do usuário.

ATENÇÃO: se a imagem provavelmente for o elemento Largest Contentful Paint (LCP), como um banner principal grande, as imagens referenciadas no CSS usando image-set() não serão detectáveis pelo scanner de pré-carregamento do navegador. Isso pode atrasar significativamente o carregamento de imagens e prejudicar a LCP. Para candidatos à LCP, use uma tag HTML padrão <img> ou <picture> ou, como alternativa, pré-carregue a imagem usando a opção <link rel=preload> com um atributo media.

Implementação

A função image-set() é usada em qualquer lugar em que o CSS espera um valor <image>, mais comumente em background-image, content ou mask-image. Embora fornecer o formato da imagem via type() e a resolução (como 1x ou 2x) gere os melhores resultados, esses dois argumentos são opcionais. 

.gallery-item {
  /* Provide multiple resolutions and formats using image-set() */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.webp") type("image/webp") 1x,
    url("gallery-2x.webp") type("image/webp") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
  
  /* Standard decorative properties */
  background-size: cover;
  background-position: center;
}

Estratégias de fallback

Para navegadores mais antigos que não são compatíveis com a função image-set(), você PRECISA fornecer uma declaração de imagem padrão antes da regra image-set(). Essa estratégia de aprimoramento progressivo depende da natureza em cascata do CSS: as regras não compatíveis são ignoradas.

.gallery-item {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  background-image: url("gallery.jpg");
  
  /* Modern browsers will apply this and override the fallback */
  background-image: image-set(
    url("gallery.avif") type("image/avif") 1x,
    url("gallery-2x.avif") type("image/avif") 2x,
    url("gallery.jpg") type("image/jpeg") 1x,
    url("gallery-2x.jpg") type("image/jpeg") 2x
  );
}