El CSS image-set() La función ha sido compatible con navegadores basados en Chromium desde 2012 y en Safari desde la versión 6. Recientemente, el soporte llegó a Firefox 88. Vamos a sumergirnos y ver qué podemos y no podemos hacer hoy con image-set().
Varias resoluciones de la misma imagen
Esto es lo que dice la especificación CSS sobre image-set():
Ofrecer la resolución de imagen más adecuada para el dispositivo de un usuario puede resultar una tarea difícil. Idealmente, las imágenes deben tener la misma resolución que el dispositivo en el que se ven, lo que puede variar entre usuarios. Sin embargo, otros factores pueden influir en la decisión de qué imagen enviar; por ejemplo, si el usuario tiene una conexión móvil lenta, es posible que prefiera recibir imágenes de menor resolución en lugar de esperar a que se cargue una imagen grande con la resolución adecuada.
Es básicamente un fondo CSS equivalente al HTML. srcset atributo para img etiquetas Mediante el uso image-set podemos proporcionar múltiples resoluciones de una imagen y confiar en el navegador para tomar la mejor decisión sobre cuál usar. Esto se puede usar para especificar un valor para tres propiedades CSS diferentes: content, cursor, y lo más útil de todo, background-image.
.hero {
background-image: image-set("platypus.png" 1x, "platypus-2x.png" 2x);
}1x se utiliza para identificar la imagen de baja resolución, mientras que 2x se utiliza para definir la imagen de alta resolución. x es un alias de dppx, Lo que significa puntos por unidad de píxel.
Chrome / Edge / Opera / Samsung Internet actualmente requieren un -webkit- prefijo. Si está utilizando Autoprefixer, esto se manejará automáticamente. Safari ya no requiere el prefijo, pero usa una sintaxis anterior que requiere un url() función para especificar la ruta de la imagen. También podríamos incluir un antiguo background-image: url() para admitir navegadores que no admitan image-set.
.hero {
/* Fallback */
background-image: url("platypus.png");
/* Chrome/Edge/Opera/Samsung, Safari will fallback to this as well */
background-image: -webkit-image-set(url("platypus.png") 1x, url("platypus-2x.png") 2x);
/* Standard use */
background-image: image-set("platypus.png" 1x, "platypus-2x.png" 2x);
}Ahora los usuarios de dispositivos caros y sofisticados verán una imagen súper nítida. Se mejorará el rendimiento para los usuarios con conexiones lentas o con pantallas más baratas, ya que su navegador solicitará automáticamente la imagen de menor resolución. Si desea estar seguro de que la imagen de alta resolución se utiliza en dispositivos de alta resolución, incluso en conexiones lentas, puede utilizar la min-resolution consulta de medios en lugar de image-set. Para obtener más información sobre cómo ofrecer imágenes nítidas en pantallas de alta densidad, consulte la publicación reciente de Jake Archibald en su blog.
Eso es muy bueno, pero lo que realmente quiero es poder adoptar los últimos formatos de imagen en CSS sin dejar de atender a los navegadores más antiguos …
Nuevos formatos de imagen
Safari 14 envió soporte para WebP. Fue el último navegador moderno en hacerlo, lo que significa que el formato de imagen ahora es compatible en todas partes (excepto en Internet Explorer). WebP es útil porque puede crear imágenes que a menudo son más pequeñas (pero de la misma calidad) que JPG, PNG o GIF.
También están apareciendo un montón de formatos de imagen aún más nuevos. Las imágenes AVIF son sorprendentemente pequeñas. Chrome, Opera y Samsung Internet ya han enviado soporte para AVIF. Ya está en Firefox detrás de una bandera. Este formato de imagen aún no es compatible con muchas herramientas de diseño, pero puede convertir imágenes a AVIF utilizando la aplicación Squoosh creada por el equipo de Chrome en Google. WebP 2, HEIF y JPEG XL también podrían convertirse en navegadores eventualmente. Todo esto es bastante emocionante, pero queremos que los navegadores que no son compatibles con estos formatos más nuevos obtengan algunas imágenes. por suerte image-set() tiene una sintaxis para eso.
Usar nuevos formatos de imagen especificando un tipo
Nota de soporte del navegador: La característica de image-set del que estoy a punto de hablar actualmente tiene un soporte de navegador bastante terrible. Actualmente solo es compatible con Firefox 89.
HTML ha admitido el <picture> elemento desde hace años.
<picture>
<source type="image/avif">
<img src="https://css-tricks.com/using-performant-next-gen-images-in-css-with-image-set/./kitten.jpg" alt="a small kitten">
</picture>image-set proporciona el equivalente de CSS, lo que permite el uso de formatos de imagen de próxima generación al especificar el tipo MIME de la imagen:
.div1 {
background-image: image-set(
"kitten.avif" type("image/avif"),
"kitten.jpg" type("image/jpeg")
);
}La imagen de próxima generación va primero, mientras que la imagen alternativa para los navegadores más antiguos va en segundo lugar. Solo se descargará una imagen. Si el navegador no es compatible con AVIF, lo ignorará y solo descargará la segunda imagen que especifique. Si se admite AVIF, la imagen alternativa se ignora.
En el ejemplo anterior, usamos una imagen AVIF y proporcionamos un JPEG como respaldo, pero el respaldo podría ser cualquier formato de imagen ampliamente admitido. Aquí hay un ejemplo usando un PNG.
.div2 {
background-image: image-set(
"puppy.webp" type("image/webp"),
"puppy.png" type("image/png")
);
}En Chromium y Safari, especificando el type aún no es compatible. Eso significa que puedes usar image-set hoy solo para especificar diferentes resoluciones de formatos de imagen ampliamente admitidos, pero no para agregar compatibilidad con versiones anteriores cuando se usa WebP o AVIF en esos navegadores. Debería ser posible proporcionar múltiples resoluciones y múltiples formatos de imagen, si así lo desea:
.div2 {
background-image: image-set(
"puppy.webp" type("image/webp") 1x,
"puppy2x.webp" type("image/webp") 2x,
"puppy.png" type("image/png") 1x,
"puppy2x.png" type("image/png") 2x
);
}Con suerte, la compatibilidad con el navegador mejorará pronto.
Utilizando <picture> para fondos en su lugar
Tal vez no necesites background-image en absoluto. Si desea utilizar formatos de imagen modernos, es posible que pueda utilizar el <picture> elemento, que tiene una mejor compatibilidad con el navegador. Si configura la imagen en position: absolute es fácil mostrar otros elementos encima.
Como enfoque alternativo al uso position: absolute, La cuadrícula CSS es otra forma fácil de superponer elementos HTML.