Pseudoelementos otimizados para resolução

O uso de imagens com resolução otimizada em pseudoelementos CSS (como ::before ou ::after) permite adicionar ícones decorativos ou gráficos estruturais sem sobrecarregar o HTML com nós DOM extras. Ao combinar pseudoelementos com a função CSS image-set(), você pode fornecer ao navegador vários formatos (como AVIF ou WebP) e resoluções (como 1x e 2x). O navegador vai escolher automaticamente a imagem mais adequada para os recursos do dispositivo do usuário.

Implementação

É possível usar a função image-set() diretamente na propriedade content de um pseudoelemento ou na propriedade background-image (ao definir content: ""). 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.

.icon-button::before {
  /* Using image-set directly in the content property */
  /* MANDATORY: Always order your formats from most optimized (AVIF) to least optimized (JPEG/PNG). 
     The browser will stop at the first supported format. */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.webp") type("image/webp") 1x,
    url("icon-2x.webp") type("image/webp") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
  
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

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.

.icon-button::before {
  /* MANDATORY: Fallback for browsers that do not support image-set() */
  content: url("icon.png");
  
  /* Modern browsers will apply this and override the fallback */
  content: image-set(
    url("icon.avif") type("image/avif") 1x,
    url("icon-2x.avif") type("image/avif") 2x,
    url("icon.png") type("image/png") 1x,
    url("icon-2x.png") type("image/png") 2x
  );
}