Publica imágenes decorativas optimizadas

Proporcionar imágenes decorativas optimizadas a través de CSS mejora el rendimiento percibido sin sacrificar la calidad visual. Con la función de CSS image-set(), puedes proporcionarle al navegador varias opciones para una sola imagen de fondo o máscara. Puedes especificar formatos modernos (como AVIF o WebP) junto con diferentes resoluciones (como 1x y 2x). El navegador seleccionará de forma dinámica la imagen compatible más pequeña que proporcione la densidad de píxeles adecuada para el dispositivo del usuario.

PRECAUCIÓN: Si es probable que la imagen sea el elemento Largest Contentful Paint (LCP) (p.ej., un banner hero grande), ten en cuenta que el escáner de precarga del navegador no puede descubrir las imágenes a las que se hace referencia en CSS a través de image-set(). Esto puede retrasar significativamente la carga de imágenes y perjudicar el LCP. En el caso de los candidatos para la LCP, considera usar una etiqueta HTML <img> o <picture> estándar o, como alternativa, precargar la imagen con la opción <link rel=preload> con un atributo media.

Implementación

La función image-set() se usa en cualquier lugar donde CSS espera un valor <image>, con mayor frecuencia en background-image, content o mask-image. 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.

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

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.

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