Complementos de optimización de mage que puede utilizar
Afortunadamente, con WordPress, no tienes que hacer todo el formateo o la compresión a mano. Puedes usar complementos para hacer al menos parte del trabajo automáticamente. Hay varios complementos que optimizarán automáticamente tus archivos de imagen a medida que los cargues. Incluso optimizarán las imágenes que ya han subido. Esta es una característica útil, especialmente si ya tiene un sitio web lleno de imágenes. A continuación, presentamos algunos de los mejores complementos para formatear tus imágenes y obtener un mejor rendimiento.
Sin embargo, es importante que no dependas únicamente de los complementos en sí. Por ejemplo, no deberías cargar imágenes de 2 MB en tu biblioteca de medios de WordPress. Esto puede resultar en consumir el espacio en disco de tu servidor web muy rápido. El mejor método es cambiar rápidamente el tamaño de la imagen en una herramienta de edición de fotos de antemano y luego cargarla y usar uno de los siguientes complementos para reducirla aún más.
- Imagify Image Optimizer
- Optimizador de imagen ShortPixel
- Optimole
- Optimizador de imágenes en la nube de EWWW
- Optimus Image Optimus
- WP Smush
- TinyPNG
- ImageRecycle
Imagify Image Optimizer
Imagify es creado por el mismo equipo que desarrolló WP Rocket, con el que la mayoría de ustedes probablemente estén familiarizados. Es compatible con WooCommerce, NextGen Gallery y WP Retina. También tiene una función de optimización masiva y puedes elegir entre tres niveles diferentes de compresión, normal, agresiva y ultra. También tienes una función de restauración, por lo que si no estás satisfecho con la calidad, puedes restaurar con un clic y volver a comprimir a un nivel que se adapte mejor a tus necesidades. Hay una versión gratuita y una premium. Está limitado a una cuota de 25 MB de imágenes por mes con una cuenta gratuita.
También puedes deshacerte de la imagen original y cambiar el tamaño de tus imágenes más grandes con este complemento. Imagify también comprime imágenes en sus servidores de terceros, no en el tuyo, lo cual es muy importante en lo que respecta al rendimiento. Imagify no debería ralentizar tu sitio de WordPress.
Optimizador de imagen ShortPixel
ShortPixel Image Optimizer es un complemento gratuito que comprime 100 imágenes por mes y comprime varios tipos de archivos, incluidos PNG, JPG, GIF, WebP e incluso archivos PDF. Hará compresión de imagen con pérdida y sin pérdida. Convertirá CMYK a RGB. Lleva tus imágenes y miniaturas a la nube para su procesamiento y luego las devuelve a tu sitio para reemplazar las originales. Crea una copia de seguridad de los archivos originales para que puedas restaurarlos manualmente si lo deseas. Convertirá archivos de galería a granel. No hay límite para el tamaño del archivo.
Optimole
Optimole es un complemento de WordPress de optimización de imágenes que reduce automáticamente el tamaño de sus imágenes sin que se requiera ningún trabajo por su parte. Tiene una gran ventaja cuando se trata de la velocidad de carga de tu sitio, ya que está completamente basado en la nube y nunca muestra imágenes más grandes de lo que deberían, es decir, muestra el tamaño de imagen perfecto para la ventana gráfica y el navegador del visitante.
Además, el complemento proporciona una carga diferida y un reemplazo eficiente de la imagen; degrada la calidad de la imagen si el visitante tiene una conexión a Internet más lenta, lo que lo hace destacar entre la multitud. También detecta automáticamente el navegador del usuario y sirve WebP si es compatible.
Todas las imágenes que comprime Optimole se envían a través de un CDN rápido. Puedes probar Optimole gratis o actualizar al plan premium si necesita ancho de banda adicional y espacio de procesamiento.
Optimizador de imágenes en la nube de EWWW
EWWW Image Optimizer Cloud te ayuda a hacer tus imágenes más pequeñas y tu sitio más rápido con menos problemas al comenzar. Sin límites de tamaño y con mucha flexibilidad, puede usar los valores predeterminados o personalizar el complemento completamente a tu gusto. Todos los usuarios de EWWW IO pueden usar Bulk Optimizer para comprimir tus imágenes existentes, o usar el modo de lista de la Biblioteca de Medios para elegir imágenes específicas para comprimir.
Se pueden escanear carpetas adicionales para asegurarse de que cada imagen de tu sitio esté optimizada correctamente. EWWW IO incluso te permite convertir tus imágenes a formatos de próxima generación como WebP, o encontrar el mejor formato de imagen para una imagen con opciones de conversión multiformato. La compresión de imágenes comienza en solo $ 0.003 / imagen.
La API de compresión premium te permite llevar la compresión a un nivel completamente nuevo sin sacrificar la calidad, lo que desbloquea la compresión de PDF e incluye cómodas copias de seguridad de imágenes de 30 días. La función ExactDN, que comienza en $ 9 / mes, brinda compresión automática (sin necesidad de compresión del lado del servidor), cambio de tamaño automático y todos los beneficios de una CDN para obtener resultados más rápidos e incluso más rendimiento en cualquier tamaño de dispositivo.
Optimus Image Optimus
Optimus WordPress Image Optimizer utiliza compresión sin pérdida para optimizar tus imágenes. Sin pérdida significa que no verás ninguna pérdida de calidad. Es compatible con WooCommerce y sitios múltiples y tiene una buena función de optimización masiva para aquellos que ya tienen grandes bibliotecas de medios existentes. También es compatible con el complemento WP Retina WordPress. Existe una versión gratuita y premium. En la versión premium pagas una vez al año y puedes comprimir una cantidad ilimitada de imágenes. Si lo combina con su complemento Cache Enabler, también puede sumergirse en imágenes WebP, que es un nuevo formato de imagen ligero de Google.
WP Smush
WP Smush tiene una versión gratuita y premium. Reducirá la información oculta de las imágenes para reducir el tamaño sin reducir la calidad. Escaneará imágenes y las reducirá a medida que las subas a tu sitio. También escaneará imágenes que ya hayas subido y las reducirá también. Agarrará hasta 50 archivos a la vez. También puedes aplastar manualmente si lo deseas. Aplastará los tipos de imágenes JPEG, GIF y PNG. Los tamaños de archivo están limitados a 1 MB.
- Es compatible con algunos de los complementos de biblioteca de medios más populares, como WP All Import y WPML.
- Toda la optimización de la imagen se realiza con técnicas de compresión sin pérdida, manteniendo alta la calidad de la imagen.
- No importa en qué directorio guardes tus imágenes. Smush las encuentra y las comprime.
- Smush tiene una opción para establecer automáticamente el ancho y el alto de todas las imágenes, por lo que todas sus imágenes se redimensionan a proporciones idénticas.
TinyPNG (también JPG comprimidos)
TinyPNG utiliza los servicios TinyJPG y TinyPNG (la cuenta gratuita le permite comprimir alrededor de 100 imágenes por mes) para optimizar sus imágenes JPG y PNG. Comprimirá automáticamente nuevas imágenes y comprime de forma masiva sus imágenes existentes. Convertirá CMYK a RBG para ahorrar espacio. Comprimirá imágenes JPEG hasta un 60% y las imágenes PNG hasta un 80% sin una pérdida visible en la calidad de la imagen. No tiene límite de tamaño de archivo.
ImageRecycle
El complemento ImageRecyle es un optimizador automático de imágenes y PDF. Este complemento se centra no solo en la compresión de imágenes, sino también en archivos PDF. Una característica realmente útil es la capacidad de establecer el tamaño mínimo de archivo para la compresión. Por ejemplo, si tiene imágenes de 80 KB de tamaño, puede hacer que las excluya automáticamente de la compresión. Esto garantiza que las imágenes y los archivos nunca se compriman demasiado. También incluye optimización masiva y cambio de tamaño de imagen automático. Nota: Tienen una prueba gratuita de 15 días, pero este es un servicio premium, y las imágenes se cargan y comprimen usando sus servidores. No cobran por mes, sino por la cantidad total de imágenes comprimidas, a partir de $ 10 por 10,000.
Optimización de imágenes para el estudio de caso web
Decidimos hacer nuestro propio pequeño estudio de caso y pruebas para mostrarle cuánto puede afectar la optimización de tus imágenes para la web a la velocidad general de su sitio de WordPress.
JPG sin comprimir
Primero cargamos 6 JPG sin comprimir, todos los cuales tenían más de 1 MB de tamaño, a nuestro sitio de prueba. (Vea los JPG originales sin comprimir). Luego hicimos 5 pruebas a través de Pingdom y tomamos el promedio. Como puede ver en la prueba de velocidad a continuación, nuestro tiempo de carga total fue de 1,55 segundos y el tamaño total de la página fue de 14,7 MB.
JPG comprimidos
Luego comprimimos los JPG con el complemento Imagify WordPress, usando la «configuración agresiva». (Vea los nuevos JPG comprimidos, que aún se ven igual de hermosos). Luego hicimos 5 pruebas a través de Pingdom y tomamos el promedio. Como puede ver en la prueba de velocidad a continuación, nuestro tiempo de carga total se redujo a 476 ms y el tamaño total de la página se redujo a 2,9 MB. Nuestros tiempos de carga totales se redujeron en un 54,88% y el tamaño de la página se redujo en un 80,27%.
Casi no hay otra optimización que pueda hacer en tu sitio que te permita reducir los tiempos de carga en más del 50%. Es por eso que la optimización de la imagen es tan importante, el proceso anterior fue automatizado por el complemento. Es un enfoque de no intervención para un sitio de WordPress más rápido. La única otra optimización dramática que podría hacer sería cambiar sus hosts de WordPress. Muchos clientes que se mudan a Kinsta ven incrementos de velocidad de más del 45%. ¡Imagínate mudarse a Kinsta y optimizar tus imágenes!
Al optimizar tus imágenes, ya sea utilizando una herramienta de edición de fotos o un complemento de WordPress, también puede corregir la advertencia «Optimizar imágenes» que recibe en Google PageSpeed Insights.
Si tienes otras advertencias de optimización de las herramientas de prueba de velocidad, asegúrate de consultar nuestra publicación en Google PageSpeed Insights y nuestro tutorial detallado de Pingdom.
Hemos tomado nuestro conocimiento sobre la gestión eficaz de sitios web a gran escala y lo hemos convertido en un libro electrónico y un curso de vídeo. ¡Haga clic aquí para descargar la Guía 2020 para administrar más de 40 sitios de WordPress!
Usar SVG
Otra recomendación es usar SVG junto con sus otras imágenes. SVG es un formato vectorial escalable que funciona muy bien para logotipos, íconos, texto e imágenes simples. Aquí hay un par de razones por las que:
- Los SVG se pueden escalar automáticamente tanto en los navegadores como en las herramientas de edición de fotografías. ¡Esto lo convierte en un sueño para diseñadores gráficos y web!
- Google indexa archivos SVG, de la misma manera que lo hace PNG y JPG, por lo que no tienes que preocuparte por el SEO.
- Los SVG son tradicionalmente (no siempre) más pequeños en tamaño de archivo que los PNG o JPG. Esto puede resultar en tiempos de carga más rápidos.
Genki escribió un gran artículo donde compara el tamaño de SVG vs PNG vs JPEG. A continuación se muestran algunas conclusiones de sus pruebas en las que comparó los tres tipos de imágenes diferentes.
Como puedes ver arriba, el SVG es una disminución en el tamaño del archivo del 92.51% en comparación con el JPG. Y en comparación con PNG, 92,83%.
Mejores prácticas
Estas son algunas de las mejores prácticas generales cuando se trata de cómo optimizar imágenes para la web:
- Si usas un complemento de WordPress, usa uno que comprime y optimiza imágenes externamente en sus servidores. Esto, a su vez, reduce la carga en tu propio sitio.
- Utiliza imágenes vectoriales siempre que sea posible junto con tus PNG y JPG.
- Utiliza una CDN para mostrar tus imágenes rápidamente a los visitantes de todo el mundo.
- Elimina los datos de imagen innecesarios.
- Recorta el espacio en blanco y vuelve a crearlo usando CSS para proporcionar el relleno.
- Utilice los efectos CSS3 tanto como sea posible.
- Guarda tus imágenes en las dimensiones adecuadas. Aunque recuerda, WordPress ahora admite imágenes receptivas para servirlas sin cambiar su tamaño con CSS.
- Utiliza siempre el formato de archivo .ico para tu favicon.
- Utiliza fuentes web en lugar de colocar texto dentro de las imágenes; se ven mejor cuando se escalan y ocupan menos espacio.
- Utiliza imágenes de trama solo para escenas con muchas formas y detalles.
- Reduce la profundidad de bits a una paleta de colores más pequeña.
- Utiliza compresión con pérdida siempre que sea posible.
- Experimenta para encontrar la mejor configuración para cada formato.
- Utiliza GIF si necesita animación. (pero comprime tus GIF animados)
- Utiliza PNG si necesitas gran detalle y alta resolución.
- Utiliza JPG para fotografías y capturas de pantalla generales.
- Elimine cualquier metadato de imagen innecesario.
- Automatiza el proceso tanto como sea posible.
- En algunos casos, es posible que desees cargar imágenes de forma diferida para un procesamiento de la primera página más rápido.
- Guarda las imágenes como «optimizadas para la web» en herramientas como Photoshop.
- Utiliza WebP en Chrome para mostrar imágenes más pequeñas.
No olvides optimizar tus imágenes, de lo contrario, tu sitio de WordPress podría parecer que está en cámara lenta. ¡Y sabes lo frustrante que es «lento»!
Una vez que hayas formateado tus imágenes para un mejor rendimiento y seguido las mejores prácticas, tu sitio agradará más a los motores de búsqueda, los navegadores y las redes, y se cargará más rápido para tus lectores. Ah, y asegúrate de consultar nuestro tutorial sobre hotlinking, para evitar que la gente robe tus imágenes y ancho de banda.
¿Haz formateado tus imágenes para un mejor rendimiento? ¿Los formatea a mano, usas un complemento o ambos? ¿Hay alguna otra herramienta o complemento que recomendaría? ¿Tienes algo que agregar?
Neothek ofrece servicios de web hosting, registro de dominios, correo electrónico, certificados SSL, diseño de páginas web y diseño gráfico.