Una buena noticia para los que poseen o desean una MacBook Pro con Pantalla Retina Display y aun mas para los usuarios de wordpress, ya que wordpress a sacado y publicado un plugin que crea las imágenes necesarias para ser mostradas en dispositivos con pantalla retina, al menos el doble del tamaño de las que serán mostradas en dispositivos normales y ademas detecta cuando nuestro sitio es accedido desde este tipo de dispositivos, sirviendo entonces las imágenes de mayor resolución optimizada para las pantallas con retina.
El soporte de tecnología HiDPI es esencial con este tutorial y aprenderás cómo agregar soporte de pantalla retina a su sitio de WordPress de forma gratuita, iremos desgranando poco a poco el concepto e implementación en sitios web.
La pantalla Retina de Apple, o HiDPI , es un tema de discusión entre diseñadores y desarrolladores web. Los desarrolladores y diseñadores de WordPress han comenzado a responder a esta tecnología proporcionando temas y plugins listos para Retina Display. «¿Necesito preparar mi sitio Retina Display?» es la pregunta que se hacen la mayoría de los propietarios de sitios web.
Con esta publicación ayudará a las personas a decidir si deben o no optimizar sus sitios web para la pantalla Retina de Apple.
¿Qué es la pantalla de retina?
Retina Display es la marca comercial registrada utilizada por Apple para una tecnología de pantalla HiDPI que comenzaron a usar en sus dispositivos más recientes, como iPad, iPhone y MacBook pro. Esta tecnología muestra más puntos por pulgada que los dispositivos más antiguos (alrededor de 300 DPI). Esto significa imágenes más nítidas y una representación de fuente más fluida. Sin embargo, es esencial tener en cuenta que muchos otros dispositivos ya tienen pantallas de DPI más altas 👇
El Apple MacBook Pro con pantalla Retina tiene una resolución de pantalla de 2880×1800 a 220 píxeles por pulgada. Uno pensaría que esta resolución en una pantalla de 15 pulgadas haría que las cosas se vean más pequeñas para la compatibilidad con la pantalla retina en WordPress.
¿Pero ahora por qué es un Reto?
Estoy totalmente a favor de la web de alta definición. Siento que optimizar sitios web para dispositivos modernos y aprovechar sus capacidades de visualización es lo correcto. Ya hay muchos usuarios que acceden a la web no solo a través de los dispositivos de Apple, sino también de otros dispositivos con capacidades similares . Si las tendencias son una indicación, creo que vendrán más mejoras en la tecnología de visualización, por lo que el cambio es inevitable. Adaptarse a él eventualmente se volverá crítico, si no necesario.
Por otro lado, los propietarios de sitios web deben considerar varios otros factores. En primer lugar, ofrecer imágenes de mayor resolución significa un ligero aumento en el tiempo de carga de la página ; para sitios más ocupados, esto también aumentará el uso de ancho de banda. En segundo lugar, con la cantidad de navegadores y dispositivos que la gente usa en estos días, es un desafío clasificar los navegadores y dispositivos y preparar sitios web para todos ellos.
Cómo agregar soporte de pantalla Retina a su sitio de WordPress
Es relativamente fácil agregar soporte Retina a su tema de WordPress existente. Básicamente, está agregando una imagen adicional del doble del tamaño y luego usando un script para decidir si publicar la imagen de definición estándar o la imagen de alta resolución.
Puede descargar y agregar el script Retina.js aquí.
Agregue eso al directorio js de su tema y luego ponga en cola el script en su archivo functions.php. Cuando sus usuarios cargan una página, retina.js verifica cada imagen en la página para ver si su servidor tiene una versión de alta resolución de esa imagen. Si existe una variante de alta resolución, el script intercambiará esa imagen.
Todo lo que tiene que hacer entonces es cuando agregue una nueva imagen al sitio , guarde un archivo como, por ejemplo, logo.png y otro del doble del tamaño como logo@2x.png , y el script detectará qué versión usar. mostrar. Esto funciona para cualquier nombre de archivo. Simplemente agregue @2x después del nombre del archivo. Entonces, un buen comienzo para agregar pantalla retina a WordPress.
Otras cosas a tener en cuenta para que su pantalla sea consistente es usar fuentes de iconos siempre que sea posible, ya que siempre se mostrarán en alta resolución, recreando su favicon en un tamaño de 32 × 32 en lugar del tamaño estándar de 16 × 16, y asegúrese de que las imágenes de fondo también sean duplicado en tamaño ya que este script no detecta imágenes de fondo.
El código para mostrar imágenes de fondo es:
.background { background-image: url(example.png); background-size: 200px 300px; height: 300px; width: 200px; } @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .background { background-image: url(example@2x.png); } }
Implementar Retina Display en WordPress con complementos
Ya tenemos desarrolladores de WordPress respondiendo al desafío y brindando soluciones prácticas y creativas. Actualmente, existen dos enfoques comunes para servir imágenes listas para Retina Display en WordPress. Con suerte, veremos claves aún más brillantes y perfectas para eso.
Complemento WP Retina 2x
El complemento WP Retina 2x intenta detectar el dispositivo utilizado para acceder a una página web. Si el dispositivo es compatible con pantalla Retina, entonces sirve una versión de imágenes de mayor resolución en su sitio web. Escrito por Jordy Meow, WP Retina 2x proporciona un tablero para administrar Retina Images para su sitio web. Este tablero le muestra el estado actual de los archivos en su biblioteca de medios, cuál de ellos tiene sus versiones listas para Retina Display y qué imágenes tienen problemas. Este increíble complemento proporciona cuatro formas diferentes de mostrar imágenes Retina:
- PictureFill: el método Picturefill reescribe el HTML sobre la marcha para usar el nuevo SRCSET. Dado que aún no es compatible con los navegadores, JS polyfill Picturefill se utiliza para cargar las imágenes. Ahora es el método recomendado.
- Retina.js: El método Retina JS es una solución 100% JS. El HTML carga las imágenes habituales. Luego, si se detecta un dispositivo de retina, se cargarán las imágenes de la retina . Es a prueba de fallas pero no eficiente (las imágenes se cargan dos veces) para agregar soporte de pantalla retina a WordPress
- Reescritura de IMG: el método de reescritura de IMG reescribe las etiquetas SRC de IMG sobre la marcha con las imágenes de la retina directamente si el dispositivo las admite. Este método no funciona con la mayoría de las soluciones de almacenamiento en caché.
- Retina-Images: El método Retina-Images utiliza un controlador de servidor: las imágenes se cargarán a través del controlador PHP de Retina-Images. Tu .htaccess se modificará automáticamente.
Como usar WP Retina 2x
Después de la instalación, el complemento agrega una pestaña WP Retina 2x en el menú de administración, que lo lleva al panel de control del complemento. Allí verá dos pestañas para la configuración Básica y Avanzada. En la página de Conceptos básicos, puede decirle al complemento qué tamaños de imagen no desea que se regeneren para la pantalla de retina. Mostrará tamaños como mediano, grande y pequeño, y también puede ver otros tamaños agregados por sus temas para generar miniaturas de publicaciones o controles deslizantes. Principalmente uso las imágenes de tamaño mediano o grande dentro de las publicaciones y las miniaturas como imágenes destacadas en las páginas de índice y archivo. Así que los dejaré sin marcar y revisaré otros sitios que no quiero optimizar.
La pestaña Avanzado le permite elegir entre los métodos del lado del servidor y del lado del cliente. Este complemento también agrega una pestaña Retina 2x en la pestaña Medios en el menú de administración. Allí, puede ver el estado de las imágenes que ha subido, cuál de ellas tiene sus versiones Retina listas, cuál de ellas tiene problemas. El autor recomienda usar el complemento «Habilitar reemplazo de medios», que colocará un botón de reemplazo junto a las imágenes con problemas, y puede reemplazar fácilmente esas imágenes.
Simple WP Retina: agregue soporte de visualización al sitio de WordPress
Una manera rápida y fácil de implementar las capacidades de Retina Display en su sitio web. El complemento simple WP Retina funciona en el lado del servidor para detectar Retina o dispositivos con capacidad de alta densidad de píxeles y muestra imágenes de alta resolución para esos visitantes. Es simple, corto y dulce. Sin embargo, este complemento tiene algunas limitaciones. Por ejemplo, no funciona con el almacenamiento en caché, por lo que si se instalan complementos de almacenamiento en caché en su sitio web, este complemento no funcionará correctamente. No hay tablero, y no hay una manera fácil de depurar el complemento y ver que puede detectar y servir imágenes @2x a dispositivos de alta densidad de píxeles.
- Detecta una pantalla HighDPI como una pantalla Retina
- Detecta todos los tamaños de imagen agregados usando add_image_size() y agrega versiones @2x.
- Reemplaza las miniaturas destacadas y las imágenes de contenido con las versiones @2x para usuarios con pantallas HighDPI.
Una vez instalado, Simple WP Retina no regenera automáticamente las imágenes. Deberá hacerlo mediante el complemento Regenerar miniaturas . También restaura versiones 2x de todas sus imágenes. Entonces, si su tema ha agregado varios tamaños de imagen, todos ellos tendrán versiones @2x. Este es un complemento nuevo, y espero que el autor lo amplíe y lo mejore.
HiDPI Gravatars para agregar soporte de pantalla Retina a su sitio de WordPress?
Este complemento actualizará los Gravatars de su sitio a alta resolución. Simplemente cargue y active. Para obtener los mejores resultados al cargar un nuevo avatar, use una imagen de al menos 128 x 128 píxeles de tamaño.