29 Nov Cómo optimizar imágenes para web sin perder calidad

Optimizar imágenes para web no consiste simplemente en “comprimir una foto”. El objetivo real es reducir el peso de cada archivo sin degradar de forma visible la calidad y sin romper la experiencia de usuario. Para conseguirlo hay que elegir bien formato, dimensiones, nivel de compresión, carga diferida y forma de servir la imagen.

Una misma fotografía puede pesar 4 MB, 400 KB o 80 KB y seguir viéndose prácticamente igual en una pantalla normal. La diferencia está en cómo se ha preparado antes de publicarla.

En esta guía veremos cómo optimizar imágenes para web paso a paso, qué herramientas merece la pena utilizar, cuándo elegir JPEG, PNG, WebP o AVIF, cómo trabajar en WordPress y qué errores provocan que una web siga lenta aunque las imágenes ya estén comprimidas.

Por qué optimizar imágenes sigue siendo importante

En muchas webs, las imágenes siguen siendo uno de los recursos más pesados de una página. Hero images, banners, galerías, capturas de pantalla, fotografías de producto o fondos pueden convertirse en el principal cuello de botella de carga.

El impacto no se limita al rendimiento técnico. Una imagen demasiado pesada afecta a:

• tiempo de carga;
• experiencia de usuario;
• consumo de datos móviles;
• Core Web Vitals;
• conversión;
• uso de almacenamiento y ancho de banda;
• coste de CDN y hosting en proyectos grandes.

La optimización también mejora la estabilidad del proyecto. Si cada redactor sube imágenes de 5.000 píxeles directamente desde una cámara o móvil, la biblioteca termina creciendo de forma innecesaria y el frontend acaba sirviendo archivos que nunca se muestran a tamaño completo.

Qué significa realmente “optimizar una imagen”

Hay cinco decisiones principales:

1. Dimensiones: cuántos píxeles necesita realmente.
2. Formato: JPEG, PNG, WebP, AVIF o SVG según el contenido.
3. Compresión: cuánta información podemos eliminar sin que se note demasiado.
4. Entrega: qué versión recibe cada dispositivo.
5. Carga: cuándo se descarga la imagen.

Comprimir una imagen de 4.000 × 3.000 píxeles y seguir sirviéndola en una tarjeta de 600 píxeles de ancho es mejor que no hacer nada, pero sigue siendo un desperdicio.

Qué formato de imagen usar en web

JPEG

JPEG sigue siendo válido para fotografías y mantiene compatibilidad universal. Su compresión con pérdida permite reducir bastante el peso, aunque hoy existen formatos más eficientes.

PNG

PNG tiene sentido cuando necesitas transparencia o gráficos donde la pérdida de calidad sería evidente. Para fotografías suele ser una mala elección porque los archivos pueden crecer muchísimo.

WebP

WebP se ha convertido en una de las opciones más prácticas para WordPress y web en general. Soporta compresión con y sin pérdida, transparencia y una buena reducción de peso frente a JPEG o PNG en muchos casos.

AVIF

AVIF puede conseguir archivos todavía más pequeños a calidad comparable, especialmente en fotografía. Su inconveniente principal es que el proceso de codificación puede ser más pesado y no todos los workflows o plugins lo gestionan igual de bien.

SVG

Para logos, iconos y gráficos vectoriales, SVG suele ser la opción correcta. No depende de una resolución fija y puede mantenerse nítido a cualquier tamaño.

WebP vs AVIF: cuál elegir

No existe un ganador universal. En proyectos donde prima facilidad y compatibilidad con herramientas, WebP es muy cómodo. Cuando el objetivo es exprimir al máximo el peso y el pipeline lo soporta correctamente, AVIF puede ser mejor.

Para la mayoría de proyectos WordPress pequeños y medianos, WebP sigue siendo una opción muy equilibrada.

Qué tamaño debe tener una imagen web

El error más común es pensar en “peso máximo” sin hablar antes de dimensiones.

Si una imagen se va a mostrar como máximo a 1200 píxeles de ancho, no tiene mucho sentido subir una versión de 5000 píxeles salvo que exista una necesidad concreta.

Como referencia práctica:

• hero o banner ancho: normalmente entre 1600 y 2000 px;
• imagen de contenido: alrededor de 1200 px suele ser suficiente;
• tarjetas o miniaturas: adapta la dimensión al componente;
• retina: puede justificarse servir aproximadamente el doble del tamaño CSS en algunos casos.

No trataría estas cifras como reglas rígidas. La resolución necesaria depende del diseño real.

Cuánto debería pesar una imagen

Tampoco existe una cifra mágica, pero conviene tener objetivos razonables.

La calidad visual manda. Si una foto necesita 220 KB para no mostrar artefactos y otra funciona a 90 KB, no intentaría imponer el mismo número a ambas.

Compresión con pérdida y sin pérdida

Sin pérdida

Reduce el archivo sin eliminar información visual. Es útil cuando la fidelidad absoluta importa, pero la reducción suele ser menor.

Con pérdida

Descarta información para conseguir archivos más pequeños. En fotografía web suele ser la mejor opción porque una compresión moderada puede ser prácticamente imperceptible.

La clave está en comparar visualmente. Comprimir más no siempre significa optimizar mejor.

Las mejores herramientas para optimizar imágenes

Squoosh: la herramienta más completa para control manual

Squoosh es una de las herramientas que más recomiendo para entender qué está ocurriendo realmente con una imagen. Permite comparar original y resultado, ajustar calidad, redimensionar y elegir diferentes codecs.

Su principal ventaja es que ves el impacto de cada ajuste en tiempo real. Eso permite aprender rápidamente cuándo una reducción adicional empieza a degradar demasiado la fotografía.

La usaría especialmente para:

• hero images;
• imágenes importantes de un artículo;
• comparar WebP y AVIF;
• buscar el punto óptimo entre calidad y peso.

Tinify y TinyPNG: compresión rápida y práctica

Tinify, conocido sobre todo por TinyPNG y TinyJPG, sigue siendo una de las opciones más cómodas cuando quieres arrastrar una imagen y reducirla rápidamente.

La compresión automática suele dar buenos resultados sin exigir demasiadas decisiones. Además, dispone de API para integrarlo en procesos más avanzados.

La elegiría si: necesitas rapidez y no quieres ajustar parámetros manualmente.

Smush: optimización dentro de WordPress

Smush tiene sentido cuando prefieres que la optimización ocurra dentro de WordPress. Puede comprimir imágenes y automatizar parte del proceso de la biblioteca multimedia.

La ventaja de un plugin es que reduce trabajo manual. La desventaja es que añade otra capa dentro de WordPress y hay que vigilar configuración, recursos y compatibilidad con otros sistemas de caché o CDN.

No instalaría varios plugins de optimización de imágenes simultáneamente. Es fácil terminar duplicando conversiones o generando versiones innecesarias.

Optimizilla: buena para ajustar compresión visualmente

Optimizilla permite cargar varias imágenes y ajustar el nivel de compresión con una vista previa. Es una herramienta simple, útil cuando quieres controlar el resultado sin entrar en conceptos técnicos.

No ofrece tanta profundidad como Squoosh, pero precisamente por eso puede ser más rápida para trabajo cotidiano.

ImageOptim: flujo local para Mac

ImageOptim es una herramienta de escritorio para macOS orientada a reducir tamaño de archivos sin complicar demasiado el proceso.

Me gusta especialmente para diseñadores que preparan muchas imágenes antes de subirlas al CMS. Mantener parte del trabajo fuera de WordPress reduce dependencia de plugins y evita procesar archivos enormes en el servidor.

Compressor.io

Compressor.io mantiene un enfoque muy directo: subir archivo, comprimir y descargar. Es útil para trabajos puntuales y usuarios que no necesitan construir un workflow complejo.

iLoveIMG: cuando necesitas trabajar por lotes

iLoveIMG reúne compresión, redimensionado, recorte y conversión. Su mayor ventaja es la comodidad cuando tienes muchas imágenes y necesitas hacer varias tareas sencillas en lote.

No la elegiría para afinar una hero image crítica, pero sí para preparar rápidamente conjuntos de imágenes de contenido.

Kraken.io: cuando necesitas API y automatización

Kraken.io encaja mejor en proyectos donde optimizar imágenes forma parte de un flujo automatizado. Dispone de API y herramientas orientadas a procesos más profesionales.

Si tu proyecto publica muchas imágenes al día, automatizar puede tener más sentido que depender de que cada editor recuerde abrir una herramienta manual.

Herramientas que ya no pondría en el centro de la guía

El artículo original incluía también ImageSmaller y CompressJPEG. Siguen pudiendo resolver tareas sencillas, pero hoy no las colocaría entre las opciones principales porque existen herramientas más completas y con mejor integración en flujos actuales.

No hace falta mantener una lista de diez herramientas por obligación. Es mejor recomendar menos opciones y explicar para qué sirve cada una.

Cómo optimizar una imagen paso a paso

1. Redimensiona antes de comprimir

Si la imagen se mostrará a 1200 px, reduce primero sus dimensiones. Es una de las formas más efectivas de ahorrar peso.

2. Elige formato

Fotografía: WebP o AVIF. Gráfico con transparencia: WebP, PNG o SVG según el caso. Iconos y logos: SVG siempre que sea posible.

3. Ajusta calidad

Empieza con una calidad media-alta y baja progresivamente observando la imagen. El objetivo es encontrar el punto en el que el peso cae mucho antes de que la degradación sea evidente.

4. Elimina metadatos innecesarios

Datos EXIF, miniaturas internas o perfiles que no necesitas pueden añadir peso.

5. Comprueba el resultado en contexto

No juzgues una imagen solo ampliada al 400%. Mírala al tamaño real donde aparecerá en la web.

Responsive images: servir una imagen distinta según pantalla

Una web responsive no debería obligar a un móvil a descargar el mismo archivo enorme que una pantalla de escritorio.

HTML permite utilizar atributos como srcset y sizes para ofrecer varias resoluciones. WordPress genera automáticamente diferentes tamaños y suele añadir esta información al marcado.

<img
  src="imagen-1200.webp"
  srcset="imagen-480.webp 480w,
          imagen-768.webp 768w,
          imagen-1200.webp 1200w"
  sizes="(max-width: 768px) 100vw, 1200px"
  alt="Descripción de la imagen">

Esto puede ahorrar mucho más que bajar unos puntos la calidad JPEG.

Lazy loading: cuándo cargar una imagen

El lazy loading retrasa la descarga de imágenes que todavía están fuera del viewport.

Es útil para imágenes de contenido, galerías y elementos muy por debajo del primer pantallazo.

Pero hay una excepción importante: no aplicaría lazy loading a la imagen principal que determina el Largest Contentful Paint. Retrasarla puede empeorar justo la métrica que intentamos mejorar.

Optimización de imágenes y Core Web Vitals

Las imágenes pueden afectar especialmente a dos métricas:

LCP

El Largest Contentful Paint suele corresponder a un hero, banner o bloque visual grande. Si esa imagen pesa demasiado o se descubre tarde, el LCP empeora.

CLS

El Cumulative Layout Shift puede empeorar si el navegador no conoce las dimensiones de una imagen antes de cargarla.

Por eso conviene mantener atributos width y height o una relación de aspecto definida.

Optimizar imágenes en WordPress

En WordPress trabajaría en tres niveles:

1. antes de subir: redimensionar y comprimir;
2. al subir: generar formatos/tamaños adecuados;
3. al servir: responsive images, caché y CDN si procede.

Automatizar parte del proceso es útil, pero no confiaría todo a un plugin. Si subes un PNG de 12 MB, el plugin puede reducirlo, pero sigues obligando al servidor a procesar un archivo innecesariamente grande.

CDN de imágenes y optimización dinámica

En proyectos con mucho tráfico o muchas fotografías puede tener sentido usar una CDN capaz de generar versiones adaptadas bajo demanda.

El flujo cambia:

imagen original → CDN → redimensionado → formato moderno → compresión → dispositivo.

Esto permite servir WebP o AVIF y tamaños distintos sin almacenar manualmente cada combinación.

Cuándo merece la pena automatizar

Si publicas una imagen a la semana, Squoosh o Tinify pueden ser suficientes. Si gestionas un ecommerce con miles de productos, necesitas un pipeline.

Cómo comprobar si una imagen está bien optimizada

Antes de dar el trabajo por terminado, revisaría:

• dimensión real del archivo;
• peso;
• formato;
• resolución servida en móvil;
• si se carga con lazy loading cuando corresponde;
• si tiene width y height;
• si la calidad visual sigue siendo suficiente;
• si el navegador descarga una versión desproporcionada.

Las DevTools del navegador son muy útiles para comprobar qué archivo se está descargando realmente.

Errores frecuentes al optimizar imágenes

Comprimir sin redimensionar

Puede dejarte con un archivo más ligero pero todavía mucho mayor de lo necesario.

Convertir todo a WebP sin criterio

El formato no sustituye una buena preparación.

Usar PNG para fotografías

Normalmente genera archivos excesivos.

Aplicar lazy loading al hero

Puede perjudicar el LCP.

Instalar varios plugins de optimización

Pueden solaparse, duplicar trabajo y complicar la biblioteca.

Buscar peso mínimo a cualquier precio

Una imagen llena de artefactos no está bien optimizada.

No comprobar móvil

Una imagen puede estar bien en escritorio y seguir siendo enorme para un dispositivo pequeño.

Mi flujo recomendado para una web WordPress

Para la mayoría de proyectos, utilizaría un proceso bastante sencillo:

1. exportar la imagen a la dimensión adecuada;
2. comprimir con Squoosh, Tinify o ImageOptim;
3. preferir WebP cuando encaje;
4. subir a WordPress;
5. dejar que WordPress genere tamaños responsive;
6. comprobar lazy loading;
7. revisar LCP y peso real en DevTools;
8. usar CDN solo cuando el proyecto lo justifique.

Es un flujo más fiable que intentar corregir después una biblioteca llena de originales enormes.

Preguntas frecuentes sobre optimización de imágenes

¿Cuál es la mejor herramienta para optimizar imágenes?

Squoosh es excelente para control manual, Tinify para compresión rápida, ImageOptim para Mac y Smush si prefieres automatizar dentro de WordPress.

¿Cómo reducir el peso de una imagen sin perder calidad?

Empieza reduciendo dimensiones, elige un formato eficiente y aplica compresión moderada comparando visualmente el resultado.

¿WebP o AVIF?

WebP ofrece un equilibrio excelente entre compatibilidad, velocidad y peso. AVIF puede comprimir más, aunque el proceso de codificación es más exigente.

¿Cuánto debe pesar una imagen para web?

Depende del tamaño y uso. Muchas imágenes de contenido pueden quedar entre 50 y 180 KB, mientras un hero grande puede necesitar algo más.

¿Es mejor comprimir antes o después de subir a WordPress?

Lo ideal es hacer ambas cosas: subir un archivo ya razonable y permitir que WordPress o el sistema de optimización genere las variantes necesarias.

¿El lazy loading mejora la velocidad?

Sí para imágenes fuera de la parte visible inicial, pero no conviene retrasar una imagen crítica que determina el LCP.

¿Optimizar imágenes mejora el SEO?

Puede mejorar rendimiento y experiencia, dos factores importantes para la calidad de una página. También facilita una carga más rápida, aunque por sí sola no garantiza mejores posiciones.

¿Debo convertir todas mis imágenes a WebP?

No necesariamente. Es una opción muy útil, pero SVG, PNG, JPEG o AVIF pueden ser mejores según el tipo de imagen y el contexto.

Optimizar imágenes es optimizar todo el sistema de entrega

Reducir unos kilobytes es útil, pero la optimización real empieza antes y termina después de la compresión. Hay que dimensionar correctamente, elegir formato, servir resoluciones adaptadas y decidir cuándo se carga cada archivo.

Para una web pequeña, unas pocas herramientas manuales pueden ser suficientes. Para un ecommerce o un medio con miles de imágenes, la optimización debe formar parte del propio flujo de publicación.

La mejor señal de que el proceso está bien diseñado es que deja de depender de que alguien recuerde “comprimir la foto” cada vez. Las imágenes llegan a producción con el peso, formato y tamaño adecuados de forma consistente.

Escrito por Jurgen B

Profesor en Aula CM de Diseño Web con WordPress, Diseño Gráfico, Community Manager, IA, SEO y ecommerce. Moderador de la mesa de ecommerce en Reunión de Agencias (2024–2026) y ponente en ProMarketing Day.

Sobre mí · LinkedIn