Glosario · Formatos
Retina
Pantallas de alta densidad de píxeles; para que una imagen se vea nítida en ellas se usa una versión al doble de resolución.
En detalle
En una pantalla retina (o de «alta densidad») cada píxel de diseño se dibuja con 2 o más píxeles reales. Una imagen de 300×250 píxeles se ve borrosa si se estira sobre ese espacio, así que se prepara una versión de 600×500 y se muestra reducida a 300×250.
El precio es el peso: una imagen al doble de resolución pesa bastante más. Por eso en HTML5 conviene usar texto y formas vectoriales (SVG) siempre que se pueda, y reservar las imágenes grandes para lo que de verdad lo necesita.
Ejemplo
Una foto de 600×500 mostrada con width: 300px para un banner de 300×250.