Cómo admitir Retina Display para imágenes en WordPress










  • WordPress no tiene funciones integradas para acomodar pantallas retina modernas en dispositivos móviles. Entonces, si desea mostrar diferentes imágenes según las capacidades de visualización del visitante, necesitará la ayuda de un complemento.

    Hoy, les presentaré el complemento WP Retina 2x , que hace el trabajo de generar imágenes de tamaño Retina y también detectar las mejores imágenes para servir a los visitantes.

    ¿Qué es una pantalla Retina?

    En términos simples, una pantalla Retina muestra más píxeles en el mismo espacio que una pantalla estándar. Tiene una mayor densidad de píxeles. Esto tiene el efecto de aumentar la calidad percibida de gráficos e imágenes. Por ejemplo, los bordes de los íconos y las fuentes parecen menos «irregulares».

    El término «Retina» se refiere a una plantilla de marketing y no a una especificación técnica. Apple clasifica las pantallas con resoluciones muy diversas como Retina. Además, todos los demás fabricantes de dispositivos móviles ahora fabrican pantallas con resoluciones de pantalla Retina, es decir, densidades de píxeles similares.

    Entonces, para todos los efectos, cuando hablamos de pantallas móviles «Retina», estamos hablando de todos los dispositivos móviles y no solo de iPhones.

    La razón por la que debemos prestar atención a una pantalla Retina en WordPress es que la mayor resolución de las pantallas en los dispositivos móviles hace que las imágenes (e íconos) aparezcan la mitad del tamaño que tienen en una pantalla de resolución estándar. Entonces, para que nuestro sitio de WordPress brinde imágenes que aparezcan en «tamaño completo» en una pantalla tipo Retina, debemos proporcionar imágenes dos veces más grandes de lo que normalmente haríamos.

    Voy a hablar de tamaños de píxeles aquí: dimensiones, no resoluciones de imagen. Las cosas se vuelven más complicadas cuando te involucras en el uso de imágenes de mayor resolución, y ese tipo de discusión está más allá del alcance o propósito de este tutorial.

    Cómo procesa WordPress las imágenes que subimos

    Cuando carga una imagen en la biblioteca multimedia de WordPress, se generan hasta cinco copias más pequeñas de la imagen. La cantidad de imágenes más pequeñas que se generan depende del tamaño del original. Cuanto más grande es la imagen original, más versiones más pequeñas se generan.

    Por ejemplo, una imagen original de 3200 x 1800 píxeles generará los tamaños más pequeños: 1568 x 882, 1024 x 576, 768 x 432, 300 x 169 y 150 x 150. Mientras que un original de 628 x 628 píxeles genera solo dos imágenes más pequeñas: 300 x 300 y 150 x 150.

    El complemento WP Retina 2x le permite crear automáticamente imágenes de tamaño doble desde la biblioteca multimedia en WordPress para optimizar las imágenes para pantallas móviles o Retina. Echemos un vistazo a cómo funciona.

    Instalación del complemento WP Retina 2x

    Inicie sesión en su panel de administración de WordPress.

    En la navegación de la columna izquierda, pase el mouse sobre el enlace «Complementos» y haga clic en el enlace «Agregar nuevo».

    pase el mouse sobre el enlace "Complementos" y haga clic en el enlace "Agregar nuevo"

    En el cuadro «Buscar complementos…», ingrese «WP Retina 2x».

    busque el complemento WordPress WP Retina 2x

    Una vez que haya localizado el complemento, haga clic en el botón «Instalar ahora».

    haga clic para instalar el complemento WordPress WP Retina 2x

    Cuando se haya instalado el complemento, haga clic en el botón «Activar».

    haga clic para activar el complemento WordPress WP Retina 2x

    Uso del complemento WP Retina 2x

    La versión paga de WP Retina 2x cambiará automáticamente el tamaño de las imágenes cargadas en la Biblioteca multimedia. Estamos trabajando con la versión gratuita aquí, por lo que tendremos que hacer las cosas manualmente. (Las miniaturas Retina más pequeñas se pueden generar automáticamente, hablaré de eso más adelante).

    Todavía es un proceso fácil y puede procesar imágenes a granel.

    En la navegación de la columna izquierda, pase el mouse sobre el enlace «Medios» y haga clic en el enlace «Retina».

    haga clic en el enlace "Retina"

    Puede hacer clic en el botón azul «Generar a granel (miniaturas y retina)» y terminar. Todo lo demás funciona sin ninguna configuración. Tendrá versiones Retina de todas sus imágenes, y el complemento detectará pantallas de tipo Retina, por lo que sabrá qué versiones de las imágenes se mostrarán a cada visitante.

    haz clic en el botón azul grande y ve a almorzar, ya terminaste

    Pero, ¿dónde está la diversión en un proceso de un solo clic?

    Incluso si usa el generador masivo, tendrá que regresar y procesar las imágenes individualmente cada vez que cargue una nueva. Así que procesemos algunas imágenes individualmente y veamos qué sucede cuando lo hacemos.

    Pase el mouse sobre el enlace «Medios» y haga clic en el enlace «Retina». Verá una visualización de las imágenes en su biblioteca de medios. Si miramos la imagen imaginativamente titulada “imagen”, se pueden ver las dimensiones del archivo original (2592×1944).

    El único botón disponible para nosotros en la versión gratuita del complemento es «GENERAR», así que hagamos clic en él.

    haga clic en el botón "GENERAR"

    Verá que algunos de los íconos de «Tamaños de medios retinaizados» han cambiado de color.

    algunos de los iconos han cambiado de color

    Pero aparte de eso, no hay ninguna indicación de lo que hizo el complemento. Así que echemos un vistazo a los archivos en el servidor.

    Antes de ejecutar WP Retina 2x, teníamos los tamaños de imagen que generaba WordPress cuando se cargaba la imagen.

    tamaños de imagen que generó WordPress

    Después de ejecutar el complemento, puede ver que se han generado nuevas imágenes y se ha agregado un sufijo «@2x» al nombre del archivo.

    nuevas imágenes generadas por el plugin

    El complemento utiliza el sufijo «@2x» para saber qué versión de la imagen se mostrará en las pantallas tipo Retina. Eso es importante porque, como puede ver, las imágenes recién generadas son de 5 a 5,5 veces más grandes que las originales, por lo que el tiempo de descarga será significativamente mayor.

    Espera, ¿cuánto más grandes son las imágenes ?

    Las dimensiones de la imagen se duplican y el tamaño del archivo es de cinco a cinco veces y media mayor que el original.

    Lo sé. Ese es un archivo significativamente más grande.

    Uno pensaría que le gustaría servir un tamaño de archivo más pequeño a través de una red móvil. Ese es el enfoque lógico. Pero no hay «Retina» sin archivos más grandes, por lo que la lógica parece haber sido silenciosamente dejada de lado e ignorada en este caso.

    Con las redes móviles ganando velocidad continuamente y los proveedores avanzando hacia planes de ancho de banda ilimitado, supongo que ahorrar bits (o megabytes, en este caso) se vuelve menos importante cada día.

    Sin embargo, la velocidad de carga de la página sigue siendo importante para Google , por lo que debe decidir cuáles son las prioridades para su sitio web en particular.

    Configuración de los ajustes del complemento de pantalla Retina

    En la navegación de la columna izquierda, pase el mouse sobre el enlace «Meow Apps» y haga clic en el enlace «Retina».

    haga clic en el enlace "Retina"

    No es necesario realizar cambios en la mayoría de las configuraciones aquí, pero hay un par de excepciones notables.

    Primero es la calidad de la retina . El nivel predeterminado es 90, que es alto. ¿Recuerdas esos tamaños de archivo más grandes de los que hablamos antes? Si la mayoría de sus imágenes son .jpg, puede reducir el tamaño de los archivos reduciendo el valor de «Calidad de la retina» a 80 o incluso a 70.

    Por si sirve de algo, no veo ninguna degradación significativa de jpg hasta que estoy por debajo de una configuración de calidad de 70, por lo que es la configuración que uso en todas mis imágenes jpg para la web.

    reduzca este valor para reducir el tamaño de los archivos Retina

    A continuación, habilitar la generación automática hará que WP Retina 2x genere automáticamente versiones Retina de las dos miniaturas más pequeñas cada vez que cargue una imagen en la biblioteca multimedia. Esto es especialmente útil si solo tiene la intención de usar imágenes de tamaño Retina para sus miniaturas (donde pueden ser más útiles).

    habilitar generación automática

    Haga clic en el botón «Guardar cambios» para guardar su configuración.

    Para obtener detalles sobre los otros ajustes de configuración, consulte la documentación de WP Retina 2x .

    Por qué es importante optimizar las imágenes de WordPress para pantallas Retina

    Recuerde, del 40 al 50 % del tráfico de su sitio web, sin importar el tipo de sitio, es tráfico móvil. Prácticamente todos los teléfonos nuevos vendidos tienen una pantalla tipo Retina. Si ignoramos a Retina, estamos estafando a la mitad de nuestros visitantes.

    Pasamos rápidamente de un panorama en el que servir imágenes más grandes era opcional a uno en el que es una necesidad.

    Nuevamente, eso tiene que equilibrarse con la velocidad de carga de la página. Pero si las expectativas de los usuarios de dispositivos móviles han cambiado y exigen imágenes más grandes para sus pantallas de mayor resolución, no querrá que la mitad de su audiencia potencial lo deje atrás.

    ¿Dónde aterrizas en el espectro de tamaño frente a rendimiento? ¿Ha implementado el tamaño de imagen Retina en su(s) sitio(s) web? Házmelo saber en los comentarios. Nos encanta saber de usted.