Cómo hacer imágenes preparadas para retina que no ralentizan WordPress

Las imágenes en mi sitio se veían decentes y cargadas rápidamente. Pensé que era suficiente. Luego invertí algo de tiempo para prepararlos para Retina y Wowza, ¡las fotos de actualización parecían fenomenales! Ahora no puedo volver. Los dispositivos Retina tienen más píxeles en la pulgada, por lo que requieren imágenes de alta resolución para completar estos píxeles adicionales. Pero los dispositivos Apple no son el único devorador de píxeles. Las tabletas de superficie, los teléfonos Android, los iPhones, todas requieren imágenes listas para la retina. En esta publicación, le mostraré cómo creé imágenes de alta resolución en WordPress para dispositivos Retina. Te enseñaré cómo tomar tus fotos de esto …

… en esto …

… todo lo que le asegura que entrega el archivo más optimizado posible, porque estas hermosas imágenes de alta definición son enormes y ralentizarán mucho su sitio si no se transmiten correctamente. PD: Si las imágenes de arriba se ven iguales, esto se debe al hecho de que su dispositivo no acepta imágenes de alta definición, pero se vuelven cada vez más populares, por lo que debe hacer tiempo para optimizar la resolución de pantallas altas. La guía de WordPress para imágenes retina su pantalla consta de miles (tal vez millones si tiene una pantalla grande) de pequeños cuadrados, llamados píxeles. Para reproducir una imagen, el archivo de imagen tiene instrucciones para cada píxel en la pantalla, diciéndoles de qué color debería ser para producir la imagen.
La resolución de la imagen afecta enormemente cómo aparece su imagen en la pantalla, pero no en la forma en que podría creer. Supongamos que la resolución en las pantallas funciona como la resolución de papel, pero no lo es. ¡Así que probemos sus suposiciones con una prueba POP! 1. ¿Qué resolución produce el tamaño de archivo más pequeño? A) 72 dpi b) 150 dpi c) 300 dpi d) todo lo anterior 2. ¿Qué resolución debe guardar las imágenes para que parezca de alta calidad en la web? A) 72 dpi b) 150 dpi c) 300 dpi d) ¿A quién le importa? La respuesta a ambas preguntas es D. En algún lugar del camino, aprendí que 72 DPI era la resolución web estándar. Asumí que si quiero que mis imágenes se vean bien en las pantallas de retina, debería duplicar este número. Elegí 150 DPI porque era un hermoso número redondo que me dio un poco más, así que comencé a guardar todas las fotos en mi sitio a 150 ppi. Ahora sé que estaba totalmente equivocado. En primer lugar, DPI no afecta cómo aparece una imagen en su sitio DPI significa puntos de pulgada en papel. Esto es lo que realmente sucede. Vea estas tres imágenes que se han guardado en diferentes DPI:
72 dpi, 149kb

150 dpi, 149kb

300 dpi, 149kb

Todos se ven igual y todos tienen el mismo tamaño de archivo. Descárguelos y ábralos a Photoshop si no me cree. Todos tienen el mismo tamaño de archivo, porque todos tienen las mismas instrucciones para el mismo número de píxeles. Su pantalla no le da una capucha sobre DPI sino su impresora sí. DPI le dice a la impresora cuán densa empacar los píxeles en la pantalla al imprimir la imagen en el papel.
Así es como se ven esas tres imágenes cuando las imprimí:
Todas las imágenes imprimidas en una sola hoja de resolución de papel comunican cuán densa desea mostrar los datos de la imagen. Si tengo una imagen de 100 x 100 píxeles, tengo 10,000 píxeles.

En una imagen de alta resolución, empaqué esos datos en un espacio más pequeño, produciendo más detalles.
Para una imagen de baja resolución, difunden esos datos en un área más grande.
La resolución de la imagen no cambia la cantidad de datos en la imagen, sino cuán densos aparecen esos datos. Miss-ISS-I-PPI PPI o píxeles en la pulgada es una medida de cuántos píxeles pueden mostrar una pantalla en una pulgada.
¡Las pantallas de retina tienen el doble de píxeles, vertical y horizontalmente, lo que significa que el espacio que estaba ocupado antes de un píxel ahora tiene cuatro píxeles! Como sabemos anteriormente, no tenemos suficientes datos para dar instrucciones a todos esos píxeles nuevos. Es por eso que las imágenes habituales en las pantallas de Retina parecen tan poco claras. Aquí está ese error de nuevo.
Retina, 398kb
Obviamente no retengas

En lugar de proporcionar una imagen hermosa pero pequeña, para mantener los detalles como en el caso de la impresión, las pantallas de retina están tratando de difundir los datos. Los pobres píxeles descuidados que no tienen sus propios datos, intentan usar los datos de los píxeles a su alrededor para averiguar qué color deberían ser, como muchos deportistas.

Hacen mi mejor esfuerzo, pero seamos honestos, hagamos un mal trabajo. Para remediar esto, necesitamos proporcionar imágenes densas de WordPress para que haya suficientes datos para circular. Lo que nos lleva a cómo hacer imágenes de retina, Paso 1 … Paso 1: necesita producir tamaños dobles en píxeles para su sitio si sigue las mejores prácticas, entonces sabe que necesita escalar sus imágenes al tamaño correcto antes de cargarlos. Para producir imágenes de retina en WordPress con datos suficientes para cada píxel, debe duplicar el tamaño de los píxeles para cada imagen que cargue. Si tiene un héroe grande, que tiene 1600 px de ancho y 400 px de alto, debe producir una imagen con 3200 PX Ancho y 800 PX Altura. Si el ancho de su blog es de 800 PX, las imágenes para las publicaciones de su blog tendrán que ser de 1600 PX de ancho, etc. Solo tiene que duplicar las dimensiones de los píxeles para el tamaño más grande posible en el que se mostrará la imagen. No tiene que crear imágenes de dimensiones dobles para cada posible dimensión de respuesta. Puede guardar las imágenes con @2x en nombre del archivo antes de la extensión del archivo, pero no es necesario, porque el complemento a continuación lo hará por usted.
¿Cómo puedo hacer imágenes de retina para las imágenes que ya he subido? Hacer que su sitio web sea amigable con la retina puede ser un proceso que requiere mucho tiempo si ya tiene mucho contenido, porque debe volver a las imágenes originales que ha descargado desde su web o cámara y producir el tamaño apropiado. No puede simplemente descargar la imagen y aumentarla en Photoshop o obtendrá los mismos resultados poco claros. Si no ha escalado las imágenes y ha subido una gran imagen, es posible que tenga suerte si las imágenes son lo suficientemente grandes. Si sube una imagen grande (2000px x 800px) para todas sus imágenes, incluso si aparecieran en el cuerpo del blog solo a 800px, entonces no tiene que cargar un reemplazo grande. Ya tiene una imagen con datos suficientes que serán suficientes, incluso si es ligeramente de gran tamaño; Sin embargo, es la mejor práctica si produce el tamaño exacto que necesita para beneficiarse del rendimiento.
Paso 2: Servir imágenes de retina en dispositivos Retina Hay muchas formas diferentes de hacerlo.Te mostraré dos.Primero te mostraré el modo manual para que los amantes del bacalao puedan ver lo que está sucediendo.Luego le mostraré la manera rápida y fácil para todos los que odian el código;) Opción 1: Modificar SRCSET en WordPress Una de las mejores formas de transmitir las imágenes de Retina es el uso del atributo.Así es como funciona.En lugar de usar el atributo SRC para compartir una imagen, le dé al navegador una lista de imágenes para elegir.El navegador luego elige descargas y muestra la imagen más adecuada para el dispositivo del visitante.Esto no funciona solo para imágenes de retina, pero también puede usarlo para diferentes imágenes de diferentes tamaños o formatos.
Nos centraremos en las imágenes de Retina, por lo que en nuestro atributo SRCSET, debemos incluir una imagen regular para dispositivos que no sean Trretin y una imagen de retina retina. No desea perder su tiempo descargando y difunde imágenes de gran tamaño en pantallas que no son RE-Tin, por lo que es importante incluir ambas. También debe incluir la etiqueta SRC habitual para navegadores que no aceptan SRCSET. Así es como se verá:

ver 1x y 2x? Esto ayuda al navegador a identificar qué imagen es la versión habitual y cuál es la versión Retina. Si el usuario tiene un dispositivo Retina, el navegador transmitirá la imagen 2X. Si no, servirá la versión 1x. Y si el navegador no acepta SRCSET, usará el del atributo SRC. Fácil, ¿verdad? Simplemente agregue el atributo SCSET al código HTML al insertar imágenes y puede servir imágenes de retina … solo que nunca es tan fácil. El problema es que no le da al navegador imágenes más pequeñas para dispositivos más pequeños. En otras palabras, el código anterior no produce imágenes receptivas. Podrías servir una enorme foto de retina en un pequeño iPhone de más de 4G. Aquí es donde puede ser complicado, porque debe agregar muchos más atributos para organizar todas las diferentes opciones que desea dar al navegador. En primer lugar, tendrá que moverse al elemento HTML5 . El elemento tiene mucho que hacer:

ver cómo
¿Está vestido con el elemento ? Los navegadores que no aceptan el elemento HTML5 volverán a la imagen especificada en el elemento . De hecho, es un requisito (o la imagen no se reproducirá) y el último debe aparecer. Pero la parte más fuerte del elemento es el elemento que está oculto por dentro. Los elementos permiten consultas de medios en el atributo de medios. Para darle al navegador diferentes opciones de imagen receptiva, insertará más elementos en el elemento y le dirá al navegador cuándo es apropiado usarlo, con el atributo de medios. Luego agregará una imagen de retina y una imagen ordinaria al atributo srcset en el elemento . Para tener una idea porque es mucho. La idea D424209472C970B30ECFD9AF239D14 está cargada.
Bueno, subió rápidamente. Y ni siquiera quiere saber cuánto tiempo lleva cuando agrega opciones de imagen WebP. No recomendaría cambiar todas las imágenes para incluir manualmente este código adicional. Ciertamente, desea utilizar un instrumento para ayudarlo a automatizar este proceso o complemento para cambiar su HTML. Que nos lleva al complemento WP Retina 2x. Opción 2: Instale y configure el complemento WordPress Retina 2X WP Retina 2X es un complemento gratuito en WordPress Warehouse con una versión Pro. La versión gratuita será suficiente para este tutorial.
Plugin WP Retina 2x
¿Por qué WordPress Retina 2X es el mejor trabajo para el trabajo?

No tendrá que editar manualmente el código HTML para agregar imágenes de retina
A diferencia de otros complementos de retina, WordPress Retina 2X no requiere renombres todas las imágenes con @2x para identificarlas como imágenes de retina.

WordPress Retina 2X es compatible con complementos de caché, que no se pueden decir para todos los complementos de retina. Tiene una vista de biblioteca de medios (ver más abajo), por lo que puede seguir qué imágenes deben alimentarse con Retina. Esto es útil si tiene un sitio con muchas imágenes existentes.
El complemento le brinda más opciones sobre cómo transmitir sus imágenes de retina en WordPress, por lo que si un método es incompatible con su sitio, puede pasar a otro método.
Se integra bien con Smush y Smush Pro
La actualización de WP Retina 2X Pro le brindará herramientas adicionales para acelerar el proceso de carga y reemplazo de muchas imágenes existentes
Centrémonos en esta última razón, porque la optimización de la imagen se vuelve aún más importante cuando se trabaja con imágenes de retina. Con la foto del escarabajo de arriba, puede ver cómo el tamaño del archivo de imagen de retina es el doble que la imagen habitual. Si tiene muchas imágenes en la página, esto ralentizará lentamente su sitio. Smush puede ayudarlo a optimizar sus imágenes, pero Smush Pro le dará una ventaja adicional. Smush Pro CDN puede convertir automáticamente sus imágenes en archivos WebP, que son mucho más pequeños que JPEG y PNG comparables. Además, Smush Pro CDN cambia automáticamente su imagen, por lo que si su biblioteca de medios tiene imágenes de gran tamaño, Smush Pro CDN proporcionará el tamaño correcto. Prueba el Free Smush Pro aquí. Cómo configurar el complemento de WordPress Retina 2X para hacer imágenes para la pantalla Retina para pasar algunas configuraciones disponibles en el complemento Retina de WordPress. Ajustes básicos
Deshabilitar las dimensiones le permite evitar convertir ciertas dimensiones de la imagen en la retina para guardar espacio en disco. La calidad de retina le permite establecer la calidad de compresión para JPEG. La configuración importante en esta página es el método. Tiene más opciones para transmitir imágenes de retina. Si un método no funciona, elija otra.
PictureFill PictureFill es el método recomendado para transmitir imágenes de retina. Use JS Polyfill para cargar imágenes o reescribir HTML para usar el atributo SCSET en WordPress. Imágenes receptivas Para usar las imágenes receptivas, debe usar WordPress 4.4 o una versión posterior, que usa automáticamente el atributo SCSET en WordPress. El complemento agrega las imágenes de retina al conjunto de origen. Retina.js Este método se basa completamente en JavaScript. El HTML carga tanto la imagen normal, entonces si se detecta el soporte de retina, cargue la retina, de modo que ambos archivos de imagen se descarguen. Reescribir HTML HTML La reescritura cambia las etiquetas SRC cuando se detecta un dispositivo Retina, pero puede tener problemas cuando se usa con algunos complementos de caché. El método de imágenes Retina -Imagini Retina cambiará sus archivos .htaccess para servir los archivos apropiados. Este método no funcionará si usa un CDN, como Smush Pro CDN. Configuración avanzada En la sección Configuración avanzada, debe activar la generación automática, para que las nuevas cargas reciban automáticamente un archivo Retina creado. Luego guarde la configuración presionando el botón azul.
La generación automática es una configuración importante aquí

Paso 3: Cargue las imágenes de retina en WordPress y úselas en su sitio web después de crear imágenes de retina y configurado el complemento, es hora de cargarlas en su sitio. El proceso de carga es el mismo, aunque puede ser necesario ajustar el sitio Configuración para que pueda cargar archivos enormes en su biblioteca de medios. La imagen tiene un ancho de 1200px, pero tendré que usar la versión que es 600px para obtener la calidad de la retina
Cuando use la imagen en su sitio, querrá usar la variación de la imagen que es la mitad del ancho y la altura del tamaño completo. El complemento solo reconoce las imágenes que se crean a través de la biblioteca de medios. Para las imágenes que el complemento no reconoce, como el tema de iconos y logotipos, deberá agregar @2x al nombre del archivo, antes de la extensión .png o .jpeg. Luego cargue el archivo en el mismo lugar con el original para el complemento WP Retina 2X para reconocerlo como el archivo Retina y servirlo en dispositivos compatibles. Entonces, por ejemplo, si tiene un icono del sitio que tiene 200 x 200 icon.png con el nombre del archivo icon.png, creará una versión de 400 x 400 px y lo llamará [correo electrónico protegido] y lo cargará Ftp o sftp en la misma carpeta con icon original.png.png. El complemento se ocupará del resto. Como mencioné anteriormente, si trabaja en un sitio con muchas imágenes existentes, el complemento WP Retina 2X Pro tiene algunas herramientas que ahorran tiempo para hacer que la carga y el reemplazo de imágenes existentes. Posibles problemas con WP Retina 2X Tenga en cuenta que puede tener problemas con el uso del complemento WP Retina 2X si usa ciertas diapositivas o CDN incompatibles. Se sabe que el CDN del motor WP, por ejemplo, causa problemas, por lo que deberá cambiar la regla de reescritura desde la configuración del motor WP aquí. Si usa Amazon S3, no debe usar WP Retina 2X en absoluto. Si está buscando un CDN que solo funcione con WP Retina 2X y no ralentice WordPress, ¿podría sugerirle que pruebe Smush?

Puede usar la versión gratuita para optimizar y mejorar sus imágenes, pero para obtener acceso al CDN y para eliminar realmente algo de peso de esas pesadas imágenes de retina, Smush Pro le dará lo que necesita. Puede registrarse para obtener una muestra gratuita de Smush Pro aquí. Para activar Smush Pro CDN, instale el complemento Smush Pro. Luego, en la configuración de Smush, vaya a la sección CDN y presione el botón .smush CDN se incluye con Smush Pro

Una vez que active el CDN, le sugiero que active la conversión de WebP. Los archivos de imagen WebP son sustancialmente más pequeños, por lo que convertir sus imágenes hará que sus páginas se carguen mucho más rápido. Puede obtener un detalle completo de los beneficios aquí.
Las imágenes de conversión en un tipo de archivo más efectivo son fáciles con Smush Pro

También querrá activar el cambio de tamaño de imagen automática. De esta manera, si tiene imágenes de gran tamaño, no usará tanto espacio para archivos, dando una imagen más grande de lo que necesita. Simplemente gire el interruptor de activación el cambio de tamaño automático de mis imágenes desde la configuración de Smush Pro CDN.
Gire el cambio de tamaño automático de imagen automática del interruptor de activación para acelerar WordPress

Smush CDN le permitirá transmitir las imágenes de retina más efectivas, para que pueda obtener la calidad deseada sin la hinchazón que ralentice su sitio. Todo esto es, mientras que el uso de Smush Pro CDN y el complemento WP Retina 2X es la mejor manera de transmitir la mayoría de las imágenes de Retina en WordPress, las imágenes SVG también son una opción para gráficos simples, como logotipos e iconos planos de logotipos. Puede obtener más información sobre este tipo de archivo complicado aquí. Las imágenes de Retina se ofrecen solo a los visitantes con dispositivos compatibles, otros visitantes no experimentarán un cambio en el rendimiento. Con el complemento WP Retina 2X, recibirán las mismas imágenes que siempre tienen, es decir, hasta que actualicen. Los dispositivos Retina se están volviendo cada vez más populares, por lo que debe comenzar a actualizar su sitio. El mejor lugar para comenzar es asegurarse de que todas las nuevas imágenes que agregue a su sitio estén listas para la retina. Luego cambie las imágenes visuales más grandes e impresionantes de su sitio creando una versión de retina y reemplazando la imagen existente. Luego, pase y escale todas las imágenes de gran tamaño que se han mantenido en el cuerpo de las publicaciones de blog y lo que no. Tendrá un sitio hermoso con fotos fantásticas antes de darse cuenta. ¿Ha intentado actualizar todas las imágenes de su sitio para estar preparados para la retina? ¿Cómo te fue el proceso? ¿Tiene algún consejo para compartir con otros que están a punto de embarcarse en el viaje de la retina?
Etiquetas:
Fondo

imágenes
retina