Cómo optimizar para imágenes más rápidas en WordPress

Los sitios web aumentan en peso. El primer sitio web tenía un tamaño de página promedio de 4 KB. Hoy, el tamaño promedio de la página del sitio web es de 4 MB, que en realidad es dos veces más grande que hace 5 años. Alrededor del 50 % del contenido en un sitio web son imágenes. En los últimos años, he notado un aumento en scripts y hojas de estilo, pero las imágenes siguen siendo el principal contribuyente al peso de un sitio web. Esto respalda la importancia de optimizar las imágenes.

Fuente: Pingdom empuja más datos a través de conexiones más pequeñas. Hoy, la mayoría de los visitantes de su sitio hoy están en su móvil. E incluso si las redes móviles mejoran, las velocidades de conexión globales aún están lejos de lo que la mayoría de las personas con computadoras fuertes usan en diferentes conexiones fijas.

También hay estudios que confirman que menos imágenes en un sitio web aumentarán las conversiones. Y todos sabemos que menos imágenes ofrecen sitios web más rápidos, lo que hace que los visitantes y los motores de búsqueda más felices. Entonces, ¡comencemos a optimizar las imágenes de nuestro sitio! Elegir el formato de imagen correcto

Cuando se trata de las imágenes de los sitios web, hoy se utilizan dos formatos de imagen principales: JPG y PNG. Las imágenes PNG deben usarse para gráficos vectoriales, para ilustraciones, logotipos e imágenes que requieren transparencia. Las imágenes JPG deben usarse para casi cualquier otra cosa. Diría que el sitio promedio debería tener una relación de imágenes de 1:10 PNG y JPG.
Pero, ¿cómo sabes qué tipo de fotos tienes en tu sitio? La forma más fácil de verificar esto es a través de SSH. Simplemente inicie sesión en su servidor, navegue por el directorio principal de su sitio y escriba lo siguiente: Buscar. -name “.png” | Wc -l encontrar. -name “.jpg” | WC -L ¿Cuál es la relación PNG para su JPG para su sitio? Como ejemplo de la importancia del formato de imagen correcto, me gustaría compartir una historia sobre un cliente que vino a nosotros hace aproximadamente un año. Tenían un sitio web de WooCommerce, desarrollado por una agencia de alta gama, con importantes problemas de rendimiento. Su sitio pesaba más de 50 GB, que se utilizan principalmente imágenes de PNG. Después de un análisis de rendimiento y muchas conversiones de imágenes, lo reduje de nuevo a “solo” con un peso de 7.2 GB. ¡Y funcionó mucho mejor! La conversión de imágenes entre diferentes formatos de imagen es, desde un punto de vista técnico, una tarea bastante simple. Sin embargo, lo principal a considerar con WordPress es que el formato de imagen debe cambiarse tanto en el servidor como en la base de datos, con enlaces/referencias a imágenes en todas las publicaciones. La forma más fácil de resolver esto es usar un complemento de WordPress llamado PNG en JPG. Instale y active el complemento, asegúrese de anular la selección de la opción “Deje las imágenes PNG originales en el servidor” y seleccione la opción “Detección de transparencia automática”, luego viaja y convierta todas las imágenes necesarias.
Después de haber terminado, deshabilite/elimine el complemento. Dimensiones de imagen en WordPress
Otra cosa a considerar con las imágenes de WordPress es que cuando subes una imagen, se crean más hijos de esa imagen. Esto se debe al soporte de diseño receptivo de WordPress, donde se muestran diferentes imágenes dependiendo del tamaño o resolución de la pantalla de los visitantes. Una sola imagen puede convertirse fácilmente en más de 10 imágenes en WordPress. Nuestra imagen de suplemento cambiar el tamaño de los dominios Accelerate resuelve este problema para usted de la manera más optimizada, pero veamos qué sucede cuando no usa el dominio acelerado. Por defecto, WordPress incluye tres dimensiones de imagen adicionales, aparte del original: genial, promedio, promedio, promedio genial, promedio, promedio y miniatura. Muchos temas y complementos agregan sus propias dimensiones de imagen. WooCommerce agrega incluso tres dimensiones de imagen adicionales. Al agregar/eliminar las dimensiones de la imagen en un sitio web de WordPress, es una buena idea regenerar las imágenes en la imagen original. Esto se puede hacer a través de complementos, pero recomendaría usar WP-CLI. Y, por supuesto, al agregar imágenes a una página, publicar o similar, asegúrese de seleccionar el tamaño de imagen más adecuado. Lo más probable es que no tenga que insertar la imagen original, sino una imagen grande o de tamaño mediano.

La elección correcta del tamaño de imagen máximo
Las cámaras modernas pueden tomar fotos con resoluciones extremadamente altas. Son geniales para mirarlos en el teléfono o en la pantalla de alta resolución, pero no son tan útiles en su sitio web. Es por eso que necesita establecer un ancho/altura máximo de las imágenes de su sitio. Pocos sitios web, si los hay, requieren más grandes que “Alta definición/HD” o 1920 x 1080 píxeles. Las imágenes Full HD se pueden alinear tanto horizontal como verticalmente, por lo que es una buena idea establecer el ancho/altura máximo en 1920 x 1920 píxeles. Entonces, ¿cómo se hace esto? Bueno, es fácil como siempre con SSH. Inicie sesión en su servidor, explore el directorio principal de su sitio y escriba lo siguiente. Encontrar. -iname ‘*.jpg’ -print0 | XARGS -0 -N 1 MOGRIFY -RESIZE ‘1920X1920>’ Pero no puede continuar cambiando las imágenes del sitio web todo el tiempo. Para limitar la carga de imágenes más grandes, recomendamos usar el complemento de WordPress cambiar el tamaño de la imagen después de la carga. Esto es especialmente cierto para los sitios web en los que los visitantes/usuarios pueden cargarse.
Simplemente instale/active este complemento y, en la configuración del complemento, establezca el máximo ancho y altura máximos deseados. Tenga en cuenta que no recomendamos usar las funciones de compresión de este complemento. Y, por supuesto, su tema de WordPress debe ser receptivo, con el atributo de HTML SRCSET. Con un tema receptivo, se muestran diferentes tamaños de imagen para los visitantes de su sitio, dependiendo del tamaño de sus pantallas. Optimizar todas tus fotos

¡Ahora llegamos a la parte divertida! La optimización efectiva de las imágenes de su sitio primero, sí, siempre debe optimizar todas sus imágenes. WordPress tiene un nivel de compresión predeterminado del 85% para las imágenes JPG, pero no optimizará sus imágenes. Tienes que hacer esto solo. Hay muchas formas diferentes de optimizar las imágenes que solo pudimos escribir un artículo al respecto, por lo que me centraré solo en la configuración que recomiendo. Si eres de otra opinión aquí, no dudes en dejar un comentario a continuación. Con imágenes JPG, recomendaría usar una compresión progresiva. Con la compresión progresiva, las imágenes se muestran más rápido y se cargan de baja calidad. También recomiendo eliminar los metadatos de las imágenes durante el proceso de optimización. Hay dos formas principales cuando se trata de comprimir imágenes JPG, sin compresión de pérdida y pérdida. La compresión con pérdidas tiende a hacer que las imágenes sean más pequeñas, pero es más agresiva y puede tener un impacto visible en la calidad de la imagen.
Qué compresión para usar difiere entre los sitios web, si tiene alguna duda, vaya sin pérdidas. Cómo comprimir las imágenes del sitio web
En primer lugar, no debe usar complementos de WordPress para comprimir sus imágenes.Es una mala práctica y entraré en más detalles al respecto más adelante en el artículo.Si puede, siempre debe comprimir sus imágenes antes de cargarlas en su sitio web.La mayoría de los programas de edición de imágenes de hoy, como GIMP y Photoshop, incluyen imágenes con niveles de compresión “Web optimizados”.Por lo general, no son lo suficientemente buenos, pero es un buen comienzo.

TinyPng ofrece un excelente y gratuito servicio de optimización de imágenes en línea. Para comprimir las imágenes de su sitio, recomendamos usar la compresión en el lado del servidor con software como JPEGOPTIT y OPTIPNG. Deben programarse para funcionar con Chron. Al script de compresión de imágenes le gusta practicar lo que predicamos y cuando comprimamos las imágenes del sitio, utilizamos el software JPEGOPTIT y OptIPng mencionado anteriormente. De hecho, tenemos una configuración de comandos que ejecutamos, lo que no solo hace una muy buena compresión, sino que cuando los repetimos, solo comprime las imágenes previamente sin comprimir. Una cosa importante a tener en cuenta aquí es que la compresión de la imagen puede ser una tarea de recursos muy difícil. Esto no es algo que desee ejecutar todo el tiempo, ya que puede causar sobrecarga y/o bloquear su servidor. El script de compresión de imagen está configurado para ejecutarse con la más mínima prioridad posible. Aquí hay un script bash simple para una compresión efectiva de imágenes JPG y PNG. #!/bin/bash # script de compresión de imagen simple por servate # versión 1.0, 22 de noviembre de 2019 # Establezca la ruta completa en su sitio web Home Directy a continuación Homedir = “/Full/Path/To/Sitioking/Homedir/” # Comprimir todas -Compressado .jpg y .png Images CD $ Homedir -in 19 Find. -iname ‘*.jpg’ -print0 | XARGS -0 JPEGOPTIM –MAX = 82 -All -PRROGRESSIVE –SSTIP -ALL –PrepServes –Tootals -force -in 19 Find. -iname ‘*.jpeg’ -print0 | XARGS -0 JPEGOPTIM –MAX = 82 -All -PRROGRESSIVE –SSTIP -ALL –PrepServes –Tootals -force -in 19 Find. -iname ‘*.png’ -print0 | Xargs -0 optipng -o7 -eserve echo “compresión de imagen hecha!”
Copie/inserte este código en un script que almacena en el almacenamiento de su sitio. Tenga en cuenta que la variable Homedir debe establecerse en el director principal de su sitio web. Haga el script ejecutable a través de SSH/SFTP usando Chmod +X. Finalmente, programe el script para su ejecución una vez por semana. Lo más probable es que no tenga que ejecutarlo con más frecuencia. ¿Por qué no usa complementos? Entonces, ¿por qué le gustaría pasar por todo esto con un script y programarlo a través del cron, cuando simplemente puede usar un complemento de WordPress para sus imágenes? La razón principal para no usar un complemento es que retrasará su sitio web y/o servidor web. De hecho, es un desperdicio de recursos para usar complementos de compresión de imágenes. Hacen casi lo mismo que el software en el servidor mencionado anteriormente, pero a través del servidor web y WordPress. Es muy ineficiente. Los complementos de optimización de imágenes siempre se agregan al TTFB de su sitio y algunos complementos ofrecen diferentes características dependiendo de su proveedor de alojamiento. Sí, te miramos, ewww. Si realmente usó un complemento, es posible que desee usar un complemento con soporte de compresión de nube externa. Esto reducirá el embarazo en su sitio web/servidor, dos complementos que ofrecen que son cortos y tinypng. Sin embargo, tenga en cuenta que incluso con la compresión externa, el rendimiento de su sitio se degradará, porque las imágenes deben moverse de/al servidor. Es mejor resolver la compresión de la imagen utilizando el software en el lado del servidor. Imágenes perezosas
Independientemente de cómo optimice y comprime las imágenes de su sitio, probablemente siempre debe cargar sus imágenes. La carga perezosa significa que solo las imágenes que son visibles para el visitante, en su pantalla, se cargan inicialmente. El resto de las imágenes se cargan como/cuando el visitante las ve o las desplaza en la pantalla. Hay dos formas de subir perezosamente las fotos hoy. Con la técnica de carga perezosa “antigua”, se utiliza un JavaScript para perezarse las imágenes. Desafortunadamente, esto se suma algo a la cantidad de scripts en su sitio web, pero funcionará con casi todos los navegadores web modernos. Hay un buen complemento para esto, simplemente llamado Lazy Load. Instalarlo/activarlo y trabajar. Con la “nueva” técnica de carga perezosa, la nueva carga de atributos = Lazy se agrega a todas las imágenes del sitio. Actualmente, este atributo solo es aceptado por Google Chrome, pero más navegadores web pueden aceptarlo en el futuro. Google tiene un complemento similar llamado Native LazyLoad. WP-Cli

WP-CLI, la interfaz de línea de control de WordPress, ofrece múltiples funciones de imagen interesantes. Se incluye implícitamente “WP Media Image Size” que enumeran todos los tamaños de las imágenes grabadas para su sitio y “WP Media Regenere” que pueden regenerar el tamaño de la imagen de WordPress (mucho mejor que el uso de un complemento). Una de las cosas hermosas con WP-CLI es que puede instalar funciones adicionales. Una de estas funciones es “WP Image-Optimize”, que permite la optimización de imágenes a través de WP-CLI. Creo que este paquete WP-Cli es realmente interesante y probablemente el futuro para optimizar la imagen de WordPress. Pero hoy, desde mi experiencia, no es estable y eficiente para un sitio de producción. Características de la imagen CloudFlav que realmente recomendamos usar CloudFlare. Cloudflare es el servicio de seguridad y CDN más grande del mundo, y Servolt es oficialmente socio empresarial de Cloudflare. Cloudflare incluye una serie de características de imagen interesantes con sus planes.

Cloudflare Free incluye su servicio CDN gratuito. Con su red global de nodos de servidor/CDN, es una buena oportunidad que las nubes de CDN estén más cerca de los visitantes de su sitio que de su servidor.
Cloudflare Pro incluye una función llamada Polish. Puede optimizar automáticamente las imágenes de su sitio, sin pérdidas ni pérdidas. También puede servir a los visitantes de WebP de formato de imagen más moderno y más rápido con navegadores web que aceptan esto.

El cambio de tamaño de la imagen de CloudFlare en la nube que camina tiene una de las funciones de imagen más fuertes que hemos visto que resulta la imagen en el borde de CloudFlare. Esto significa que su sitio, que ejecuta CloudFlare, puede proporcionar una sola imagen a la nube, y lo cambiará, lo comprimirá y lo almacenará en su red. Para las imágenes ordinarias, que no utilizan la propiedad de SRCSET, no hace nada más que una gran característica y limita la cantidad de diferentes tamaños que tiene que almacenar en el servidor. Pero, en combinación con SRCSET, esta característica es como una magia. Al usar el cambio de tamaño de la imagen con SRCSET, puede hacer uno de los siguientes: Servir el tamaño de imagen correcto, cada vez, para la ventana de vista de los usuarios. Listo con imágenes de gran tamaño.

Ofrece una compresión más grande en imágenes pequeñas/en miniatura donde los detalles son menos importantes y una compresión más pequeña en las imágenes grandes.

Juega con la función de cambio de tamaño de imagen CloudFlare que puede reproducir con esta función con esta imagen de mi WordCamp nordic en la URL, algunos de los parámetros están configurados para usar el cambio de tamaño de la imagen en la nube. Aquí establecemos el ancho máximo en 2000px y la calidad en 1. Ajuste los parámetros de URL para ver el efecto instantáneo. Por supuesto, Cloudflas tiene mucho más que eso. Siéntase libre de leer más sobre el alojamiento de Cloudflating que ofrecemos aquí en ServBelt. Y eso es sobre esto fue casi toda mi discusión en la reunión de WordPress en Estocolmo, Suecia. La discusión se transmitió en vivo y se registró aquí también: