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

¿Quiere saber cómo cambiar el tamaño y comprimir grandes imágenes a granel sin perder calidad? Estás en la página correcta. Veamos cómo puede ahorrar tiempo optimizando sus fotos y aumentando el rendimiento de su sitio web. La compresión de la imagen es el proceso de reducir el peso de una imagen al reducir su tamaño, sin comprometer demasiado la calidad. En este artículo, descubrirá por qué es crucial cambiar el tamaño y comprimir las imágenes y cómo hacerlo fácilmente, sin perder calidad. ¡Vamos a bucear! Por qué comprimir imágenes grandes a tamaños más pequeños, una de las tendencias de diseño web más grandes en este momento es tener imágenes grandes y hermosas en su sitio. Pero cuando se trata del rendimiento web, estas imágenes grandes son a menudo la principal culpable de ralentizar su sitio. Si se implementa incorrectamente, estas imágenes pueden tener un archivo grande, lo que lleva a las solicitudes HTTP más grandes.
Aquí hay algunos beneficios que puede obtener al comprimir grandes fotos:
Las imágenes de la tableta aumentarán la velocidad, lo que dará como resultado una experiencia óptima para el usuario, según Google. Google PageSpeed ​​Insights recomienda el dimensionamiento correcto de las imágenes (especialmente para dispositivos móviles), posponiendo imágenes fuera de pantalla (aplicando carga perezosa) y utilizando un formato de próxima generación como WebP si desea mejorar el tiempo de carga.

Recomendaciones de imagen de Lighthouse (extracto) – Fuente: PSI
Al cambiar el tamaño y la compresión de las imágenes, puede reducir el tamaño de la página y aumentar los valores de rendimiento definidos por Google, incluidos los vitales de la Web Core. Optimización de sus imágenes. También significa una reducción en el tiempo que los visitantes deben esperar antes de interactuar con su sitio (métrico a interactivo) y una velocidad percibida mejorada (primera pintura contenta y pintura contable más grande). Las dimensiones de imágenes más pequeñas usan menos ancho de banda: sus redes ¡Y los navegadores definitivamente apreciarán esto! La optimización de imágenes a menudo puede conducir a algunos de los mayores ahorros de bytes y mejoras de rendimiento para su sitio web: cuantos bytes de bycopy menos, menos ancho de banda, el tiempo de carga más rápido.
Las demandas de HTTP para imágenes HD grandes también pueden afectar el rendimiento negativamente y es por eso que debe hacer menos solicitudes HTTP para acelerar su sitio de WordPress.
La compresión de la imagen es necesaria para aumentar el rendimiento, pero por otro lado, no desea imágenes poco claras para su sitio, ¿verdad? El propósito es lograr un resultado que equilibre la calidad y la optimización, como en nuestro ejemplo a continuación:

Esto nos lleva a la siguiente parte: ¿Cómo se reduce el tamaño de la imagen sin perder y sacrificar la calidad? Cómo cambiar el tamaño y comprimir las imágenes en el bloque (PNG y JPEG) Las dos cosas principales a considerar son el tipo de compresión que desea usar (con pérdidas sin pérdidas) y el formato de archivo (PNG, JPEG, PDFS, etc.). Puede ver a continuación cómo los formatos pueden afectar el tamaño de la imagen: Formato vs Tamaño del archivo – Fuente: Selesti.com Para aprovechar al máximo las imágenes PNG y JPEG, hay muchas herramientas disponibles. Algunos lo ayudarán a hacer todo este trabajo en su nombre (por ejemplo: un complemento de WordPress), mientras que otros pueden permitirle realizar sus propias optimizaciones (por ejemplo: Photoshop).

Aquí está nuestra lista de herramientas favorita que puede usar para comprimir imágenes JPEG o PNG. Los clasificé en dos categorías:

Categoría #1 – Herramientas web y software de optimización de imágenes para optimizar grandes imágenes PNG y JPEG
Categoría #2: complementos de WordPress para cambiar el tamaño y comprimir grandes imágenes PNG y JPEG
Comencemos con la primera categoría. Categoría #1 – Herramientas y software web de optimización de imágenes para optimizar grandes imágenes PNG y JPEG Aquí está nuestra breve 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 imágenes PNG y JPEG.
Ir a Archivo> Nuevo trabajo de lotes
Creación del trabajo en el lote – Fuente: Cómo canalizar YouTube 2. Cargue todas las imágenes que desea comprimir en el bloque y seleccione el formato más adecuado de acuerdo con sus necesidades: Salvación del trabajo en el lote – Fuente: Cómo canalizar YouTube 3. Defina la nueva calidad (70 es un buen número para mantener la buena calidad)
Comprimir y reducir imágenes (calidad a 70)

Vista previa (en Mac): cambiar sus imágenes en el bloque (pero no comprimirlas).

Abra todas las imágenes usando la vista previa

Seleccionarlos todos
Vaya a Herramientas> Tamaño y seleccione nuevas dimensiones de imagen
Vista previa de software hecho! El tamaño resultante es más pequeño.
Compresor de imagen de masa: un compresor y una conversión de imágenes de gran y disparo para optimizar el sitio web.
Configuración del compresor de imagen de masa

GIMP – Free Popular Image Publisher para Mac y Windows. GIMP viene con un llamado modo por lotes que le permite procesar PNG, JPEG y otros formatos 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 muy simples.
Manejo de imágenes en el lote – Fuente: Windows Club

Photoshop: para cambiar el tamaño y comprimir las imágenes PNG y JPEG (afecta la calidad y es relativamente caro).
Abra Adobe Photoshop, seleccione Archivo> Escrituras> Procesador de imágenes

Haga clic en Seleccionar carpeta para poder elegir la carpeta en la que están las imágenes
Ajuste la configuración para reducir el tamaño
Elija una configuración entre 1 y 12 en el campo de calidad (sugiero que no pase por debajo de los 6).
Haga clic en “Ejecutar acción”
Nota: Photoshop puede ser una curva de aprendizaje empinada, por lo que si está interesado, he enumerado 10 alternativas a Photoshop para optimizar la imagen. Si desea ahorrar tiempo, no necesita manejar todo el formato y comprimir. ¡Afortunadamente, algunos complementos hacen que algunos de esto funcionen para usted! Esto nos lleva a la segunda categoría: WordPress Plugins.
Categoría #2: complementos de WordPress para cambiar el tamaño y comprimir grandes imágenes PNG y JPEG Puede usar una de las a continuación WordPress para comprimir grandes imágenes a granel, a saber:
Imagen (nuestro complemento gratuito)
Óptimo
Comprimir JPEG y PNG (PNG Tiny)

Ewww
Shortpíxel
Resmush.it

¿Quieres saber qué complementos de WordPress son los mejores para tu proyecto? Hice el trabajo duro para usted y comparé los mejores complementos de compresión de imágenes (usando un escenario real). WebP, como Google recomienda. Para nuestro estudio de caso, utilizaremos Imagify y resaltaremos los pasos que debe seguir para optimizar sus grandes imágenes. Cómo comprimir grandes imágenes sin perder la calidad con Imagify con Imagify, puede cambiar el tamaño y comprimir a granel sin dejar WordPress. Echemos un vistazo al tablero de Imagify para que pueda obtener la apariencia de la función de optimización de bloques en el menú de medios> Optimización de bloques: Función de optimización de bloques: fuente: Imagifify Después de activar el complemento Imagify, simplemente elija su nivel de compresión y haga clic en el botón “Imagif’em All”. El nivel de compresión “agresivo” y el botón de optimización del bloque: Imagify es el tipo de ahorros que puede obtener mientras usa la función de optimización de bloques de Imagify: ¡casi el 87%! Ahorre casi el 87% de mi tamaño de archivo con Imagify, hagamos una presentación ahora “antes” antes “antes” Y después “, para que pueda ver por qué debe optimizar sus imágenes con Imagify. Compresión de grandes imágenes a granel: una presentación ejecutaré dos escenarios de optimización de bloques para mis imágenes móviles: Escenario 1 – Resultados de rendimiento con imágenes JPEG (sin imagen) Escenario 2: optimización de imágenes en bloque con imágenes webp y modo de optimización agresiva (con imagify) Aquí están las herramientas y valores que consideraré: Herramientas: Google PageSpeed ​​Insights y WebPagetest Valor: Tamaño del archivo de cada foto La pintura más grande llena de contenido Tamaño de página Solicitudes HTTP Tiempo de carga Escenario 1 – Resultados de rendimiento con imágenes JPEG (sin imagen) 9 imágenes servidas en formato JPEG Las imágenes no están optimizadas Mi sitio de prueba
valores móviles	sin imagen
El contenido más grande lleno de contenido (LCP)	3.6 s (en naranja)
tamaño de página	1.4 mb
Solicitudes http	28 (60% de las solicitudes son de imágenes)
tiempo de carga	3.7 s bypass (las imágenes ocupan hasta 82% del espacio)

Aquí están los indicadores de optimización de imágenes después de ejecutar las ideas de la velocidad de la página:
Problemas de imagen: la auditoría PSI a continuación es el desglose del contenido de mi página.Las imágenes son responsables de realizar el 60% de las solicitudes y el 81.5% de los bytes totales: espacio ocupado (sin Imagify) – Fuente: Escenario de prueba de la página web 2 – Optimización de la imagen de imagen y el método de optimización agresivo (con Imagify)
Las mismas 9 imágenes convertidas en formato webp con imagify
Bloques optimizados en el bloque con Imagify
Optimizemos nuestras imágenes en el bloque y las convirtemos en webp usando Imagify:

Las imágenes grandes se optimizan automáticamente en mi biblioteca – Fuente: Imagifify inmediatamente después de unos pocos clics, Imagify guardó el 55% de nuestro tamaño de archivo: imagen) tamaño del archivo (antes de imagificar)% de ahorros

< imagen #1 205 kb 88 kb62% imagen #2 203 kb 127 kb 60% Imagen #3 96 kb 73 KB32 % Imagen #4 200 kb 94 kb49% Imagen #5 122 kb 74 kb68%! Imagen #7 123 kb 75 kb68% Imagen #8 220 kb 110 kb50% imagen #9 279 kb 148 kb46%

Nuestros valores de rendimiento también están en una mejor forma:
Valores en Mobile sin imagen con imagen El contenido más grande lleno de contenido (lcp) 3.6 S (en naranja) 1.6 (en verde) tamaño de página 1.4 MB 847 KB solicitudes http 28 (60% de las solicitudes son de imágenes) 16 (43% de las solicitudes son de imágenes) tiempo de carga 3.7 s byte (las imágenes ocupan hasta 82% de espacio) 2.1 s bypass (imágenes Ocupar hasta el 26% del espacio)

Imagify también resolvió los problemas de rendimiento informados por PageSpeed ​​Insights: Image pasó las auditorías con Imagify. Solo podemos ver resultados positivos debido a la función de optimización de bloques de Imagify: la función de optimización de bloques:

Todas mis imágenes son tabletas: tienen un tamaño más pequeño y no comprometí la calidad. Mi Core Web Vital (LCP) estaba en naranja con una puntuación de 3.6 s, pero con imagoré se movió al área verde con 1,6 s.

El tiempo de carga de mi página cayó de 3.7 s a 2.1 s.
Solo el 43% de las solicitudes ahora provienen de las imágenes (era del 60% sin Imagify).
Las imágenes ocupan el 26.5% de todo el contenido final (en comparación con el 82% antes).
Tamaño bajo del archivo con Imagify- Fuente: Página web Prueba La conclusión del complemento Imagify nos permitió cambiar el tamaño y comprimir rápidamente imágenes a granel grandes desde el tablero de WordPress. ¡Nos llevó dos clics para optimizarnos automáticamente todas las imágenes y guardados en promedio el 60% del tamaño de nuestro archivo! Además, Imagify puede convertir sus imágenes de WordPress en WebP, el formato de nueva generación recomendado por Google. No permita que el rendimiento lento del sitio cuesta sus conversiones. ¡Comience a optimizar en las imágenes de bloque con Imagify gratis hoy!