• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / ¿Cómo usar imágenes retina en WordPress?

¿Cómo usar imágenes retina en WordPress?

Imágenes retina en WordPress

[ 17 enero 2018 ] [ Autor: Jhon Marreros Guzmán ][ Core - Intermedio] [ ]

funcionalidad imagen

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿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.

comparación pixeles estandard y retina

 

En la imagen anterior vemos una comparación con resolución 2x, sin embargo hay que tener en cuenta que existen también resoluciones 3x; en dispositivos Android incluso tienen otros valores adicionales, como : 0.75x, 1.5x, 4x, sin embargo para simplificar en este artículo hablaremos siempre de imágenes retina a 2x de resolución.

 

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:

Pantalla de configuración tamaño de imágenes

 

Tener en cuenta además que el theme que tengamos activo o algunos plugins, pueden crear tamaños de imágenes adicionales a los que se muestran en esta pantalla.

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 (*)
(*)Estos tamaños han sido generados por el theme, o por plugins

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"
Al costado de cada imagen tenemos: 300w, 768w, 1024w, esto indica básicamente al navegador el ancho de la imagen.

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.

Ten en cuenta que estamos hablando sólo de imágenes de contenido, el propio theme puede incluir imágenes como parte del diseño que deberían tener una versión 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" />

En el código anterior verás que he insertado 2x, es una sintaxis alterna, en lugar de 768w, cuando uso 2x estoy indicando que puede ser considerado como 600w, el doble de resolución para servir esta imagen como retina.

 

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.

Pantalla de generación de imágenes retina plugin WP Retina 2x

 
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

Este plugin genera la versión retina para tamaños menores de la imagen originalmente subida. Los tamaños en los que se basa se definen nivel general en: Ajustes > medios y también toma los tamaños definidos por el theme actual.

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.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 4,75 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Fernando Rutia

    4 febrero, 2018

    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.

    • Jhon Marreros Guzmán

      4 febrero, 2018

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Empaquetar WordPress con install.php

Ajax sin usar jQuery en WordPress

Query Monitor para optimizar y depurar tu sitio WordPress

Recuperar una versión anterior de temas o plugins

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados