Como reduzco el tamano de una imagen sin perder calidad visible?
La compresion de imagenes existe en dos formas:
- Sin perdida (lossless) — elimina metadatos y datos redundantes sin modificar los valores de pixel. La imagen es identica bit a bit tras la descompresion.
- Con perdida (lossy) — descarta algunos datos de pixel que el ojo humano dificulmente notara. Archivo mas pequeno, pero con alguna reduccion de calidad en ajustes agresivos.
Para imagenes web, un JPEG al 70–85% de calidad suele ser indistinguible del original a tamanos de visualizacion normales, siendo 3 a 5 veces mas pequeño. La compresion PNG es siempre sin perdida, pero puede reducirse de forma significativa eliminando metadatos.
Objetivos de peso practicos:
- Imagenes de cabecera: menos de 200KB
- Imagenes de contenido: menos de 100KB
- Miniaturas: menos de 30KB
El Compresor de imagenes gestiona JPEG, PNG y WebP con ajustes de calidad configurables — todo el procesamiento ocurre en el navegador, ningun archivo se sube a un servidor.
Que formato de imagen debo usar para la web?
El formato adecuado depende del contenido de la imagen:
| Formato | Ideal para | Transparencia | Animacion |
|---|---|---|---|
| JPEG | Fotos, degradados complejos | No | No |
| PNG | Capturas, logos, texto sobre imagen | Si | No |
| WebP | Sustituto moderno de JPEG y PNG | Si | Si |
| SVG | Iconos, ilustraciones, logos | Si | Si |
| GIF | Animaciones simples (en gran parte sustituido por WebP) | Si | Si |
El Conversor de formato convierte entre JPEG, PNG, WebP y GIF en el navegador — util para conversiones antes de la publicacion.
Como optimizo un archivo SVG?
Los archivos SVG exportados desde herramientas de diseño (Figma, Illustrator, Inkscape) contienen cantidades significativas de datos innecesarios:
- Metadatos y comentarios del editor
- Capas ocultas y elementos invisibles
- Anidamiento de grupos innecesario
- Atributos redundantes y valores por defecto
- Datos de trazado no optimizados (precision decimal excesiva, comandos redundantes)
Un SVG tipico de Figma puede reducirse un 30–70% sin ningun cambio visual. Los SVG mas ligeros cargan mas rapido, se renderizan mas rapido y son mas faciles de mantener en el codigo.
El Optimizador SVG aplica las mismas transformaciones que la biblioteca SVGO — pegar el SVG y obtener una version limpia y minima lista para produccion.
Resumen
El peso de las imagenes es uno de los mayores factores que ralentizan la carga de las paginas. La compresion reduce el tamano dentro de un formato, la conversion a WebP lo reduce aun mas, y la optimizacion SVG elimina los residuos del editor de los archivos vectoriales. Las tres herramientas funcionan completamente en el navegador — sin cuenta, sin subida al servidor.