Pseudoelementos optimizados para la resolución

El uso de imágenes optimizadas para la resolución en pseudoelementos de CSS (como ::before o ::after) te permite agregar íconos decorativos o gráficos estructurales sin saturar tu HTML con nodos del DOM adicionales. Si combinas pseudoelementos con la función CSS image-set(), puedes proporcionarle al navegador varios formatos (como AVIF o WebP) y resoluciones (como 1x y 2x). El navegador elegirá automáticamente la imagen más óptima para las capacidades del dispositivo del usuario.

Implementación

Puedes usar la función image-set() directamente dentro de la propiedad content de un seudoelemento o dentro de su propiedad background-image (mientras configuras content: ""). Ten en cuenta que, si bien proporcionar el formato de imagen a través de type() y la resolución (como 1x o 2x) genera los mejores resultados, ambos argumentos son opcionales.

.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;
}

Estrategias de resguardo

En el caso de los navegadores más antiguos que no admiten la función image-set(), DEBES proporcionar una declaración de imagen estándar antes de la regla image-set(). Esta estrategia de mejora progresiva se basa en la naturaleza en cascada de CSS: se ignoran las reglas no admitidas.

.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
  );
}