¿Tienes un sitio web en donde algunas imágenes se ven como si tuvieran baja calidad, y además sólo te ocurre en algunos dispositivos?. En este artículo veremos cómo usar imágenes retina en WordPress para que tus imágenes se vean correctamente en cualquier dispositivo.
Generalidades
El término «retina» fue introducido por Apple para referirse a la tecnología que tienen las pantallas de algunos de sus dispositivos, cuando decimos imagen retina, nos estamos refiriendo a imágenes de alta resolución que se muestran correctamente en este tipo de pantallas.
Imágenes responsive como retina en WordPress
WordPress por defecto permite trabajar con diferentes tamaños de imágenes, es decir cuando subes una imagen grande, se crean nuevas imágenes de acuerdo a lo que tengas definido en Ajustes > Medios, tal como se muestra en la siguiente imagen:
Si agregas una nueva imagen, por ejemplo la imagen: paisaje-mar.jpg que de 2880 × 1800 de tamaño, se crearán diferentes tamaños, por ejemplo para el theme Twenty Seventeen
paisaje-mar-100x100.jpg (*)
paisaje-mar-150x150.jpg
paisaje-mar-300x188.jpg
paisaje-mar-768x480.jpg (*)
paisaje-mar-1024x640.jpg
paisaje-mar-2000x1200.jpg (*)
Cuando insertas la imagen en una entrada, veremos que toma el tamaño medio de 300×188 en el atributo src de la imagen
src = "paisaje-mar-300x188.jpg"
Sin embargo al ver el código fuente en el front-end veremos un atributo adicional srcset que tiene todos los tamaños disponibles.
srcset = "paisaje-mar-300x188.jpg 300w,
paisaje-mar-768x480.jpg 768w,
paisaje-mar-1024x640.jpg 1024w"
Este atributo srcset que ha creado WordPress enviará la mejor imagen al navegador de acuerdo al tamaño de pantalla en el que se esta visualizando.
Sin embargo en el caso de pantallas retina, si estoy considerando un width = 300 en el atributo de la imagen, entonces el navegador tomará el tamaño inmediatamente superior ya que en una pantalla retina se puede mostrar a una mejor resolución, es decir tomaría la imagen: paisaje-mar-768×480.jpg
¿Es esto suficiente para trabajar imágenes retina en WordPress?
Si no te quieres complicar la vida, esto sería suficiente, sin embargo si quieres afinar un poco más la carga de tus imágenes, entonces puedes evaluar usar copias adicionales preparadas para pantallas retina.
Insertar imágenes retina manualmente
Como vimos anteriormente WordPress nos inserta automáticamente el atributo srcset, sin embargo puedes insertarlo manualmente y evitar que WordPress genere este atributo con código innecesario, en el siguiente ejemplo he insertado el atributo srcset con la imagen responsive.
<img src="paisaje-mar-300x188.jpg" srcset="paisaje-mar-768x480.jpg 2x" width="300" height="188" />
Usar un Plugin para crear y servir imágenes retina.
Si te complicas con insertar el código de manera manual, tienes un plugin que te puede ayudar.
Puedes evaluar por ejemplo el plugin WP Retina 2X, básicamente lo que hace este plugin es generar la imagen retina en base a los tamaños definidos y además crear el código srcset adicional para servir la imagen al navegador.
Luego de instalar y activar el plugin, desde Medios > Retina, se listarán todas las imágenes, lo ideal es subir imágenes con tamaño grande para que se puedan generar la versión retina para los diferentes tamaños definidos en el sitio.
Como se puede ver en la imagen, inicialmente no teníamos tamaños retina definidos, luego de generarlos se marcarán de color azul. Hay un tamaño marcado en rojo, que es el tamaño retina para uno de los tamaños de imagen definida por el theme, la versión normal es de 2000px de ancho la versión retina debería ser 4000px, y la imagen que hemos subido es menor a ese tamaño, la imagen subida tiene 2880px de ancho, por eso, para 2000px, no fue posible generar una imagen retina
Si ves el código HTML generado para una imagen de tamaño medio 300px, veras que el atributo srcset ahora tiene valores adicionales con versiones retina para cada tamaño.
srcset = "paisaje-mar-300x188.jpg 300w,
paisaje-mar-768x480.jpg 768w,
paisaje-mar-1024x640.jpg 1024w",
paisaje-mar-300x188@2x.jpg 600w,
paisaje-mar-768x480@2x.jpg 1536w,
paisaje-mar-1024x640@2x.jpg 2048w"
Esto quiere decir, que si estas viendo la imagen en una pantalla retina, ahora el navegador en lugar de tomar la imagen de 768w de ancho, tomará la de 600w, ya que es la que esta explícitamente definida para trabajar con retina.
¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.
Artículos Relacionados
(3 votos, promedio: 4,67 de 5)
Cargando…
Verás yo tengo un problema, en mi web tengo muchas imágenes y decidí que no dejaría que WP me generase las diferentes medidas, excepto el thumbnail.
Siempre he leído que las imágenes ralentizan la web y por ello tomé esta decisión de hecho las imágenes las subo a 800px máximo que suelen pesar máximo 120kb.
Recientemente en un iPad ví que las imágenes de la cabecera se veían borrosas y ahora sé que es por el tema retina.
Entonces, con el tema de retina esto que hago no me sirve ¿qué me podrías aconsejar para no cargar la BBDD con tanto archivo de imágen y hacer que sea compatible con retina?
El sitio web que te envío en este formulario es el nuevo diseño que estoy haciendo y dónde descubrí el problema pero el actual online es: https://lavueltaalmundosinprisas.net y aquí todavía estan todas las medidas.
Gracias por tu ayuda.
Hola, efectivamente, si son imágenes .jpg tendrías que tener imágenes versión retina para que no se vean borrosas, las imágenes físicamente son archivos, sólo se guarda una referencia en la BD, igual ocupan espacio, pero para esto puedes evaluar un CDN que es la solución recomendable cuando tienes muchas imágenes y quieres conservar diferentes versiones de las mismas.