6.1 Uso del atributo srcset y sizes
Las pantallas con alta densidad de píxeles, como las pantallas Retina de Apple, se han convertido en el estándar para muchos dispositivos modernos. Estas pantallas tienen muchos más píxeles por pulgada (PPI), lo que proporciona una imagen más nítida y detallada. Para los desarrolladores web, es importante optimizar los gráficos para tales pantallas, para que la experiencia del usuario sea de primer nivel. Vamos a ver cómo hacerlo.
Problemas asociados con pantallas de alta densidad
En pantallas de alta densidad, las imágenes estándar pueden verse borrosas o pixeladas, ya que un píxel de la imagen se extiende por varios píxeles de la pantalla. Para resolver este problema, es necesario usar imágenes de mayor resolución, que posteriormente puedan ser escaladas por el navegador para mostrarse en la pantalla de alta densidad.
Los atributos srcset y sizes permiten especificar diferentes versiones de imágenes para diferentes densidades de píxeles. Esto ayuda al navegador a elegir la imagen más adecuada para un dispositivo específico.
Ejemplo de uso de srcset y sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optimización para pantallas Retina</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Imagen de ejemplo para pantallas Retina">
</body>
</html>
Explicación del código:
srcset: especifica tres versiones de la imagen para diferentes densidades de píxeles (1x,2x,3x)-
sizes: define el ancho de la imagen para diferentes condiciones de visualización:- Hasta
600px— la imagen ocupa el100%del ancho del viewport - Hasta
1200px— la imagen ocupa el50%del ancho del viewport - En todos los demás casos — la imagen ocupa el
33%del ancho del viewport
- Hasta
6.2 Uso de gráficos vectoriales (SVG)
Los gráficos vectoriales (SVG) son una excelente solución para pantallas de alta densidad, ya que los archivos SVG se escalan sin perder calidad. Son ideales para logotipos, iconos y otros elementos de interfaz.
Ejemplo de uso de SVG:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uso de SVG para pantallas Retina</title>
</head>
<body>
<img src="images/logo.svg" alt="Logotipo">
</body>
</html>
Explicación del código:
src="images/logo.svg": especifica la ruta al archivo SVG, que se escalará a cualquier tamaño sin perder calidad
6.3 Uso de CSS
Para las imágenes de fondo, se pueden usar media queries y propiedades CSS para cargar diferentes versiones de imágenes dependiendo de la densidad de píxeles del dispositivo.
Ejemplo de uso de CSS para imágenes de fondo:
.background {
background-image: url('images/background-1x.jpg');
}
@media only screen and (min-resolution: 2dppx) {
.background {
background-image: url('images/background-2x.jpg');
}
}
@media only screen and (min-resolution: 3dppx) {
.background {
background-image: url('images/background-3x.jpg');
}
}
Explicación del código:
.background: define la imagen de fondo básica@media only screen and (min-resolution: 2dppx): reemplaza la imagen de fondo por la versión para pantallas con densidad2x@media only screen and (min-resolution: 3dppx): reemplaza la imagen de fondo por la versión para pantallas con densidad3x
6.4 Elemento picture
La etiqueta <picture> permite especificar múltiples fuentes de imagen con diferentes condiciones de visualización. Es útil para casos más complejos de adaptación de imágenes.
Ejemplo de uso de <picture>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uso de <picture> para pantallas Retina</title>
</head>
<body>
<picture>
<source srcset="images/image-3x.jpg" media="(min-resolution: 3dppx)">
<source srcset="images/image-2x.jpg" media="(min-resolution: 2dppx)">
<img src="images/image-1x.jpg" alt="Imagen de ejemplo para pantallas Retina">
</picture>
</body>
</html>
Explicación del código:
<source>: especifica diferentes fuentes de imagen con condiciones de visualización<img>: establece la imagen por defecto para dispositivos que no soportan<picture>
6.5 Ejemplos de optimización de imágenes
Ejemplo 1: Imagen adaptativa de alta resolución
Vamos a crear un ejemplo donde la imagen está optimizada para pantallas de alta densidad usando los atributos srcset y sizes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagen adaptativa para pantallas Retina</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Imagen de ejemplo para pantallas Retina">
</body>
</html>
Explicación del código:
srcset: define tres versiones de la imagen para diferentes densidades de píxeles (1x,2x,3x)-
sizes: define el ancho de la imagen para diferentes condiciones de visualización:- Hasta
600px— la imagen ocupa el100%del ancho del viewport - Hasta
1200px— la imagen ocupa el50%del ancho del viewport - En todos los demás casos — la imagen ocupa el
33%del ancho del viewport
- Hasta
Ejemplo 2: Uso de SVG para imágenes escalables
Vamos a crear un ejemplo donde se utiliza SVG para garantizar una visualización de calidad en cualquier dispositivo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uso de SVG para pantallas Retina</title>
</head>
<body>
<img src="images/logo.svg" alt="Logotipo">
</body>
</html>
Explicación del código:
src="images/logo.svg": especifica la ruta al archivo SVG, que se escalará a cualquier tamaño sin perder calidad
GO TO FULL VERSION