Tengo un sitio web móvil que aprovecha jQuery Mobile, sin embargo, las imágenes, francamente, parecen basura en el iPhone 4/4S. Supongo que lo mismo ocurrirá con el "nuevo iPad" cuando esté disponible más adelante esta semana.¿Cuál es la forma correcta de manejar imágenes de alta resolución para pantallas de alta resolución (principalmente pantallas retina iOS)?
Sé que esto tiene algo que ver con la relación de píxeles y/o la imagen DPI (o PPI o lo que sea que quiera llamarlo ... no nos metamos en una discusión sobre eso). Simplemente quiero saber cuál es el mejor método para servir imágenes web de alta resolución para estas pantallas retina iOS.
Al principio, pensé que cambiar la imagen DPI (en Photoshop) resolvería el problema. Tomé algunas imágenes de muestra y las reduje a un ancho de 190px. Guardé una imagen a 72 ppp y la otra a 200 ppp. Esto no tuvo efecto. Véalo usted mismo (en un iPhone 4/4S): http://haxway.com/restest/1.html La imagen inferior de cada uno es la de 200 DPI.
Luego, en lugar de guardar la imagen de alta resolución a 200 ppp, la guardé a 72 ppp otra vez, pero esta vez aumenté el ancho (a 528 px) para que al escalar a un ancho de 190px fuera a ~ 200 DPI. Esto pareció hacer el truco: http://haxway.com/restest/2.html Si ve la fuente, puede ver que estoy forzando un ancho/alto en las etiquetas de la imagen (<img src="w4.jpg" alt="" width="190" height="143">).
Sin embargo, no estoy seguro de que esta sea la mejor solución. ¿No usar los atributos de ancho/alto para escalar una imagen tiene un impacto en el rendimiento de la representación ya que el dispositivo tiene que escalar la imagen en lugar de simplemente cargarla (y no tocarla más)?
Después de algunas investigaciones, parece que hay algunas consultas de medios de CSS como -webkit-min-device-pixel-ratio [1] donde puede utilizar CSS diferentes para pantallas de alta resolución y, por lo tanto, cargar imágenes de mayor resolución en el CSS. Pero tengo que apuntar a las etiquetas HTML <img>. Otro artículo que leí (lo siento, perdí el enlace) sugirió usar Javascript para cambiar las imágenes "normales" por las de alta resolución. ¡Eso suena loco!
¿Hay una mejor manera de solucionar esto? Me doy cuenta de que las opiniones pueden diferir sobre cuál es la "mejor" manera. Si se pudieran explicar los pros/contras de cada método, ¡sería genial! Mi objetivo es usar el método que sea más rápido (con suerte sin usar Javascript, etc.).
Gracias!
[1] http://aralbalkan.com/3331
Su muestra es un poco sospechosa. Lo que hacen los navegadores es mostrar las imágenes píxel por píxel. Visto así, tus imágenes son similares. Los tamaños de impresión de las imágenes de 200 ppp son mucho más pequeñas. Si, en cambio, cargas la misma imagen en una resolución más alta, que contiene más píxeles, verás que los navegadores muestran las imágenes 3 veces más grandes. Que tampoco es lo que quieres – commonpike
... exactamente. Eso no es lo que quiero. Entonces, ¿cómo este enfoque actual es "sospechoso"? (No es mi intención atacar ... solo curiosidad.) –
perdón si eso sonó ofensivo. Me resultaba confuso: lo que quiere, supongo, es la misma imagen de tamaño en una resolución más alta. Pero cargó una imagen más pequeña en una resolución más alta en su lugar. Si los navegadores * * respetaran los ppp, las imágenes de 200 ppp que cargó serían mucho más pequeñas. (en cualquier caso, gracias por las imágenes de prueba, me ayudaste). – commonpike