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 👇
macbook-pro-vs-retina-display-zoom
¿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.
retina-display
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í.
retinajs
.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.
plugin-wordpress-retina-2x
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.
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.
HiDPI-Gravatars-plugin-wp
