image-set


image-set es un método que sirve para servir la imagen correcta dependiendo la resolución del dispositivo del usuario.

.image {
    background-image: image-set(
      url("./images/image.jpg") 1x,
      url("./images/[email protected]") 2x
    );
}
Puedes usar mydevice para obtener información sobre tu dispositivo actual.

El @2x.jpg solo es una forma de denotar variantes de imágenes de alta resolución. Para pantallas con resolución estándar se usa image.jpg, para pantallas con mayor resolución [email protected].

Cuanto más alta sea la resolución, mayor será la densidad de píxeles de la pantalla. Como resultado, las pantallas de alta resolución requieren imágenes con más píxeles.

Imagen original en el sitio de Apple

¿De qué tamaño deberían ser tus imágenes?, solo hay que aumentar el tamaño original al doble o triple.

Al final podrás tener tu propio conjunto de imágenes para que reaccionen al tipo de pantalla y el tamaño de dispositivo.

.image {
  background-image: image-set(
    url(image.jpg) 1x,
    url([email protected]) 2x
  );
}

@media (min-width: 768px) {
  .image {
    background-image: image-set(
      url(image-768.jpg) 1x,
      url([email protected]) 2x
    );
  }
}

@media (min-width: 1024px) {
  .image {
    background-image: image-set(
      url(image-1024.jpg) 1x,
      url([email protected]) 2x
    );
  }
}

Si quieres conocer otros métodos para manejar imágenes y profundizar en este tema, te recomiendo mi artículo:

Mejorando la carga de un sitio web: imágenes vs velocidad
Actualmente las imágenes son un recurso muy importante para cualquier sitio web, mejoran la interfaz y ayudan a transmitir información de manera visual (sin olvidar los memes). Lamentablemente la mayoría de sitios web no tienen en cuenta lo perjudiciales que puede ser. Con la gran cantidad de dispo…

Recursos

Comparte tu opinión o duda:
Se parte de mi newsletter

Compartiré contigo las últimas novedades del sitio y otros recursos sobre desarrollo web que no te puedes perder.