Articulo de ayuda
Cómo optimizar imágenes para web sin perder calidad
Optimiza las imágenes de tu web: formato, peso, dimensiones, WebP, lazy loading y herramientas gratuitas para reducir el tamaño sin perder calidad.
Introducción
Las imágenes son, casi siempre, el elemento más pesado de una web. Una sola foto sin optimizar puede pesar más que todo el resto de la página junta. Por eso, optimizar imágenes es la mejora que más impacto tiene en la velocidad de carga.
En este artículo vas a ver cómo reducir el peso de las imágenes sin que se vean peor, qué formatos usar y qué herramientas ayudan.
Por qué las imágenes ralentizan tu web
Cada imagen que un visitante carga es un archivo que tiene que descargar su navegador. Si la imagen pesa 3 MB, el visitante tiene que descargar 3 MB antes de verla. Y si tienes 20 imágenes por página, son 60 MB.
Consecuencias:
- La web tarda mucho en cargar.
- Consumes ancho de banda, sobre todo del visitante móvil.
- Google te penaliza en SEO (la velocidad es un factor de ranking).
- El visitante abandona antes de que cargue.
La buena noticia: una imagen optimizada puede pesar 10 veces menos y verse prácticamente igual.
Reglas básicas de optimización
1. Redimensiona antes de subir
No subas una foto de 4000×3000 píxeles si en la web se va a mostrar a 800×600. Redimensiona la imagen al tamaño en el que se va a ver.
| Uso | Tamaño recomendado |
|---|---|
| Imagen destacada de artículo | 1200×800 px |
| Banner a ancho completo | 1920×600 px |
| Miniatura de producto | 600×600 px |
| Icono | 128×128 px |
Si subes una imagen más grande de lo que se muestra, el navegador la escala, pero sigue descargando el archivo grande. Redimensiona siempre.
2. Elige el formato adecuado
| Formato | Para qué | Peso |
|---|---|---|
| WebP | Fotos y gráficos (formato moderno) | Muy bajo |
| AVIF | Fotos (formato aún más moderno) | Más bajo aún |
| JPEG | Fotos | Bajo |
| PNG | Imágenes con transparencia | Alto |
| GIF | Animaciones simples | Medio |
Recomendación: usa WebP siempre que puedas. Es compatible con todos los navegadores modernos y pesa mucho menos que JPEG o PNG con la misma calidad.
Si usas WordPress, los plugins de optimización (como LiteSpeed Cache, Smush o ShortPixel) convierten las imágenes a WebP automáticamente.
3. Comprime sin pasarte
La compresión reduce el peso quitando datos que el ojo no percibe. Hay dos niveles:
- Compresión con pérdida (lossy): reduce más el peso, pero pierde un poco de calidad. Recomendada para la mayoría de casos.
- Compresión sin pérdida (lossless): no pierde calidad, pero reduce menos el peso.
Para web, una compresión con pérdida moderada (calidad 80-85) suele ser suficiente. El ojo casi no nota la diferencia, pero el peso baja mucho.
4. Usa lazy loading
El lazy loading (carga diferida) hace que las imágenes solo se carguen cuando el visitante hace scroll y llega a ellas. Así, las imágenes que están fuera de la pantalla no ralentizan la carga inicial.
WordPress incluye lazy loading nativo desde la versión 5.5. También lo añaden plugins como LiteSpeed Cache.
Herramientas para optimizar imágenes
Gratuitas online
| Herramienta | Para qué | Notas |
|---|---|---|
| Squoosh (Google) | Convertir y comprimir | Excelente, gratuita |
| TinyPNG / TinyJPG | Comprimir PNG y JPEG | Gratuito hasta 20 imágenes |
| Compressor.io | Comprimir varios formatos | Gratuito |
| Optimizilla | Comprimir JPEG y PNG | Gratuito |
Ya tienes una guía en nuestra base de conocimientos sobre optimizar imágenes con Optimizilla.
Para WordPress (plugins)
| Plugin | Característica | Precio |
|---|---|---|
| LiteSpeed Cache | Optimización + WebP | Gratuito (servidor LiteSpeed) |
| Smush | Compresión y redimensión | Gratis y de pago |
| ShortPixel | Compresión y WebP/AVIF | Gratis (cuota) y de pago |
| Imagify | Compresión y WebP | Gratis (cuota) y de pago |
Para escritorio
| Herramienta | Plataforma | Notas |
|---|---|---|
| FileOptimizer | Windows | Gratuito, muy completo |
| ImageOptim | Mac | Gratuito |
| GIMP | Todas | Editor gratuito, exporta optimizado |
| Photoshop | Todas | ”Guardar para web” reduce peso |
Cómo optimizar imágenes paso a paso
Paso 1: Redimensiona
Abre la imagen en tu editor (GIMP, Photoshop o una herramienta online) y reduce el tamaño al necesario. No subas imágenes más grandes de 2000 píxeles de ancho, salvo casos muy concretos (banners a pantalla completa).
Paso 2: Comprime
Pásala por una herramienta de compresión como Squoosh o TinyPNG. Si usas JPEG, baja la calidad a 80-85. Si usas PNG, déjate guiar por el preview.
Paso 3: Convierte a WebP
Si tu web lo soporta (la mayoría de WordPress y webs modernas), convierte la imagen a WebP. Pesará menos con la misma calidad.
Paso 4: Sube y verifica
Sube la imagen a tu web. Comprueba con PageSpeed Insights que ya no aparece en el listado de “optimizar imágenes”.
Consejos útiles
- Optimiza antes de subir, no después. Si subes imágenes enormes y confías en un plugin para reducirlas, consume recursos del servidor.
- Establece un tamaño máximo. Pon un límite (por ejemplo 1920 píxeles de ancho) para todas las imágenes que subas.
- Cuidado con los logos y capturas en PNG. Los PNG de gran tamaño son muy pesados. Usa SVG para logos y JPEG/WebP para fotos.
- Revisa las imágenes antiguas. Si tu web tiene años, probablemente tenga imágenes sin optimizar. Un plugin puede comprimirlas en bloque.
- No olvides el atributo
alt. Además de optimizar el peso, describe la imagen con un texto alternativo para SEO y accesibilidad.
Problemas frecuentes
Las imágenes se ven pixeladas tras comprimir
Has comprimido demasiado. Sube la calidad o usa compresión sin pérdida.
El formato WebP no se ve en navegadores antiguos
WebP es compatible con todos los navegadores modernos. Para los muy antiguos (IE11), usa un plugin que sirva una versión JPEG de respaldo.
Los SVG no se ven o dan error de seguridad
Algunos CMS (como WordPress) no permiten subir SVG por seguridad. Usa un plugin de SVG o sube los logos en PNG optimizado.
Tengo miles de imágenes antiguas sin optimizar
Usa un plugin de optimización masiva (como Smush o ShortPixel) que comprima todas las imágenes existentes en bloque. Requiere tiempo, pero se hace solo.
Mi web sigue lenta tras optimizar las imágenes
Revisa otros factores: caché, JavaScript, plugins, servidor. La imágenes suelen ser el 50 % del problema, pero no el 100 %.
Preguntas frecuentes
¿Qué peso debería tener una imagen para web?
Como regla general, una imagen optimizada para web no debería pesar más de 200 KB. Las imágenes a pantalla completa pueden pesar hasta 500 KB; las miniaturas, menos de 50 KB.
¿WebP o JPEG?
WebP, siempre que tu web lo soporte. Pesa menos con la misma calidad.
¿Puedo optimizar imágenes que ya están en mi web?
Sí. Los plugins de WordPress (Smush, ShortPixel) pueden optimizar imágenes ya subidas en bloque.
¿Es mejor PNG o JPEG?
Depende. JPEG para fotos (más compresión); PNG para imágenes con transparencia o pocos colores (logos, iconos). WebP para ambas cosas.
¿El lazy loading afecta al SEO?
No, al contrario. Google lo recomienda. Solo asegúrate de que las imágenes importantes (como la principal) carguen sin lazy loading.
Imágenes ligeras, web rápida
Optimizar imágenes es la mejora más rentable que puedes hacer en tu web. Es gratis, rápida y tiene un impacto enorme en la velocidad. Con las herramientas adecuadas y unas reglas básicas (redimensionar, comprimir, usar WebP, lazy loading), tu web cargará mucho más rápido.
Si después de optimizar tu web sigue lenta, puede que el problema esté en el hosting. En miHosting usamos NVMe SSD y LiteSpeed que ofrecen un tiempo de respuesta del servidor muy bajo, lo que mejora tus Core Web Vitals. Abre un ticket desde tu panel de cliente y te ayudamos a diagnosticar.