La guía definitiva para la optimización de imágenes para WordPress

1 … 2 … 3 … – su cliente potencial acaba de cerrar su sitio porque aún se está cargando. ¿Suena familiar? Creo que fuiste ese visitante impaciente y frustrado muchas veces. Sé que lo estaba. Es por eso que compilé una lista definitiva de cosas que necesita saber sobre la optimización de imágenes. Va a ser largo, pero espero que valga la pena leerlo.

Tabla de contenido

• El contenido de este artículo en video de 3 minutos
• Beneficios de la optimización de imágenes
• Formatos de imagen
• Cambiar el tamaño de las imágenes antes de cargarlas
  • Imsanity WordPress Plugin para cambiar el tamaño de las imágenes automáticamente
• Comprimir imágenes
  • Las mejores herramientas en línea para la compresión de imágenes
    • TinyPNG
    • optimizilla
    • Compresor
    • ImageOptim
    • ImageSmaller
    • kraken
    • JPEG.io
    • Perspectivas de PageSpeed
    • Resultados para la mejor herramienta de compresión en línea
    • La mejor herramienta de compresión en línea para archivos JPEG
    • La mejor herramienta de compresión en línea para PNG
    • La mejor herramienta de compresión de imágenes en línea en general
  • Los mejores complementos de WordPress para la compresión de imágenes
    • WP Smush (Versión gratuita)
    • Comprime imágenes JPEG y PNG con TinyPNG
    • Píxel corto
    • imaginar
    • EWWW Image Optimizer (Versión gratuita)
    • Resultados para el Mejor Complemento de WordPress para Compresión de Imágenes
    • El mejor complemento de WordPress para comprimir archivos JPEG
    • El mejor complemento de WordPress para comprimir PNG
    • El mejor complemento de WordPress para la compresión de imágenes en general
• Conclusión

El contenido de este artículo en video de 3 minutos

Aquí hay una descripción general en video muy rápida de este artículo. Todavía recomiendo leer, pero solo para molestarte lo suficiente, aquí vamos:

Beneficios de la optimización de imágenes

¿Todavía no estás convencido de todo lo relacionado con la optimización de imágenes? Veamos todos los beneficios que obtendrá, si solo soluciona ese pequeño y trivial problema:

• Tu sitio será más rápido
• Tu puntuación de Google PageSpeed ​​será mejor
• A Google le agradarás más y tu posicionamiento en los motores de búsqueda mejorará
• Su tasa de rebote será menor y más visitantes verán su página
• Necesitará menos almacenamiento en sus servidores y gastará menos recursos en los servidores, lo que le ahorrará dinero
• Ahorrará dinero del plan de datos móviles para usted y sus visitantes

Tengo tu atención ahora, ¿verdad? Ahora podemos empezar con el trabajo real.

Formatos de imagen

La optimización de imágenes comienza con algunos conocimientos básicos sobre los formatos de imagen. Los dos formatos más comunes en Internet son PNG con extensión .png y JPEG con extensión .jpg . Usaré JPEG en la mayoría de los casos, ya que es el mejor formato para fotos, imágenes con degradados e imágenes con millones de colores. Por otro lado, PNG es mejor con imágenes de color limitadas, como logotipos, y con imágenes con transparencia.

El siguiente ejemplo le mostrará cuán importante es elegir el formato de imagen correcto para la mejor optimización de la imagen.

Guardaré nuestra imagen child.jpg no optimizada en formato .jpg y .png . Podemos ver que la imagen child-saved-as-jpeg.jpg tiene un tamaño de 3,1 MB y la imagen child-saved-as-png.png tiene un tamaño de 4,5 MB. En este caso, la imagen PNG se volvió un 45 % más grande que la imagen JPEG, una diferencia que simplemente se deriva de elegir un formato de imagen específico. No hay manera más fácil de ahorrar tanto espacio con tan poco esfuerzo. Bueno, tal vez lo haya. Echemos un vistazo al siguiente paso.

Cambiar el tamaño de las imágenes antes de cargarlas

Ahorramos algo de espacio al elegir el formato de imagen correcto en nuestro ejemplo anterior, pero podemos ahorrar aún más espacio si cambiamos el tamaño de la imagen antes de cargarla. Pero, ¿cuánto debemos redimensionarlo? Realmente depende del ancho y el contenedor de su sitio web.

En nuestro sitio de ProteusThemes, el ancho máximo de la imagen es de 1110 px, por lo que cambiaré el tamaño de la imagen child.jpg actual, que tiene un ancho de 1800 px, a 1110 px de ancho. En ese caso acabamos de pasar de 3,1 MB a 1,1 MB de tamaño, que es otro 65% de espacio ahorrado y reducido .

Sugerencia: puede cambiar el tamaño de las imágenes directamente en su biblioteca multimedia de WordPress. Haga clic en Medios -> Seleccione su imagen -> Editar imagen y elija nuevas dimensiones para su imagen:

Imsanity WordPress Plugin para cambiar el tamaño de las imágenes automáticamente

Si no quiere pensar en cambiar el tamaño de la imagen o si muchos usuarios diferentes suben imágenes a su sitio web, entonces el complemento Imsanity debería funcionar perfectamente para usted. En la configuración del complemento, puede elegir el ancho o alto máximo que deben tener las imágenes y el complemento cambiará el tamaño de todas las imágenes más grandes a ese tamaño. También puede seleccionar la función de cambio de tamaño masivo para cambiar el tamaño de todas las imágenes existentes. Definitivamente recomiendo este complemento a cualquier persona que tenga problemas para cambiar el tamaño de cada imagen por separado antes de cargarla. Puede descargar el complemento Imsanity de forma gratuita.

Comprimir imágenes

Ahora que hemos aprendido los conceptos básicos de la optimización de imágenes, veamos cómo podemos mejorar nuestro juego. Podemos encontrar numerosas herramientas online de compresión de imágenes en Internet e incluso plugins de WordPress , que reducirán el tamaño de tu imagen. Pero debemos tener cuidado aquí, algunas de las herramientas casi no harán ninguna diferencia y algunas de las configuraciones destruirán nuestra imagen y la harán inútil. Entonces, ¿cómo encontrar el equilibrio perfecto? No se preocupe, en el momento de escribir este artículo (junio de 2017, actualizado en 2018), probamos todas las herramientas/servicios en línea más populares y complementos de WordPress para la optimización de imágenes y hemos hecho una selección de los mejores.

Hemos usado 3 imágenes JPEG diferentes y 1 imagen PNG para realizar nuestra prueba.

Las 3 imágenes JPEG son de Unsplash, de los autores Mi Pham, Breather, Denise Chan y Niko Virtanen. Fueron recortados y redimensionados a 1110 x 624 px para fines de prueba.

Para la imagen PNG, hemos creado nuestra propia imagen con el logotipo de ProteusThemes y algún patrón detrás. Al igual que las imágenes de prueba JPEG, esta también se redimensiona a 1110 x 624 px.

Ahora pasaremos todas las imágenes a través de todas las herramientas y complementos seleccionados para la compresión y descubriremos cuál es el mejor para que usted use. Comencemos con las herramientas en línea.

Las mejores herramientas en línea para la compresión de imágenes

Al momento de escribir (junio de 2017, actualizado en 2018), aquí hay una lista completa de las herramientas y servicios en línea más populares para la compresión de imágenes:

• TinyPNG
• optimizilla
• Compresor
• ImageOptim
• ImageSmaller
• kraken
• JPEG.io
• Perspectivas de PageSpeed

Si cree que alguna otra herramienta merece estar en esa lista, háganoslo saber, la probaremos y la agregaremos a la lista. Puede encontrar mis reseñas de cada herramienta a continuación, además de mi evaluación de las mejores. Si no desea leer sobre cada herramienta individual, haga clic aquí: ¡Muéstreme los ganadores!

TinyPNG

TinyPNG fue una de las primeras herramientas de compresión de imágenes que usé y todavía la uso a veces. No hay opciones, solo subes las imágenes y las obtendrás comprimidas. Con esta herramienta en línea, puede cargar masivamente hasta 20 imágenes con un tamaño de 5 MB.

optimizilla

Optimizilla es otra herramienta en línea simple pero poderosa. Es de uso gratuito y tiene la opción de cargar de forma masiva hasta 20 imágenes. Para obtener la mejor relación compresión/calidad, dejamos la configuración de calidad en 90, como está por defecto. Si desea impulsar la compresión aún más, simplemente cambie esta configuración y verá los cambios en la calidad de inmediato.

Compresor

Compressor tiene el potencial de convertirse en una de las mejores herramientas para la compresión de imágenes, pero tiene un gran defecto. Actualmente no existe la opción de carga masiva, lo que significa que solo puede comprimir 1 imagen a la vez. Aparte de eso, es gratis, fácil de usar y con dos opciones de compresión. Usamos la opción con pérdida en nuestra prueba, ya que la calidad de la imagen sigue siendo la misma después de la compresión.

ImageOptim

ImageOptim es una herramienta con muchas configuraciones. Puede elegir entre 3 opciones de calidad diferentes y 3 opciones de calidad de color diferentes. Descubrimos que los mejores resultados de compresión/calidad se obtienen con la configuración predeterminada. Establezca la calidad en media y la calidad del color en automática. Lo que más me molestó con ImageOptim , además del diseño un poco anticuado, fue que exporta archivos JPEG incluso si subo archivos PNG . Le envié un correo electrónico a Kornel (creador de ImageOptim) sobre ese problema y ya lo arregló.

ImageSmaller

Al igual que con Compressor , ImageSmaller tiene el mismo defecto. No hay opción para la carga masiva. Sin embargo, tiene uno de los límites de carga más grandes, con 50 MB. Si tiene archivos más grandes para optimizar, ImageSmaller podría ser la herramienta adecuada para usted.

kraken

Kraken es una herramienta de compresión de imágenes premium, con el mejor tablero entre todas las herramientas que he probado. Encontrará una interfaz web agradable para cargar sus imágenes y muchas configuraciones diferentes para obtener los mejores resultados. Usamos su configuración con pérdida predeterminada en nuestra prueba.

JPEG.io

JPEG.io es una versión gratuita de la misma herramienta que Kraken . Tiene las mismas capacidades de compresión, pero como nos dice la URL del sitio web, es solo para archivos JPEG.

Perspectivas de PageSpeed

No esperabas ver este aquí, ¿verdad? PageSpeed ​​Insights también nos brinda un .zip de archivos comprimidos cuando estamos probando nuestro sitio. Esta no es la forma más fácil de usar, ya que tendrás que tener tu sitio web en línea con todas las imágenes y luego reemplazarlas por las nuevas comprimidas, pero obtendrás imágenes comprimidas tal como las quiere Google.

Resultados para la mejor herramienta de compresión en línea

A continuación encontrará gráficos con los resultados de todas nuestras pruebas. También puede consultar nuestra hoja de cálculo detallada para obtener más información.

La mejor herramienta de compresión en línea para archivos JPEG

La mayoría de las herramientas comprimieron nuestros archivos JPEG de prueba en alrededor del 80 % . Echemos un vistazo a nuestra imagen child.jpg . Comenzamos con un tamaño de imagen de 3,1 MB y, después de cambiar el tamaño y comprimir, nuestra imagen tenía solo 165 KB, lo que significa un 95 % más pequeño en tamaño . Ahora, ¡esa es una diferencia! Logramos obtener los mismos resultados con Compressor e ImageOptim . Entonces, parece que tenemos dos ganadores aquí.

La mejor herramienta de compresión en línea para PNG

Para nuestra prueba de PNG, obtuvimos un tamaño reducido promedio del 50 % con todas las herramientas. Sin embargo, Optimizilla fue un poco mejor que el resto de ellos, con un 56% de tamaño reducido de nuestra imagen pt-logo.png .

La mejor herramienta de compresión de imágenes en línea en general

Incluso si Optimizilla no hubiera sido la mejor herramienta de compresión para archivos JPEG, la habría recomendado como la mejor herramienta de compresión actualmente disponible en línea. Los archivos JPEG comprimidos al 79 % siguen siendo asombrosos y puedes aumentarlos aún más con una configuración de calidad simple en la página. También tiene una opción para la carga masiva, donde falta Compressor y una carga más confiable que ImageOptim , donde todas las imágenes se exportan como JPEG, incluso si los PNG están entre ellos. Por todas estas cosas, creo que Optimizilla merece el título de la mejor herramienta de compresión de imágenes en línea.

A continuación, veamos si los complementos de WordPress pueden vencer a las herramientas de compresión de imágenes en línea.

Los mejores complementos de WordPress para la compresión de imágenes

¿Cuál es la diferencia entre las herramientas de imágenes en línea y los complementos de WordPress? Bueno, si usa herramientas de imágenes en línea para la compresión de imágenes, aún deberá cargar esas imágenes en su sitio de WordPress y luego usarlas. Si prefiere tener todo en un solo lugar, el complemento de WordPress para compresión de imágenes podría ser el camino a seguir. La mayoría de los complementos también tienen una opción para optimizar las imágenes con la carga, por lo que puede activar esa configuración y olvidarse de cualquier trabajo adicional.

Creé un nuevo sitio de WordPress para cada complemento y subí las mismas 4 imágenes cada vez. Los diferentes complementos tienen diferentes configuraciones, por lo que estaba buscando el equilibrio perfecto entre compresión y calidad de imagen.

Probé los siguientes complementos:

• WP Smush (versión gratuita)
• Comprimir imágenes JPEG y PNG con TinyPNG
• Píxel corto
• imaginar
• EWWW Image Optimizer (versión gratuita)

Como mencioné antes, si conoce algún otro complemento que debamos probar, infórmenos y lo agregaremos a la lista. Si no desea obtener más información sobre estos complementos, haga clic aquí. ¡Muéstreme los ganadores!

WP Smush (Versión gratuita)

WP Smush es uno de los complementos más antiguos para la compresión de imágenes que conozco. Tiene una buena ventaja frente a todos los demás complementos, ya que no es necesario registrarse para usar una versión gratuita. También tiene una opción para comprimir automáticamente las imágenes recién cargadas, por lo que una vez que se configura el complemento, puede olvidarse de él y hará todo el trabajo por usted en segundo plano. Desafortunadamente, los resultados de compresión fueron de los peores en la versión gratuita, por lo que no recomendaría su uso. Han declarado en su sitio que la versión pro se comprime mucho mejor, por lo que también probaré esta en la próxima actualización del artículo.

Comprime imágenes JPEG y PNG con TinyPNG

Al igual que la herramienta de compresión en línea TinyPNG , el complemento de WordPress también es muy simple. Una vez que realiza el registro, tiene configuraciones mínimas y básicamente funciona de inmediato. Todas las imágenes recién cargadas también se pueden comprimir automáticamente, por lo que puede activar el complemento y olvidarse de él.

Píxel corto

ShortPixel fue, personalmente, una de las mayores sorpresas. Nunca había oído hablar de él antes de mi investigación y estaba realmente impresionado. Con la configuración predeterminada recomendada con pérdida, tiene los mejores resultados de compresión entre los complementos de WordPress y también tiene una opción brillante. Esta opción es para fotógrafos o cualquier otro profesional que necesite imágenes de muy alta calidad y no se comprometa con la pérdida de calidad.

imaginar

Imagify es un complemento, hecho por las manos de los famosos autores de complementos de WP Rocket . Después del registro, obtendrá algunas opciones claras para elegir. Para obtener la mejor relación de compresión y calidad de imagen, elija el modo agresivo. Una cosa buena en la configuración es también la opción de tener una carpeta separada para las imágenes originales, en caso de que algo salga mal con la compresión. Lo único que no entendí completamente es por qué debemos cambiar a la vista de lista en los medios para ver los resultados de la compresión. Aparte de eso, Imagify es un complemento realmente agradable y sólido.

EWWW Image Optimizer (Versión gratuita)

EWWW Image Optimizer fue el único complemento que me dio algunos errores. En primer lugar, lo probé en mi propio alojamiento y obtuve un error, que EWWW Image Optimizer requiere exec() o clave API. La próxima vez que probé el complemento en mi sitio de desarrollo local de WordPress y recibí un error de que me faltaba pngout. Seguí las instrucciones sobre cómo instalarlo y el complemento finalmente estuvo listo para la prueba. Dado que probé la versión gratuita, solo había una opción sin pérdidas, que no condujo a los mejores resultados. Al igual que con WP Smush, también probaré la versión pro de EWWW Image Optimizer en la próxima actualización del artículo y veremos si funciona mejor.

Resultados para el Mejor Complemento de WordPress para Compresión de Imágenes

Al igual que antes, encontrará gráficos con los resultados de todas nuestras pruebas a continuación. También puede consultar nuestra hoja de cálculo detallada para obtener más información.

El mejor complemento de WordPress para comprimir archivos JPEG

ShortPixel fue el ganador, con un promedio de 84% de compresión . Lo mismo que Compressor e ImageOptim en la categoría de mejor herramienta de compresión en línea. El segundo mejor complemento fue Imagify , con un promedio de 70% de compresión . Declaro que ShortPixel es actualmente el ganador absoluto de esa categoría.

El mejor complemento de WordPress para comprimir PNG

El mejor complemento de compresión PNG se llama Compress JPEG & PNG images by TinyPNG , con una compresión del 56% . Curiosamente, el mejor resultado es, nuevamente, el mismo que en la categoría de mejor herramienta de compresión en línea. Sin embargo, otros complementos fueron un poco más competitivos aquí, con una compresión de alrededor del 50% .

El mejor complemento de WordPress para la compresión de imágenes en general

En mi opinión, la mejor relación entre la experiencia del usuario, las diferentes configuraciones y la compresión fue del complemento ShortPixel . En general, es un complemento muy sólido, con muchas opciones, pero también con una configuración predeterminada excelente. Puede comenzar a usar el complemento inmediatamente después del registro y, lo que es más importante, la compresión es excelente. Por el momento, elegiría el complemento ShortPixel para mi propio sitio web, especialmente si la mayoría de las imágenes son JPEG.

Conclusión

Ese fue un viaje largo, ¿verdad? Mientras tanto, logramos comprimir nuestra imagen child.jpg hasta en un 95% . Su sitio web puede funcionar mucho más rápido, si solo sigue estos 3 simples pasos . Vamos a repetirlos de nuevo:

• Seleccione el formato de imagen correcto
• Cambiar el tamaño de la imagen antes de cargar
• Comprimir imagen con las herramientas en línea o complementos de WordPress

Otra cosa importante es que uses solo una herramienta o plugin de WordPress para cada imagen, ya que la mayoría tienen algún tipo de compresión con pérdida, lo que significa que la calidad de tu imagen podría empeorar con cada compresión adicional y eso es algo que no hacemos. no quiero También agregamos todas las imágenes de prueba en GitHub si desea verificar la comparación de calidad entre ellas o probar otras herramientas y complementos por su cuenta.

Ya no deberías tener más excusas para no comprimir tus imágenes. Hay muchas herramientas y diferentes formas de hacerlo y lo hemos demostrado, que al final vale la pena. Elija su propio ganador personal para la compresión en línea o el complemento de WordPress y verifique el puntaje de Google PageSpeed ​​de su sitio web antes y después de la optimización. Comparta la información sobre la velocidad de su sitio y la mejora de la puntuación en nuestra sección de comentarios. También me gustaría saber si este artículo te ayudó con la optimización de la imagen y qué piensas al respecto.