Una vez pasé una tarde completa convencido de que el sitio de un cliente era lento debido a un error de renderizado en mi código de reacción. perfiló los componentes, cosas memotizadas, persiguió re-renders. El problema real era una imagen de héroe de fondo: un JPEG de 3,1 MB se guardó al 100% de calidad, cuando la misma imagen con un 80% de calidad habría sido de 480 KB y se veía idéntica. Había sobre-diseñado la aplicación y subestimaba los activos. Esa es una forma muy desarrolladora de perder un día.
Desde entonces, la compresión de imágenes ha sido lo primero que compruebo, no lo último. It's también el más incomprendido - "comprimir sin perder calidad" se trata como una paradoja, cuando en realidad es solo cuestión de saber qué palanca descarta datos y cuál no't. Esta guía es el modelo mental que uso, creado mientras envío Toolz.dev y tuning Vitales principales de la web en los sitios de clientes: cómo funciona realmente la compresión, cuándo usar con pérdidas versus sin pérdidas y por qué un número de calidad específico sigue ganando.
TL;Dr: aprovechamiento comprimir imagen con una calidad de alrededor del 80% para las fotos web, eso ' es el punto óptimo donde el archivo se reduce 60-80% y aún puedes ' No lo distingas del original en tamaño normal. Compresa del original (nunca vuelva a comprimir un JPEG), y siempre redimensionar Para mostrar las dimensiones antes de comprimir. Para el máximo ahorro, convertido fotos a webp primero. Todo se ejecuta en su navegador, nada se carga.
¿Qué está pasando realmente cuando comprime una imagen?
Una imagen digital es una cuadrícula de píxeles, cada color de almacenamiento. Por eso las imágenes RAW son enormes. Una imagen de 1920×1080 con color de 24 bits es:
1920 × 1080 × 3 bytes = 6,220,800 bytes ≈ 5.93 MB
Casi seis megabytes para una foto. Una página con diez de ellos sería 60 MB de descargas antes de que se cargue una línea de texto. La compresión existe para hacer que sea sobrevivible, y lo hace de una de dos maneras fundamentalmente diferentes.
Compresión sin pérdidas Encuentra patrones en los datos y los codifica de forma más compacta, sin descartar nada. La imagen descomprimida es píxel por píxel idéntica al original. Las técnicas son elegantes: la codificación de longitud de ejecución se derrumba "rojo, rojo, rojo, rojo, en "5 × rojo" de codificación de diccionario (el algoritmo de desinflado en el núcleo de PNG) reemplaza los patrones recurrentes con códigos cortos; el filtrado de predicción almacena cada píxel como su diferencia de un valor predicho, por lo que los gradientes suaves se convierten en tiradas largas de números pequeños que se comprimen maravillosamente. PNG, WebP sin pérdida y AVIF sin pérdidas funcionan de esta manera.
Compresión con pérdida Logra ahorros mucho mayores al desechar datos que su sistema visual probablemente no notará, y es más inteligente que "elimina algunos píxeles." Convierte la imagen de RGB a un modelo de luminancia más color (su ojo es mucho más sensible al brillo que al color), luego reduce la resolución de los canales de color mientras mantiene el brillo nítido. Divide la imagen en bloques, transforma cada uno en coeficientes de frecuencia y redondea los de alta frecuencia (las texturas sutiles y el ruido) a menos valores. Ese paso de redondeo, la cuantificación, es donde realmente se pierden los datos. JPEG, WebP con pérdida y AVIF con pérdida siguen este arco.
El resultado práctico: sin pérdidas es para imágenes donde cada píxel es significativo: logotipos, capturas de pantalla, diagramas, cualquier cosa con texto nítido. Lossy es para fotografías e imágenes naturales, donde "se ve idéntico" importa mucho más que "es idéntico bit a bit."
¿Qué significan realmente los ajustes de calidad?
"Calidad 80%" es un número que las personas establecen sin saber qué les compra. Aquí está el mapa que uso para JPEG y Lossy WebP, basado en muchas comparaciones de antes y después en el tamaño de visualización real.
100% (máximo): Casi nunca la elección correcta. El archivo suele ser de 3 a 5 × más grande que el 80 % sin una mejora visible. Esa imagen de héroe que desperdiciaba aquí se guardó.
85-95% (alto): Para portafolios de fotografía e imágenes donde los detalles sutiles realmente importan. Al 90%, los artefactos son invisibles para la mayoría de los espectadores, incluso con el zoom del 100%.
75-85% (el punto dulce de la web): 60–70% más pequeño que el máximo, con artefactos invisibles a tamaño normal de visualización. Aquí es donde pertenecen casi todas las imágenes web.
50-75% (agresivo): Para miniaturas y vistas previas donde el tamaño es crítico. Los artefactos comienzan a mostrarse en degradados suaves y texturas finas si miras de cerca.
Por debajo del 50%: Bloqueo visible y bandas de color. Reserve para imágenes genuinamente de baja prioridad o restricciones de tamaño difícil.
PNG no ' no tengo "calidad" control deslizante porque ' no tiene pérdidas: lo optimizas de manera diferente. El nivel de compresión (0-09) intercambia tiempo de codificación por un archivo más pequeño, con 6 valores predeterminados sensibles. Reducir la profundidad del color ayuda enormemente cuando una imagen usa pocos colores: un logotipo de 16 colores que cae de 24 bits a 8 bits se reduce drásticamente sin cambios visibles. Y eliminar metadatos (EXIF, perfiles de color, marcas de tiempo) recorta bytes que nunca afectaron la imagen.
WebP es mi valor predeterminado para la web: con una calidad de 80, se ejecuta entre un 25 y un 35% más pequeño que JPEG con una calidad equivalente, y también funciona en un modo sin pérdidas que supera a PNG en aproximadamente una cuarta parte. AVIF se comprime aún más fuerte (comúnmente más de un 50% más pequeño que JPEG) pero codifica más lentamente y es ' No es compatible universalmente, por lo que lo sirvo con un respaldo WebP en lugar de solo.
¿A qué formato deberías comprimir?
Elegir el formato es la mitad de la batalla de compresión, y la decisión es más simple de lo que las opciones lo hacen parecer. Aquí está la comparación. D entrego a un nuevo compañero de equipo:
| formato | escribir a máquina | vs. Tamaño JPEG | diapositiva | mejor para |
|---|---|---|---|---|
| JPEG | con pérdidas | línea de saque | prohibido | Fotos en correo electrónico, respaldo universal |
| PNG | sin pérdidas | Mucho más grande para las fotos | sí | Capturas de pantalla, Logotipos, Texto, Diagramas |
| webp | a la vez | 25-35% más pequeño | sí | Predeterminado para fotos y gráficos web |
| todoterreno | a la vez | ~50% más pequeño | sí | Ahorro máximo, con una alternativa a WebP |
El error de formato más común, y I' Lo he detectado en la revisión de código más veces de las que puedo contar, es guardar fotografías como PNG. Debido a que PNG no tiene pérdidas, una foto guardada como PNG puede ser muchas veces más grande que la misma foto que un JPEG con una calidad del 85% sin diferencias visibles. PNG es para gráficos con bordes duros y texto, no para imágenes naturales. Utilice JPEG o WebP para fotografías y recuperará la mayor parte del peso de una página hinchada 's en un solo cambio.
Convertir es un trabajo de dos clics en el Convertidor de formato. El patrón que en realidad envío permite que el navegador negocie:
<img src="photo-800.webp"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 600px) 400px, 800px"
alt="Description">
aquello srcset Le da al navegador varios tamaños y le permite descargar el que se ajusta al dispositivo, para que un teléfono nunca extraiga la imagen de escritorio. Combinado con el formato correcto, es la diferencia entre un sitio rápido y uno lento.
¿Cuál es el orden correcto para comprimir imágenes web?
El orden es más que cualquier entorno individual, y hacerlo mal es el error silencioso detrás de la mayoría de "lo comprimé y todavía son enormes" quejas. La secuencia, cada vez:
cambiar el tamaño primero. La compresión de una imagen de 4000×3000 que se mostrará a 800×600 desperdicia el esfuerzo en píxeles a punto de descartarse, y el resultado es aún mucho más grande de lo necesario. redimensionar a las dimensiones de la pantalla (doble para retina) antes de que tocando el compresor. Este reordenar soluciona más problemas de imagen de gran tamaño que cualquier ajuste de calidad.
convertir el segundo. Mueva las fotos a WebP (o AVIF con un respaldo) usando el Convertidor de formato. Ahora estás comprimiendo la imagen más pequeña y de mejor formato.
comprimir el tercero. ejecutar comprimir imagen alrededor del 80% para imágenes web con pérdida, luego juzgue el resultado En el tamaño de visualización real- no ampliado al 400%, porque nadie ve una página web de esa manera.
Para hacerlo concreto, aquí 's el pase de optimización web que ejecuto en una página real: auditar con Lighthouse para encontrar las imágenes pesadas, cambiar el tamaño de cada una a su tamaño de pantalla, convertir a WebP, comprimir al 75-80% y luego volver a ejecutar Lighthouse para confirmar. El resultado típico es un 50-80% de descuento en el peso total de la imagen y un salto mensurable en la pintura con contenido más grande, que es la métrica que me envió por todo este camino en primer lugar.
Para un recorrido más amplio de cambio de tamaño, elección de formato y eliminación de fondo junto con la compresión, el Guía de herramientas de imagen Cubre todo el kit de herramientas.
¿Qué errores de compresión cuestan más?
Un puñado de errores explica la mayoría de los bytes desperdiciados y los daños de calidad más visibles. He hecho cada uno de estos.
con respecto a -Compressing un JPEG ya comprimido. Cada ronda de compresión con pérdida acumula nuevos artefactos sobre los viejos, y el daño es acumulativo y permanente. siempre comprima De la fuente original, y conserve esos originales: genere todas las versiones comprimidas a partir de ellos, nunca de una copia comprimida anterior.
Usando PNG para fotografías. Cubierto arriba, pero es la mayor ganancia individual cuando la detectas: una foto PNG de 5 MB se convierte en un JPEG de 500 KB sin diferencia visible.
sobrecompresión. Dejar caer JPEG al 30% hace que sea minúsculo archivos con bloqueo y bandas visibles. Manténgase en el 75-85% para la web y pruebe en tamaño real para encontrar su piso.
Saltando el paso de cambio de tamaño. Comprimir antes de cambiar el tamaño, como se cubre arriba, produce archivos que son de mayor calidad y de menor calidad de lo que deberían ser.
ignorando los formatos modernos. Servir JPEG cuando WEBP está disponible deja entre un 25 y un 35% de los ahorros potenciales sobre la mesa sin motivo alguno.
Si desea verificar su trabajo objetivamente, existen métricas de percepción: SSIM superior a 0,95 generalmente es " visualmente sin pérdidas, " y Google' Las puntuaciones de Butteraugli inferiores a 1,0 significan que las diferencias son esencialmente invisibles, pero honestamente, para el trabajo diario, ver la versión original y comprimida una al lado de la otra en tamaño real le dice casi todo lo que harían las matemáticas.
Preguntas frecuentes
¿Cómo comprimir las imágenes sin perder calidad?
Para una compresión sin pérdidas verdadera y perfecta en píxeles, utilice PNG o WebP sin pérdidas. Para "visualmente sin pérdidas" - no hay diferencia que puedas ver - usa JPEG o WebP con una calidad del 80-90%. El comprimir imagen Tool le permite configurar la calidad y comparar el original con la versión comprimida antes de descargarlo, para que pueda encontrar el punto exacto en el que el tamaño cae pero la imagen aún no se ha tocado.
¿Por qué la calidad del 80% se considera el número mágico?
En muchas pruebas de antes y después en el tamaño de visualización real, la calidad de JPEG o WebP alrededor del 80% es donde el archivo se ha reducido entre un 60 y un 70% desde el máximo, pero los artefactos siguen siendo invisibles sin espiar píxeles. Vaya más alto y usted paga muchos bytes por detalles que nadie ve; vaya mucho más bajo y los gradientes comiencen a anudarse. Es el mejor equilibrio para el uso web, por lo que es el predeterminado que busco.
¿Cuál es el mejor formato de imagen para sitios web en 2026?
WebP es el mejor valor predeterminado: aproximadamente un 25-35% más pequeño que JPEG con soporte universal para navegador. Para obtener el máximo ahorro, utilice AVIF (aproximadamente un 50% más pequeño que JPEG) servido con un respaldo WebP en a <picture> Elemento. Convertir con el Convertidor de formato. Mantenga el arte vectorial genuino como logotipos como SVG en lugar de comprimirlos como ráster.
¿Cuál es la diferencia entre la compresión con pérdida y sin pérdidas?
La compresión sin pérdidas reorganiza los datos de manera más eficiente sin descartar nada de ellos, por lo que el resultado es píxel por píxel idéntico al original: PNG funciona de esta manera. La compresión con pérdida elimina permanentemente los datos que su ojo probablemente no note, logrando ahorros mucho mayores: JPEG funciona de esta manera. Lossless normalmente produce una reducción del 10-40%; Lossy comúnmente produce un 60-90%. Utilice sin pérdidas para texto y gráficos, con pérdidas para fotografías.
¿Debo cambiar el tamaño de una imagen antes o después de comprimirla?
Cambie siempre el tamaño primero. Comprimir una imagen grande y luego reducirla desperdicia el esfuerzo de compresión en los píxeles que descarta el cambio de tamaño, dejando un archivo que es más grande y de menor calidad de lo que debería ser. Primero cambie el tamaño a las dimensiones de visualización y luego comprima la imagen más pequeña; ese orden produce el resultado más pequeño y limpio.
¿Es seguro comprimir imágenes con una herramienta en línea?
La mayoría de los compresores en línea cargan sus imágenes a sus servidores para procesarlas, lo cual es una preocupación para las fotos personales o el trabajo del cliente. los comprimir imagen tool en Toolz.dev se ejecuta completamente en su navegador usando la API de lienzo, por lo que sus imágenes nunca salen de su dispositivo, seguras para nada privado o propietario.
¿Por qué es una mala idea comprimir la misma imagen dos veces?
La compresión con pérdida descarta detalles y, al hacerlo, lo descarta dos veces: el segundo pase agrega nuevos artefactos encima del primer pase 's, y nada de eso regresa. Es por eso que siempre debes conservar el original y generar cada versión comprimida a partir de él, en lugar de comprimir un archivo que ya estaba comprimido una vez.
¿Cómo sé si mis imágenes son demasiado grandes?
Ejecute Google Lighthouse o PageSpeed Insights en su página; marque imágenes de gran tamaño y sugiera mejores tamaños. Una regla general rápida: si una sola imagen tiene más de 200 KB, vale la pena optimizarla, y las imágenes de héroes especialmente deberían quedar bien debajo de eso, ya que generan pintura más llena de contenido. Alimente a los delincuentes a través del flujo de trabajo de resize-convert-compress y vuelva a auditar.
¿Cómo comprimo una imagen a un tamaño de archivo específico como 200 KB o 1 MB?
Primero cambie el tamaño de las dimensiones de la pantalla, luego baje la calidad hasta que desactive el objetivo: comience en 80%, y si aún ha terminado, intente 70%, luego 60%. los comprimir imagen La herramienta muestra el tamaño de salida al mover el control deslizante, para que pueda ver cómo cruza el umbral en lugar de adivinar y volver a exportar. Cambiar el formato a WebP generalmente le compra otro 25-35% con la misma configuración de calidad, que a menudo es suficiente por sí solo.
¿Comprimir una imagen reduce su resolución o dimensiones?
No, la compresión y el cambio de tamaño son operaciones separadas. Comprimir una foto de 3000×2000 la deja 3000×2000; simplemente almacena esos píxeles usando menos bytes, a costa de algunos detalles finos. Si desea menos píxeles, eso ' es un cambio de tamaño, y eso ' es el cambio que normalmente ahorra más peso. Hacer ambas cosas, en ese orden, es lo que convierte un archivo de cámara de 6 MB en una imagen web de 90 KB.
