Cómo cambiar el tamaño y comprimir imágenes grandes a granel (y optimizarlas)

¿Quieres saber cómo cambiar el tamaño y comprimir imágenes grandes de forma masiva y sin perder calidad? Estás en la página correcta. Veamos cómo puede ahorrar tiempo mientras optimiza sus fotos y aumenta el rendimiento de su sitio web.

La compresión de imágenes es el proceso de reducir el peso de una imagen al disminuir su tamaño sin comprometer demasiado la calidad. En este artículo, aprenderá por qué es crucial cambiar el tamaño y comprimir las imágenes y cómo hacerlo fácilmente sin perder calidad.

¡Vamos a sumergirnos!

¿Por qué comprimir imágenes grandes a un tamaño más pequeño?

Una de las mayores tendencias en diseño web en este momento es tener imágenes grandes y hermosas en su sitio web. Pero cuando se trata del rendimiento web, estas imágenes grandes suelen ser las principales culpables de la ralentización de su sitio. Si se implementa incorrectamente, es probable que estas imágenes tengan un archivo de gran tamaño, lo que generará solicitudes HTTP más altas para su navegador.

Aquí hay algunos beneficios que puede obtener cuando comprime fotos grandes:

• Las imágenes comprimidas aumentarán la velocidad , dando como resultado una experiencia de usuario óptima, según Google. Google PageSpeed ​​Insights recomienda dimensionar correctamente las imágenes (especialmente para dispositivos móviles), diferir las imágenes fuera de pantalla (aplicando la carga diferida) y usar un formato de próxima generación como WebP si desea mejorar el tiempo de carga.

• Al cambiar el tamaño y comprimir las imágenes, puede reducir el tamaño de la página y aumentar las métricas de rendimiento definidas por Google , incluido Core Web Vitals. Optimizar sus imágenes también significa una reducción en el tiempo que los visitantes tienen que esperar antes de interactuar con su sitio web (métrica de tiempo para interactuar) y una velocidad percibida mejorada (métricas de primera pintura con contenido y mayor pintura con contenido).

• Los tamaños de archivo de imagen más pequeños usan menos ancho de banda: ¡sus redes y navegadores sin duda lo apreciarán! La optimización de imágenes a menudo puede generar algunos de los mayores ahorros de bytes y mejoras de rendimiento para su sitio web: cuantos menos bytes tenga que descargar un navegador, menos competencia en el ancho de banda, lo que significa un tiempo de carga más rápido.

• Las solicitudes HTTP para imágenes HD grandes también pueden afectar negativamente el rendimiento y es por eso que debe realizar menos solicitudes HTTP para acelerar su sitio de WordPress.

La compresión de imágenes es necesaria para aumentar el rendimiento pero, por otro lado, no desea imágenes borrosas para su sitio web, ¿verdad? El objetivo es lograr un resultado que equilibre la calidad y la optimización como en nuestro ejemplo a continuación:

Sin compresión JPEG – 400 KB	Compresión (calidad sin cambios) JPEG – 170 KB

Eso nos lleva a la siguiente parte: ¿cómo se reduce el tamaño de la imagen sin perder ni sacrificar la calidad?

Cómo cambiar el tamaño y comprimir imágenes a granel (PNG y JPEG)

Las dos cosas principales a considerar son el tipo de compresión que desea usar (con pérdida frente a sin pérdida) y el formato de archivo (PNG, JPEG, PDF, etc.). Puede ver a continuación cómo los formatos pueden afectar el tamaño de la imagen:

Para aprovechar al máximo sus imágenes PNG y JPEG, hay muchas herramientas disponibles. Algunos lo ayudarán a hacer todo este trabajo en su nombre (p. ej., un complemento de WordPress), mientras que otros pueden permitirle realizar sus propias optimizaciones (p. ej., Photoshop).

Aquí está nuestra lista de herramientas favoritas que puede usar para comprimir imágenes JPEG o PNG de forma masiva. Los hemos clasificado en dos categorías:

• Categoría n.º 1: software y herramientas web de optimización de imágenes para optimizar imágenes PNG y JPEG de gran tamaño a granel

• Categoría #2 – Complementos de WordPress para cambiar el tamaño y comprimir imágenes PNG y JPEG grandes a granel

Comencemos con la primera categoría.

Categoría n.º 1: software y herramientas web de optimización de imágenes para optimizar imágenes PNG y JPEG de gran tamaño a granel

Aquí está nuestra lista de software y herramientas en línea que puede usar para cambiar el tamaño y comprimir varias imágenes grandes:

• Foto de afinidad para comprimir por lotes sus imágenes PNG y JPEG.

1. Vaya a Archivo > Nuevo trabajo por lotes

2. Sube todas las imágenes que quieras comprimir en lote y selecciona el formato más adecuado a tus necesidades:

3. Definir la nueva calidad (70 es un buen número para mantener una buena calidad)

• Vista previa (en Mac): para cambiar el tamaño de sus imágenes a granel ( pero no las comprime ).

1. Abre todas las imágenes usando Vista Previa
2. Seleccionarlos todos
3. Vaya a Herramientas > Tamaño y seleccione nuevas dimensiones de imagen

¡Trabajo hecho! El tamaño resultante es más pequeño.

• Mass Image Compressor : una herramienta de compresión y conversión de imágenes por lotes de apuntar y disparar para la optimización de sitios web.

• Gimp: el popular editor de imágenes gratuito para Mac y Windows. GIMP viene con el llamado modo por lotes que le permite procesar imágenes PNG, JPEG y otros formatos como GIF o PDF. Deberá descargar e instalar una extensión gratuita llamada "Complemento de manipulación de imágenes por lotes (BIMP). Los pasos son realmente sencillos.

• Photoshop : para cambiar el tamaño y comprimir sus imágenes PNG y JPEG (afecta la calidad y es relativamente costoso).
  1. Abra Adobe Photoshop, seleccione Archivo > Scripts > Procesador de imagen
  2. Haga clic en Seleccionar carpeta para que pueda elegir la carpeta donde se encuentran las imágenes
  3. Ajuste la configuración para reducir el tamaño
  4. Elija una configuración entre 1 y 12 en el campo Calidad (sugiero no bajar de 6).
  5. Haga clic en "Ejecutar acción"

Nota: Photoshop puede ser una curva de aprendizaje empinada, por lo que si está interesado, hemos enumerado 10 alternativas a Photoshop para la optimización de imágenes.

Si desea ahorrar tiempo, no es necesario que se ocupe manualmente de todo el formateo y la compresión. ¡Afortunadamente, algunos complementos hacen parte de este trabajo automáticamente por usted! Eso nos lleva a la segunda categoría: los complementos de WordPress.

Categoría #2 - Complementos de WordPress para cambiar el tamaño y comprimir imágenes PNG y JPEG grandes a granel

Puede usar uno de los complementos de WordPress a continuación para comprimir imágenes grandes a granel, a saber:

• Imagify (nuestro complemento gratuito)
• Optimol
• Comprimir JPEG y PNG (pequeño PNG)
• EWWW
• Píxel corto
• reSmush.it

Todos ofrecen optimización masiva, y la mayoría también convierte tus imágenes al formato WebP como recomienda Google. Para nuestro caso de estudio, utilizaremos Imagify y destacaremos los pasos que debe seguir para optimizar sus imágenes grandes.

Cómo comprimir imágenes grandes sin perder calidad con Imagify

Con Imagify, puede cambiar el tamaño y comprimir en masa sin tener que salir de WordPress. Echemos un vistazo al panel de control de Imagify para que pueda obtener la apariencia de la función de optimización masiva desde el menú Medios > Optimización masiva :

Después de activar el complemento Imagify, simplemente elija su nivel de compresión y haga clic en el botón " IMAGIF'EM ALL ".

Ese es el tipo de ahorro que puede obtener al utilizar la función de optimización masiva de Imagify: ¡casi el 87 %!

Ahora realicemos una demostración de "antes y después" para que pueda ver por qué debería optimizar sus imágenes con Imagify.

Comprimir imágenes grandes a granel: un escaparate

Ejecutaré dos escenarios de optimización masiva para mis imágenes en dispositivos móviles:

• Escenario 1: resultados de rendimiento con imágenes JPEG (sin Imagify)
• Escenario 2: resultados de optimización de imágenes masivas con imágenes WebP y modo de optimización agresivo (con Imagify)

Estas son las herramientas y métricas que tendré en cuenta:

Herramientas:
Google PageSpeed ​​Insights y WebPageTest

Métrica:

• Tamaño de archivo de cada foto
• Pintura con contenido más grande
• Tamaño de página
• Solicitudes HTTP
• Tiempo de carga

Escenario 1: resultados de rendimiento con imágenes JPEG (sin Imagify)

1. 9 imágenes servidas en formato JPEG
2. Las imágenes no están optimizadas

Estas son las marcas de optimización de imágenes que obtuve después de ejecutar la auditoría de PageSpeed ​​Insights:

A continuación se muestra el desglose del contenido de mi página. Las imágenes son las responsables de realizar el 60% de las solicitudes y el 81,5% del total de bytes:

Escenario 2: resultados de optimización de imágenes masivas con imágenes WebP y modo de optimización agresivo (con Imagify)

• Las mismas 9 imágenes convertidas al formato WebP con Imagify
• Imágenes optimizadas a granel con Imagify

Optimicemos masivamente nuestras imágenes y convirtámoslas a WebP usando Imagify:

Inmediatamente después de un par de clics, Imagify ahorró en promedio el 55 % del tamaño de nuestro archivo:

Nuestras métricas de rendimiento también están en mejor forma :

Imagify también resolvió los problemas de rendimiento señalados por PageSpeed ​​Insights :

Solo podemos ver resultados positivos gracias a la función de optimización masiva de Imagify:

• Todas mis imágenes están comprimidas: tienen un tamaño más pequeño y no comprometemos la calidad.
• My Core Web Vital (LCP) estaba en naranja con una puntuación de 3,6 s, pero con Imagify pasó a la zona verde con 1,6 s.
• El tiempo de carga de mi página bajó de 3,7 s a 2,1 s.
• Solo el 43% de las solicitudes ahora provienen de imágenes (era el 60% sin Imagify).
• Las imágenes ocupan el 26,5% del contenido total de bytes (frente al 82% anterior).

Terminando

El complemento Imagify nos permitió cambiar rápidamente el tamaño y comprimir imágenes grandes a granel directamente desde el panel de control de WordPress. ¡Nos tomó dos clics optimizar todas nuestras imágenes automáticamente y ahorró en promedio el 60% del tamaño de nuestro archivo! Además, Imagify puede convertir sus imágenes de WordPress a WebP, el formato de próxima generación recomendado por Google.

No permita que el rendimiento lento del sitio le cueste conversiones. ¡Comience a optimizar sus imágenes en masa con Imagify gratis hoy!