Cómo comprimir y optimizar imágenes en WordPress

Cómo comprimir y optimizar imágenes en WordPress
5 (100%) 5 votes

En este artículo, trataremos de encontrar el mejor plugin de compresión de imágenes de WordPress.

El repositorio de WordPress está lleno de plugins gratuitos y también hay algunos plugins premium disponibles para casi todo, ahora depende del usuario seleccionar uno según sus necesidades.

En este artículo trataremos de encontrar el mejor plugin de compresión de imágenes de WordPress. Consideraremos algunos de los plugins más famosos disponibles para comprimir las imágenes.

Como ustedes ya saben, las imágenes en cualquier sitio web son el mayor contribuyente al tamaño del sitio web, por lo tanto es importante que las imágenes están optimizadas y comprimidas correctamente, ya que tendrán un impacto en la experiencia del usuario y seo.

Resumen contenido

Mejores plugins para comprimir y optimizar imágenes en WordPress

Para encontrar el mejor plugin de compresión de imágenes, tendremos que establecer algunos parámetros y en este caso lo serán:

  • Tamaño de la imagen después de la compresión.
  • Calidad de imagen después de la compresión.
  • Características disponibles en el plugin.
  • Vamos a probar los plugins usando tres imágenes diferentes de diferentes tamaños.
  • El tamaño de las imágenes que utilizaremos son 250*250, 640*426, 800*600.

Las imágenes que usaremos son:

Tamaño de la imagen: 250*250 (Yo uso WP Smush, por lo tanto esta imagen ya está comprimida usando WP smush y no es la imagen por defecto que usamos para probar el plugin)

Tamaño de la imagen: 640 × 426 (Yo uso WP Smush, por lo tanto esta imagen ya está comprimida usando WP smush y no es la imagen por defecto que usamos para probar el plugin)

Tamaño de la imagen: 800*600 (Yo uso WP Smush, por lo tanto esta imagen ya está comprimida usando WP smush y no es la imagen por defecto que usamos para probar el plugin)

Tamaño predeterminado de las imágenes:

  • 250*250 = 34 kB
  • 640*426 = 77 kB
  • 800*600 = 75 kB

No cambiaremos nada en la configuración predeterminada de estos plugins durante la prueba.

Plugin Compress JPEG & PNG Images para WordPress

Compress JPEG & PNG Images ofrece una manera fácil de acelerar un sitio web.

Una vez que subas nuevas imágenes a un sitio web, el plugin optimizará todas ellas automáticamente.

Por otro lado, puede utilizar el plugin para optimizar las imágenes existentes en la biblioteca de medios de su sitio WordPress.

Podrá optimizar múltiples imágenes existentes en su sitio a la vez.

Todo lo que tiene que hacer es hacer uso de la llamada opción de optimización de volumen fácil.

Es bastante fácil cambiar el tamaño de las imágenes originales grandes en un sitio web con el plugin.

Su trabajo consiste en establecer el ancho y la altura máximos para una imagen que necesita ser optimizada.

Eso es todo.

Sin embargo, lo más importante es que las imágenes comprimidas por el plugin no pierdan su calidad.

Para poder usar este plugin tendrá que obtener la clave de la API, la cual obtendrá de forma gratuita.

Limitan el número de archivos que puede comprimir cada mes, que es de 500, incluyendo todos los diferentes tamaños de la misma imagen, usted puede elegir qué tamaños de imagen debe ser comprimido.

Da la opción de comprimir imágenes antiguas.

Tamaño Después de comprimir las imágenes con Compress JPEG y PNG Images

  • 250*250 =27 kB (Impacto en la calidad de imagen = ninguno)
  • 640*426 = 52 kB
  • 800*600 = 60 kB

Plugin EWWW Image Optimizer

EWWWW Image Optimizer es otro gran plugin gratuito de optimización de imágenes WordPress.

Las imágenes se pueden optimizar de dos maneras diferentes.

El plugin le da la oportunidad de elegir entre opciones de alta compresión o de compresión perfecta de píxeles. Con EWWWW Image Optimizer podrá optimizar todas las imágenes en un sitio de WordPress de forma rápida y sencilla.

¿Le gustaría optimizar múltiples imágenes en el sitio de WordPress a la vez?

Todo lo que tiene que hacer es aprovechar la opción de Optimización a granel.

El plugin también le da una excelente oportunidad para cambiar el tamaño de todas las imágenes de su sitio web.

Aproveche la opción de redimensionamiento automático y el plugin hará un gran trabajo para usted.

Como resultado, las imágenes se redimensionarán automáticamente y se ajustarán al tamaño de la página y del dispositivo.

Proporciona la opción de Optimización Masiva.
Proporciona muchas otras opciones predeterminadas.

Tamaño Después de comprimir las imágenes con EWWW Image Optimizer

  • 250*250 =33 kB (Impacto en la calidad de imagen = ninguno)
  • 640*426 =74 kB
  • 800*600 =74 kB

Imsanity

Optimización de imágenes masivas.
Funcionalidades básicas sin límites.

Tamaño Después de comprimir las imágenes con Imsanity

  • 250*250 =34 kB (Impacto en la calidad de imagen = ninguno)
  • 640*426 =77 kB
  • 800*600 =75 kB

ShortPixel Image Optimizer

ShortPixel Image Optimizer es un plugin de WordPress increíblemente popular que tiene más de 80.000 instalaciones activas.

El plugin es ampliamente utilizado por los fotógrafos. Está claro que es probable que este número crezca significativamente en la característica más cercana.

Con este plugin WP podrás comprimir imágenes de diferentes formatos – GIF, PNG y JPG.

Incluso puede comprimir documentos PDF con el plugin.

Supongamos que necesita comprimir imágenes grandes en formato PNG.

En este caso, puede utilizar el plugin para convertir imágenes PNG en imágenes JPG. Como resultado, obtendrá imágenes de pequeño tamaño.

Tendrá que obtener su clave de API gratuita.

100 imágenes al mes.

Proporciona la opción de mantener las imágenes originales en una carpeta separada.

Tamaño Después de comprimir las imágenes con ShortPixel Image Optimizer

  • 250*250 =34 kB (Impacto en la calidad de imagen = ninguno)
  • 640*426 =77 kB
  • 800*600 =75 kB

WP Smush

Smush Image Compression and Optimization es conocido por ser el galardonado optimizador de imágenes.

El plugin en sí es fácil de usar.

Esto significa que nunca te será difícil optimizar imágenes en tu sitio de WordPress con Smush Image Compression and Optimization.

El plugin te permite optimizar cualquier imagen en cualquier directorio de tu sitio de WordPress.

Otra cosa importante que debe tener en cuenta es que Smush Image Compression and Optimization funciona muy bien con todos los plugins de WordPress de la biblioteca de medios más importante, como WP Media Folder, WPML Media Translation Add-on, NextGen Gallery, WPML y muchos otros.

Tamaño más pequeño = Sitio Rápido.

Esta es una de las fórmulas más importantes para mantener su sitio rápido (que obviamente es considerada por los motores de búsqueda mientras se clasifica su sitio en los resultados de búsqueda), por lo tanto mantener el tamaño de su sitio como pequeño puede ser es importante, y en la mayoría de los sitios alrededor del 40% del tamaño del sitio está cubierto por imágenes y comprimirlas puede mejorar la velocidad de su sitio.

Comprimir todas y cada una de las imágenes con una herramienta puede ser agitado, por lo tanto, la mejor manera puede ser utilizando un plugin de WordPress que comprime automáticamente las imágenes sin afectar a la apariencia de la imagen en el fondo y puede hacer esto con la ayuda de Smush.it.

Puede descargar el plugin o instalarlo directamente desde el repositorio de WordPress, para instalar la búsqueda de “WP Smush.it”.

Smush.it comprime automáticamente las imágenes en segundo plano sin ninguna interferencia en tu trabajo, las imágenes se comprimen cuando las subes, también puedes comprimir todas las imágenes subidas previamente con la ayuda de la opción bulk smush.it.

Sin embargo, Smush.it sólo opera y comprime imágenes cuyo tamaño no exceda 1MB.

Tamaño Después de comprimir las imágenes con WP Smush

  • 250*250 =33 kB (Impacto en la calidad de imagen = ninguno)
  • 640*426 =74 kB
  • 800*600 =74 kB

Estos fueron los resultados, y está claro que el resultado para la mayoría de los plugins no es impresionante en absoluto.

Como dije no cambiamos nada en la configuración por defecto, y el resultado mostrado arriba es para el tamaño original de la imagen.

Casi no hubo cambios en la calidad de las imágenes, eran casi similares a las originales o podemos decir que no eran cambios visibles en las imágenes después de comprimir la imagen usando el plugin.

Realicé la prueba una vez más para verificar los resultados.

Esta vez usé una imagen relativamente grande.

Tamaño de la imagen 960 × 640

Resultados

  • Original = 244 kB
  • WP Smush = 228 kB
  • ShortPixel Image Optimizer = 244 kB
  • Imsanity= 244 kB
  • EWWW Image Optimizer = 228kB
  • Compress JPEG & PNG images = 165kB

Una vez más, no hubo casi ningún cambio visible en la calidad de la imagen por cualquier plugin.

Ahora, obviamente, Compress JPEG & PNG images es el ganador.

El plugin ha mostrado resultados prometedores en comparación con otros pero viene con una limitación de comprimir sólo 500 imágenes al mes y para comprimir más imágenes usando el plugin, tendrás que ir por la versión pagada.

Imagify vs WP Smush vs ShortPixel: ¿Cuál es el mejor para optimizar las imágenes de WordPress? Comparación de la cabeza a la cabeza

En esta revisión, vamos a explicar brevemente por qué optimizar tus imágenes de WordPress es un movimiento inteligente. Luego compararemos Imagify vs WP Smush vs ShortPixel, para ayudarle a tomar la mejor decisión para su sitio. ¡Saltemos ahora mismo!

Por qué es inteligente optimizar las imágenes de tu sitio WordPress

Las imágenes son la clave de casi todos los sitios web. Mejoran la apariencia de su sitio, pueden ser utilizados para mostrar sus productos o trabajo, y mucho más. Sin embargo, cuantas más imágenes tenga en su sitio, más trabajo tendrá que hacer el navegador de un visitante para cargar sus páginas.

Esto se debe a que los tamaños de los archivos de imagen pueden ser bastante grandes, y todos esos datos se acumulan rápidamente. En consecuencia, su sitio puede ralentizarse a medida que le agrega medios de comunicación, lo que es perjudicial para atraer y retener visitantes. La solución, como habrás adivinado, es la optimización de la imagen.

Cuando usted optimiza las imágenes de su sitio, usted está haciendo que sus tamaños de archivo sean más pequeños y menos gravosos. Al mismo tiempo, esto puede lograrse sin una notable reducción en la calidad de las imágenes. Afortunadamente, todo lo que necesitas para lograr esto es el plugin de WordPress correcto – que es por lo que estamos comparando Imagify vs WP Smush vs ShortPixel en esta revisión.

Ir al principio

Imagify vs WP Smush vs ShortPixel: En pocas palabras

A lo largo del resto de este artículo, vamos a ver tres populares plugins de optimización de imágenes: Imagen vs WP Smush vs ShortPixel. Sin embargo, si tiene prisa, vamos a desglosar los detalles principales de cada herramienta por adelantado.

Todas estas estadísticas se refieren a las versiones gratuitas de los plugins (excepto la última fila de precios, que da el costo de las versiones premium):

Imagine vs WP Smush vs ShortPixel en pocas palabras
Criterios Imagínate WP Smush ShortPixel
Optimizaciones de imagen (por mes) Aprox. 250 Ilimitado 100
Tamaño máximo de archivo 2MB 1MB Sin límite
Facilidad de uso (de 5) 5 5 5
Rendimiento (de 5) 4 2 5
Precios (a partir de) $4.99 por mes 49 por mes $4.99 por mes

Esto es sólo una instantánea, por supuesto. Siga leyendo para conocer la historia completa sobre la tarifa de Imagify vs WP Smush vs ShortPixel en una comparación directa.

Ir al principio

Imagify vs WP Smush vs ShortPixel: Una comparación completa

Antes de que podamos ver cómo Imagify vs WP Smush vs ShortPixel se comparan entre sí, necesitamos presentarlos. Echemos un vistazo a estos plugins, uno por uno.

Smush Image Compression and OptimizationAuthor

(s): WPMU DEV

96%Evaluaciones11,148,322DescargasWP 4.6+Requiere
MÁS INFORMACIÓN

wp-smushit.2.8.1.zip

Versión actual: 2.8.1

Última actualización: 10 de septiembre de 2018

96%Ratings11,148,322DescargasWP 4.6+RequierePágina

de Plugin de

WordPress

.org

Compresión y optimización de imágenes Smush

En primer lugar, WP Smush es quizás el plugin de compresión de imágenes más popular para WordPress.

Esta herramienta es desarrollada por el equipo de WPMU DEV, y cuenta con unos potentes servidores para reducir rápidamente sus imágenes. También es compatible con una amplia gama de plugins de mejora de bibliotecas multimedia, lo que puede ser una ventaja útil.

Imagine a Image OptimizerAuthor

(s): WP Medios

92%Ratios1,389,545Descargas4.0.0Requiere
MÁS INFORMACIÓN

imagine.1.8.1.1.1.zip

Versión actual: 1.8.1.1

Última actualización: 31 de julio de 2018

92%Ratios1,389,545Descargas4.0.0Requiere

Página de Plugin de

WordPress

.org

Optimizador de imágenes Imagify

Tiene mucho sentido utilizar Imagify Image Optimizer para la compresión de imágenes en un sitio web de WP.

¿Su sitio tiene muchas imágenes que necesitan ser optimizadas?

El plugin de WordPress tiene la opción de Optimizador de volumen.

Esta gran característica le permite optimizar todas las imágenes de un sitio web en un corto período de tiempo.

Necesitará hacer 1 clic sólo para realizar el trabajo.

Si tiene una versión gratuita de Imagify Image Optimizer podrá optimizar sólo hasta 25MB de imágenes al mes.

Sin embargo, necesitará considerar una versión pagada del plugin si necesita hacer más trabajo de optimización de imágenes.

Cabe destacar que Imagify Image Optimizer se actualiza constantemente.

Así, la funcionalidad del plugin mejora constantemente.

A continuación, tenemos Imagify.

También es una opción popular; este plugin ofrece varios niveles de compresión, por lo que puede lograr un sólido equilibrio entre rendimiento y calidad.

También optimiza las imágenes en miniatura y en retina, lo cual es un buen toque.

ShortPixel Image OptimizerAutor

(es): ShortPixel

94%Evaluaciones1,376,566Descargas3.2.0Requiere
MÁS INFORMACIÓN

optimizador de imagen de píxel corto.4.11.2.zip

Versión actual: 4.11.2

Última actualización: 12 de septiembre de 2018

94%Evaluaciones1,376,566Descargas3.2.0Requiere

Página de Plugin de

WordPress

.org

Optimizador de imagen ShortPixel

Por último, pero no menos importante, está ShortPixel.

Esta es una opción más simple y ligera, lo que es genial si sólo quieres optimizar tus imágenes rápidamente y sin demasiados problemas.

Al mismo tiempo, ofrece una buena cantidad de personalización en términos de cómo se comprimen sus imágenes.

Con esas introducciones fuera del camino, vamos a obtener un poco más de detalle acerca de lo que estos plugins tienen para ofrecer.

Ronda 1: Comparación de características clave y precios

En un sentido muy básico, estos tres plugins de WordPress hacen lo mismo. Todas comprimen sus imágenes de modo que son menos agotadoras para el rendimiento de su sitio, al tiempo que intentan mantener una calidad tan alta como sea posible. Además, estas herramientas comprimirán tanto las imágenes existentes como las nuevas que cargue.

Esto puede hacer que sea un poco confuso cuando intentas comparar Imagify vs WP Smush vs ShortPixel y elegir un ganador. Sin embargo, cada uno ofrece un conjunto de características algo diferente. Además, mientras que los tres plugins son gratuitos en sus versiones base, sus niveles premium vienen en una variedad de niveles de precio.

WP Smush

Características principales:

  • Establezca las dimensiones máximas para las imágenes de su sitio, y las cargas se reducirán automáticamente cuando sea necesario.
  • Comprima imágenes en cualquier carpeta o directorio de su sitio, no sólo en su biblioteca multimedia.
  • Optimice las imágenes JPEG, GIF y PNG de una en una o de forma masiva (hasta 50 archivos a la vez).
  • Convierta PNGs a JPEGs automáticamente, guarde copias de sus imágenes de tamaño completo como copia de seguridad y optimice imágenes de hasta 32MB (sólo premium).

Determinación de precios:La versión Pro de WP Smush ofrece una gama más amplia de características, simplificando la tarea de optimización de imágenes y dándole más opciones de personalización. Sin embargo, necesitarás ser miembro de WPMU DEV para poder acceder a él, lo que te costará 49 dólares al mes (pero viene con una serie de otros plugins y herramientas útiles).

Imagínate

Características principales:

  • Optimice las imágenes normales, las miniaturas y las imágenes de retina de WP Retina 2x.
  • Comprime todos tus archivos de imagen existentes en masa.
  • Elija entre tres niveles de compresión: Normal, Agresivo y Ultra.
  • Almacene sus imágenes originales a tamaño completo en una copia de seguridad segura, para que puedan restaurarse en cualquier momento.

Determinación de precios:En este caso, las versiones gratuita y premium del plugin ofrecen el mismo conjunto de características. La diferencia radica en cuántos archivos puede optimizar. El plugin gratuito le permite optimizar 25MB de datos por mes (que son aproximadamente 250 imágenes), mientras que los planes de pago comienzan a $4.99 por mes por 1GB de datos (aproximadamente 1,000 imágenes).

ShortPixel

Características principales:

  • Comprima todas sus imágenes con un solo clic.
  • Optimizar imágenes fuera de la biblioteca de medios, como las que se añaden a través de otros plugins.
  • Comprima archivos JPEG, PNG, GIF, WebP y PDF, ya sea en formato con o sin pérdidas.
  • Cambie el tamaño de las imágenes automáticamente para establecer las dimensiones antes de que se optimicen.

Determinación de precios:Al igual que Imagify, los niveles premium y gratuitos de ShortPixel ofrecen la misma funcionalidad. Sin embargo, la versión gratuita sólo le permite optimizar hasta 100 imágenes al mes. Alternativamente, usted puede pagar $4.99 para optimizar 5,000 imágenes por mes (lo cual debería ser más que suficiente para la mayoría de los sitios).

Ronda 2: Comparar facilidad de uso y rendimiento

Ahora que hemos visto lo que cada plugin tiene que ofrecer en teoría, echemos un vistazo a cómo es usar realmente Imagify vs WP Smush vs ShortPixel. En esta sección, vamos a repasar cómo optimizar una imagen usando la versión gratuita de cada plugin.

El objetivo es doble. En primer lugar, le proporcionaremos una visión general de la facilidad de uso y personalización que se ofrece al utilizar Imagify vs WP Smush vs ShortPixel. Además, echaremos un vistazo a la calidad resultante de las imágenes comprimidas para ver qué tan bien se mantienen después de ser optimizadas. ¡Vamos a trabajar!

IMAGIFY

Instalar Imagify no es suficiente para que el plugin funcione – necesitarás dar un paso más. En Configuración > Imaginar, deberá generar e introducir una clave de API gratuita.

A continuación, se le llevará al panel de control de Imagify, donde podrá personalizar la configuración del plugin (por ejemplo, seleccionando un nivel de compresión):

Puede optimizar sus imágenes aquí si lo desea. Alternativamente, tome la clave de API en el correo electrónico que recibió después de registrarse para obtener una cuenta e introdúzcala en su panel de control de WP. Esto le dará acceso a las mismas opciones dentro de WordPress:

Podrá elegir si desea optimizar automáticamente y realizar copias de seguridad de las imágenes, establecer un tamaño máximo para ellas, etc. Si mantiene activada la función de optimización automática, sólo tendrá que cargar una imagen en su biblioteca multimedia y dejar que el plugin haga el trabajo:

Elegimos el ajuste medio, Agresivo, y comprobamos los resultados de una imagen PNG y JPEG cargada en nuestro sitio de prueba:

El JPEG original
El JPEG optimizado

Imagine que comprime la imagen en un 39,7%, y como puede ver la calidad se ha mantenido bien. Hay una ligera borrosidad en la segunda foto, pero es en gran parte imperceptible.

Ahora, para la prueba PNG:

El PNG original
El PNG optimizado

Este se redujo en un 36,0%, y la reducción de la calidad también es muy leve.

En general, el plugin hizo un gran trabajo reduciendo el peso de nuestras imágenes de prueba sin afectar su calidad. Además, la personalización que se ofrece aquí es una característica útil

Short PixelLike

Imagify, la configuración de ShortPixel toma unos pocos pasos rápidos. En la nueva pestaña Configuración > ShortPixel de WordPress, tendrás que solicitar una clave de API gratuita:

tendrás que crear una cuenta con ShortPixel y, a continuación, introducir tu clave en la página anterior. A continuación, se le presentará la página de configuración completa:

Puede elegir un tipo de compresión, decidir si desea realizar una copia de seguridad de las imágenes, establecer un tamaño máximo de archivo, etc. De hecho, todo el proceso y conjunto de opciones aquí es notablemente similar a Imagify.auto-optimize siempre está activado con este plugin. Por lo tanto, simplemente suba una nueva imagen a su biblioteca de medios para comprimirla. Sin embargo, no verás el mismo nivel de información sobre cuánto se ha reducido el tamaño del archivo con ShortPixel; tendrás que comprobar la nueva imagen directamente si quieres ver los resultados.

Para una comparación justa, optamos de nuevo por el ajuste medio (Brillante):

El JPEG original
El JPEG optimizado

La imagen fue comprimida en un 50.0% esta vez. Una vez más, está un poco borrosa, pero es muy similar a la imagen original (e indistinguible de la foto comprimida de Imagify):

El PNG original
El PNG optimizado

Esta se redujo en un 62,3%. Sólo hay la más mínima reducción en la calidad de la imagen original, pero el resultado es un poco más claro y brillante que el Imagify PNG comprimido.

Redujo el tamaño de los archivos de nuestras dos imágenes de prueba en un porcentaje mayor, manteniendo al mismo tiempo un nivel de calidad similar o superior.

WP Smush

Después de activar el plugin WP Smush, obtendrá inmediatamente algunas opciones para personalizar cómo funciona la función de compresión de imágenes. Luego, irás directamente a la nueva pestaña del plugin:

Aquí, usted puede comprimir a granel sus imágenes existentes si lo desea. También puede activar o desactivar la optimización automática para tipos específicos de imágenes y decidir si deben cambiar su tamaño una vez cargadas:

Si seleccionas la opción de compresión automática, sólo tienes que subir una imagen para optimizarla. Cuando lo hagas, verás algo de información sobre cuánto ha sido comprimido el archivo, veamos algunos ejemplos de imágenes optimizadas usando WP Smush. En primer lugar, la foto JPEG original una vez más:

El JPEG original
El JPEG optimizado

El proceso de compresión fue muy rápido en este caso, aunque el tamaño del archivo sólo se redujo en un 1,6%.

Como resultado, la calidad no ha cambiado, lo mismo se aplica a nuestra imagen de prueba PNG.

El PNG original
El PNG optimizado

En total, las tarifas de WP Smush son relativamente bajas en comparación con las dos opciones anteriores. No tuvo ningún efecto real en nuestras imágenes de prueba, y no ofrece una manera de personalizar el nivel de compresión.

En esta revisión no estamos seguros de qué esperar, ya que los tres plugins de optimización de imágenes que hemos visto son opciones populares y bien revisadas. 

Sin embargo, en nuestra comparación de Imagify vs WP Smush vs ShortPixel, ShortPixel resultó ser el claro ganador, y nos pusimos en contacto con Alex Florescu de ShortPixel, quien nos dijo lo siguiente sobre la importancia de elegir el plugin de optimización de imágenes adecuado:

Para mí, un buen plugin de optimización de imágenes es aquel que puede reducir en gran medida las imágenes manteniendo la calidad visual. También necesita ser fácil de usar y tener suficientes características para cubrir la mayoría de los casos de uso. Si además el plugin está soportado activamente, ¡entonces para mí es un ganador!

Antes de terminar, repasemos los aspectos más destacados de cada plugin una vez más. Recuerde que estas son las versiones gratuitas – su kilometraje puede variar cuando se trata de los plugins premium:

  1. Imagínate: Ofrece muchas opciones de personalización e hizo un trabajo sólido al comprimir las dos imágenes de prueba.
  2. ShortPixel: Proporciona una característica muy similar a Imagify, pero optimiza nuestras imágenes de prueba de forma más eficiente y con una calidad similar o ligeramente mejor.
  3. WP Smush: No le permite personalizar el nivel de compresión de sus imágenes, y tuvo poco o ningún efecto en nuestras imágenes de prueba.

¿Has usado alguno de estos plugins de optimización de imágenes de WordPress antes, y qué piensas de ellos? 

Beneficios de la optimización de imágenes

Optimizar las imágenes para la web tiene muchas ventajas que desafortunadamente son descuidadas por la mayoría de los desarrolladores y propietarios de la web. Veámoslos uno por uno y veamos lo que cada uno puede aportar al rendimiento de su sitio web.

Sitio web de Lighter

Las imágenes pesadas ocupan más espacio en disco de su servidor web y su recuperación desde el servidor para mostrarlas en un navegador requiere más ancho de banda. Esto puede no ser un problema para los sitios alojados en un servidor con un gran espacio de disco y capacidades de ancho de banda, pero se suma a los gastos de alojamiento.

Al optimizar las imágenes se puede ahorrar tanto el espacio de disco en el servidor como el ancho de banda que implica la visualización de esas imágenes. También mejora la velocidad a la que se cargan las imágenes en la página web, incluso con las conexiones lentas a Internet, como la red 2G en los dispositivos móviles.

Rendimiento mejorado

Los sitios web más ligeros funcionan bien en comparación con los sitios web pesados, ya que tardan menos tiempo en cargar todos los activos y las funciones deseadas se cargan correctamente para servir a una característica específica de esa página web. Las imágenes optimizadas para la web siguen las mejores prácticas adecuadas para todo tipo de navegadores y múltiples tamaños de pantalla que mejoran el rendimiento de su sitio web.

Experiencia de usuario mejorada

Cuando el sitio web se carga rápidamente y funciona correctamente, su experiencia general de usuario es elevada para los visitantes que navegan por ese sitio web. Los visitantes disfrutan, retienen y es más probable que vuelvan a visitar el sitio web, que se carga más rápido y les permite obtener la información deseada más rápidamente.

Se puede mejorar la experiencia del usuario implementando las mejores prácticas mientras se estructura su página web y optimizando las imágenes. Se trata de mostrar los datos de una manera fácil de usar al usuario final.

Beneficios de SEO

No sólo los visitantes, sino también el motor de búsqueda como Google ama los sitios web de carga rápida y en una de sus entradas oficiales en el blog, incluso declararon que la velocidad de la página también sería un factor de clasificación en su nuevo algoritmo de clasificación.

Cuando optimizamos las imágenes para el rendimiento también estamos trabajando en mejorar su ranking SERP. Google da preferencia a aquellos sitios web que cargan más rápido y penalizan los sitios de carga lenta. De esta manera el motor de búsqueda se asegura de que los visitantes se presenten con los sitios que están optimizados para la velocidad para evitar la mala experiencia del usuario.

Vamos a ponerlo a prueba

Para ver el trabajo en acción, creamos un pequeño entorno de prueba propio, en el que añadimos ocho imágenes JPEG de tamaño 1MB. A continuación se muestran los resultados de las pruebas de antes y después de optimizar las imágenes para el rendimiento.

Antes de la optimización:

pingdom test before

Después de la optimización:

pingdom test after

Después de optimizar las imágenes logramos acelerar el tiempo de carga de 1,66 segundos a 1,41 segundos y el número de solicitudes se reduce de 26 a 13. Esto no es mucho, ya que sólo teníamos ocho imágenes, pero imagina la diferencia que puede suponer para el rendimiento del sitio el tener cientos de imágenes.

Cómo Optimizar las Imágenes para el Desempeño?

Ahora que hemos entendido los beneficios de optimizar las imágenes para el rendimiento, nuestro siguiente paso sería aprender las formas de optimizar las imágenes para un mejor rendimiento.

Estas técnicas pueden ser utilizadas tanto individual como colectivamente dependiendo del nivel de rendimiento que se desee alcanzar con ellas.

Elección del formato de archivo correcto

Hay varios tipos de formatos de archivo disponibles para las imágenes que se utilizan en la web. Elegir el formato adecuado para su sitio web es esencial.

PNG (Gráficos de Red Portátiles): Este formato de imagen generalmente utiliza compresiones sin pérdida (discutidas más adelante). La calidad de la imagen es alta, al igual que el tamaño del archivo. Es uno de los formatos de archivo más populares que se utilizan en la web.

JPEG (Grupo Mixto de Expertos Fotográficos): La calidad de imagen de este formato de archivo es inferior a la de PNG, pero también tiene un tamaño de archivo reducido. Utiliza algoritmos de compresión con y sin pérdida y es ampliamente utilizado en cámaras digitales y en la web.

GIF (Graphics Interchange Format): Este formato de imagen sólo utiliza compresión sin pérdidas y es ideal para imágenes animadas debido a su pequeño tamaño de archivo.

JPEG es un formato de archivo de uso común debido a su pequeño tamaño de archivo y a la flexibilidad que ofrece para definir la calidad de imagen de su elección. PNG también es muy popular y se utiliza cuando necesitamos un fondo transparente que no es posible con el formato de archivo JPEG. Los archivos PNG son de alta calidad ya que no están tan comprimidos como los JPEG, por lo tanto, se utilizan en menor cantidad y para imágenes más pequeñas.

Los GIFs se están volviendo populares en la web para mostrar imágenes animadas, especialmente en medios sociales y blogs. Es una manera efectiva de transmitir un mensaje corto o una broma a través de imágenes.

También se pueden utilizar otros formatos de archivo como WebP, que es casi un 30% más pequeño en tamaño y soportado por el 75% del navegador moderno.

Redimensionamiento y compresión de imágenes

La compresión de imágenes es esencial para optimizar las imágenes para la web. Sin embargo, esto puede ser difícil y si no se hace bien puede afectar la calidad de la imagen.

Veamos cómo redimensionar correctamente una imagen para la web sin perder su calidad y cómo reducir aún más su tamaño con compresión de calidad.

Redimensionamiento de imagen

Cuando hablamos de redimensionar una imagen, estamos hablando de redimensionarla y no sólo de encogerla implícitamente usando HTML y CSS que se aplica cuando la página web es renderizada por el navegador.
<h2>XYZ Product Detail</h2> <!– NO UTILIZAR esto ya que cargará la imagen a tamaño completo y el navegador hará el redimensionamiento –> <img src=”image.jpg” alt=”imagen a tamaño completo” width=”400″ height=”400″
/
> UTILIZAR una imagen redimensionada donde el redimensionamiento se hace desde el servidor y no hay necesidad de redimensionamiento del lado del navegador–> <img src=”resized_800x1000_image.
p
or
ejemplo, si desea utilizar una imagen de dimensiones 2800 x 4000 px como imagen de visualización de un producto de tamaño 400 x 400 px, en lugar de definir sus atributos de altura y anchura en su código HTML, redimensione la imagen antes de que el servidor la envíe al navegador. Esto no sólo reducirá el tiempo de carga de su página web, sino que también ahorrará espacio en disco y ancho de banda de su hosting.

Del mismo modo, muchos desarrolladores pasan por alto la necesidad de redimensionar las imágenes con respecto al diseño del sitio web. Las imágenes que fueron dimensionadas para el diseño antiguo pueden no ser de las dimensiones correctas para el nuevo diseño. Por ejemplo, si anteriormente usaba la imagen de banner de tamaño 1400 x 1600px pero su nuevo diseño sólo tiene espacio para una imagen de 900 x 1200 px, puede ahorrar unos cuantos KBs con sólo redimensionarla a las dimensiones apropiadas.

Dimensiones de la imagen

Un error muy común es que sólo las imágenes de gran tamaño de píxel garantizan la mejor calidad en la página web y a veces la gente incluso utiliza imágenes de 2000 a 5000 px aunque el tamaño más comúnmente utilizado para las pantallas grandes es de 1926 px de ancho.

Calidad de imagen

La calidad de una imagen representa su representación visual en la página web. Reducirlo correctamente no afecta a su calidad, sino que reduce el tamaño del archivo, que es exactamente lo que necesitamos para optimizarlo para la web.

La calidad de una imagen se puede reducir del 100% al 0% dependiendo de sus necesidades. Cuanto mayor sea la calidad, mayor será el tamaño del archivo. Normalmente, reducir la calidad de una imagen entre un 10% y un 20% no tiene ningún impacto visible en la calidad de la imagen, pero reduce el tamaño del archivo en unos pocos KBs.

La calidad de una imagen puede ser comprimida ya sea reduciendo la calidad manualmente usando un software de edición de fotos o usando ImageKit, que es una herramienta que convierte imágenes al formato WebP y las comprime cuando es posible.

Entender la compresión con y sin pérdida

Vimos anteriormente en la sección de formato de archivo que una imagen puede ser comprimida en compresiones Lossy o Lossless. Explorémoslos uno por uno para entender ambas técnicas.

Pérdida

En este tipo de compresión, cuando la imagen se comprime pierde su información. Estos datos perdidos pueden no ser notados por el usuario pero pueden reducir significativamente el tamaño del archivo. Al descomprimir este tipo de archivo, sólo se puede recuperar parte de la información original. La compresión con pérdida es utilizada por el formato de archivo JPEG, que normalmente tiene un tamaño de archivo pequeño, y al utilizar este formato de archivo el usuario puede definir la pérdida de datos sin comprometer la calidad de una imagen.

Sin pérdidas

En la compresión sin pérdida cuando se comprime una imagen, toda su información está intacta y al descomprimirla, no se pierde ninguna información. Dado que toda la información está presente, este tipo de compresión no afecta a la calidad de la imagen, pero es necesario descomprimirla antes de renderizarla.

Tanto las compresiones con y sin pérdida se pueden realizar con Adobe Photoshop, Affinity Photo o FileOptimizer.

Herramientas de optimización de imágenes

Hay toneladas de software de edición de imágenes gratuito y de pago disponible que se puede utilizar para optimizar las imágenes para el rendimiento. Todo se reduce a su preferencia y al tipo de optimización que busca.

Aquí está la lista de algunas herramientas populares y efectivas de optimización de imágenes:

  • Adobe Photoshop
  • Optimizador JPEG
  • NET
  • JPEG Mini
  • OptiPNG
  • Reciclaje de imágenes
  • Optimizador de archivos
  • ImageOptim
  • Trimage
  • org

¿Cuáles son los SVGs y los beneficios de usarlos?

Scalable Vector Graphics o SVG para abreviar es un vector escalable que se utiliza principalmente para imágenes, logotipos y texto simples. El archivo SVG contiene texto que define las líneas, curvas y formas. Veamos algunos de los beneficios de usar SVG junto con otras imágenes.

  • Los SVGs son independientes de la resolución y pueden escalarse fácilmente para cualquier tamaño de pantalla.
  • Son programables y pueden configurarse fácilmente para lograr los resultados deseados. Por ejemplo, crear cuadros y gráficos dinámicamente.
  • Son indexados por los motores de búsqueda igual que las imágenes PNG o JPEG.
  • Por lo general, tienen un tamaño de archivo más pequeño en comparación con sus competidores.

Las SVG son excelentes y tienen varios casos de uso. Es el formato soportado por la mayoría de los navegadores y dispositivos web.

Construya para Móviles

Si se toma en serio la optimización de imágenes para mejorar el rendimiento del sitio web, entonces es un error descuidar los dispositivos móviles. Casi el 60% del tráfico mundial proviene de dispositivos móviles, ya que cada vez más personas confían en sus dispositivos móviles para navegar por Internet.

Tener un sitio web amigable para móviles es una necesidad en estos días, ya que ninguna empresa querría perder el tráfico procedente de los usuarios de móviles. Las imágenes utilizadas en estos sitios web pueden ser optimizadas para móviles mediante el uso de imágenes con capacidad de respuesta. De este modo, la lista de variantes se entrega al navegador de una imagen concreta adecuada para varios tamaños de pantalla.

Además, la relación de píxeles del dispositivo o DPR (Device Pixel Ratio) juega un papel importante en la visualización de imágenes de alta calidad en dispositivos pequeños. Los dispositivos con pantallas de alta densidad tienen más píxeles por pulgada cuadrada en comparación con una pantalla normal.

Para evitar que las imágenes queden borrosas en estos dispositivos, utilice una imagen de tamaño 2x en las pantallas con DPR 2, una imagen de tamaño 3x en las pantallas con DPR 3 y una imagen de tamaño 1x normal.

Mejores prácticas para el uso de imágenes en la Web

Hasta ahora hemos aprendido a optimizar las imágenes para el rendimiento y las herramientas que se pueden utilizar para redimensionar y comprimir estas imágenes para la web. Antes de llegar a la conclusión, veamos algunas de las mejores prácticas y técnicas adicionales para optimizar las imágenes.

  • Cambie el tamaño de las imágenes adecuadamente antes de subirlas al servidor.
  • Comprimir imágenes para reducir el tamaño de archivo innecesario.
  • Utilice SVG siempre que sea posible.
  • Utilice efectos CSS3.
  • Cambie el tamaño de las imágenes en lugar de definir el ancho y el alto en HTML.
  • Utilice fuentes web en lugar de colocar textos dentro de la imagen.
  • Utilice formatos de archivo (JPEG, PNG y GIF) de forma adecuada.
  • Usar texto alternativo.

Red de Entrega de Contenido

Content Delivery Network (CDN) es una técnica inteligente y efectiva para servir contenido estático incluyendo imágenes a su audiencia global. Los servidores CDN están repartidos por todo el mundo y en lugar de obtener datos cada vez desde el servidor web, entregan el contenido copiado desde el nodo más cercano a la ubicación del usuario.

CDN simplemente minimiza la distancia entre el servidor web y el usuario que navega por el sitio web desde el otro extremo del mundo. Esto no sólo entrega el contenido más rápido, sino que también reduce el número de solicitudes enviadas al navegador web.

Carga perezosa

Lazy Loading permite a la página web cargar las imágenes sólo cuando el usuario está navegando a esa área particular de la página. En lugar de cargar todas las imágenes a la vez, los sitios web que utilizan Lazy Loading pueden cargar imágenes en segmentos, dándoles más tiempo y recursos para cargar la página inicial a alta velocidad.

Almacenamiento en caché del navegador

El almacenamiento en caché del navegador permite que el sitio web almacene sus datos estáticos en el navegador del usuario, de modo que la próxima vez que solicite los mismos datos, éstos se servirán instantáneamente desde el almacenamiento local. Esta técnica es útil para mejorar la experiencia del usuario, pero requiere cierto cuidado cuando se implementa en el sitio web utilizando páginas dinámicas como el carrito de la compra en una tienda de comercio electrónico.

Reflexiones finales

Optimizar las imágenes para el rendimiento es crucial, ya que más del 50% del peso de la página web se debe a las imágenes. En el artículo anterior, comprendimos los beneficios de optimizar las imágenes y exploramos las formas de hacerlo. También aprendimos a optimizar las imágenes para móviles y en WordPress usando tres plugins famosos y, por último, aprendimos las mejores prácticas para optimizar las imágenes para un mejor rendimiento y una mejor experiencia del usuario.