soy Kseso y esto EsCSS

Imágenes para dispositivos de alta densidad. La técnica 2*0.4 al 50%

Técnica para el uso de imágenes en dispositivos de alta densidad de píxeles (HiDPI) y retina display. Vía src en el html o vía background en el Css como imagen única o en sprites.

Imágenes para dispositivos de alta densidad. La técnica 2*0.4 al 50%

·Por Kseso ✎ 2

imagen ilustrativa del artículoCon la llegada de los dispositivos con pantallas de alta densidad de píxeles (HiDPI o retina display) y a falta de una perfecta implementación y estandarización de las técnicas que hagan posible el uso de imágenes RWD, ha surgido un pequeño problema con el cómo lucen las imágenes en estos dispositivos.

Básicamente el problema con este tipo de dispositivos es que las imágenes que se veían razonablemente bien en ellos lucen muy probres. Pierden calidad.

Le servir la imagen más adecuada al aparato que la solicita para obtener la experiencia de usuario más grata sin penalizar ni a una (calidad) ni al otro (usuario) es lo que se busca cuando se habla del RWD aplicado a las imágenes.

Alguna aproximación o vía a esta cuestión ya la he traído al blog:

  1. Picture Element y el atributo Srcset
  2. Más píxeles, más problemas
  3. HiDPI Images for Variable Pixel Densities

Son sólo unos ejemplos. Pero hasta que cualquiera de las propuestas se estandarice y devenga en plenamente funcional, algo se puede hacer para salir del paso.

Imagen vía src. La técnica 2*0.4 al 50%

No me cuelgues medallas. Tampoco me reclames crédito. Esta técnica ya la vengo viendo hace unos meses y cada vez en más artículos. Nadie otorga crédito al origen, y ya lamento no poder hacerlo yo por no haber localizado la fuente.

Para llevarlo a cabo necesitas de cualquier programa editor de imágenes. Hasta con el sencillo y completo IrfanView podrás hacerlo. Lo que tienes que hacer es lo siguiente. Para el ejemplo supón que tienes una imagen de 600px por 400px

  1. Abrir tu imagen y cambiar su tamaño/remuestrear al 200%. Asegúrate de tener marcada la opción de "mantener relación de aspecto" para que no se distorsione, así el alto también cambia al 200%. La imagen del ejemplo resultará de 1200x800px
  2. Al guardar elegir como jpg (si tienes la opción marca la opción de progresivo, te lo explico luego) y elegir una calidad (comprensión) de 40-50%. El valor exacto y óptimo depende mucho de las características cromáticas de cada imagen y del grado de comprensión que ya tuviera.
  3. Ahora ya puedes ir a tu html y añadir a tu etiqueta img el atributo width con un valor igual a la mitad del tamaño de la imagen. En el ejemplo quedaría: <img src="ruta.ext" alt="" width="600" />

imagen ilustrativa¿Por qué indicar el tamaño en el html con el atributo "width" y no vía Css?
.- A no ser que todas tus imágenes sean del mismo tamaño para indicar su anchura en px en el Css no puedes marcar su tamaño en él. Recuerda que si lo haces en porcentajes (50% para que fuese la mitad) los valores expresados en % en los estilos basan el cálculo en el tamaño del contenedor padre del elemento (en nuestro caso la caja que contenga la imagen).

Y ¿el peso de la imagen?
.- Sencillamente estás aligerando el peso. Aumentará la velocidad de carga. En distintas pruebas que he hecho, la imagen por 2*0.4 al 50% pesa bastante menos que la original. Aproximadamente ~1/3. En peso viene siendo equivalente a una calidad del 75-80% en tamaño original

Y lo más importante: Calidad y cómo se ve
Contra lo que cabría esperar luce mejor la imagen así tratada que la original, tanto en pantallas "normales" como de HiDPI. Si no tienes algún aparato con este tipo de pantalla, puedes hacer la prueba en el pc o portátil aumentando el zoom de la página.

JPG progresivo

Antes te mencioné el detalle de elegir el formato progresivo al guardar la imagen. Vamos con el porqué.
Resulta que según la información que facilitan distintas páginas (y que me encontré al buscar documentación para este artículo) los cacharros con iOS y retina tienen una limitación en los recursos que pueden procesar en función la memoria disponible. Más info.

Esto conlleva en según que situaciones a que no se carguen todas las imágenes de una página o que se muestren con una calidad deficiente.

Sin embargo, y de forma resumida, haciendo pruebas (esas páginas y autores) han descubierto que parece ser que la vía del propio fabricante para saltarse esas limitaciones es tratar a las imágenes como si estuviesen guardadas en formato progresivo.

Una versión en castellano en faq-mac

Imágenes en fondos y sprites

Todo lo anterior de nada sirve si la imagen es utilizada como fondo (background) de los elementos vía Css ya sea individualmente o en sprites css.

En estos casos, hay que recurrir a la elaboración de imágenes exprofeso para este tipo de dispositivos y hacer uso de las @media queries.

y en particular de los media para estos pixel-ratio combinado con la propiedad Background-size.
En este artículo de Josh Byers en studiopress.com te lo cuentan.

Qué es retina display

Con independencia de que tengas claro el concepto de "densidad de píxeles" o la marca comercial "retina display" o aún tengas alguna duda sobre ello, un artículo y opinión en omicrono.com

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso