Lista de verificación de optimización de imágenes: Cada paso para web

Última actualización: June 28, 2026. Vuelve a ejecutar esta lista de verificación antes de cada publicación para resultados consistentes.

La optimización de imágenes es una secuencia, no un paso único. Si te saltas una etapa, el resultado será lento o borroso. Esta lista de verificación recorre cada etapa —elección de formato, redimensionamiento, compresión, entrega responsiva, carga diferida (lazy loading) y configuración de CDN— en el orden en que realmente lo haces, para que puedas revisarla antes de cada publicación y saber que las imágenes cargarán rápido y se verán nítidas.

Respuesta rápida: ¿qué incluye un pase completo de optimización de imágenes?

Un pase completo significa elegir el formato correcto (WebP para fotos, SVG para vectores, PNG para transparencia), redimensionar a las dimensiones de visualización, comprimir al tamaño de archivo objetivo, servir variantes responsivas con srcset, implementar carga diferida para imágenes debajo del pliegue y entregar desde un CDN. Saltar cualquier etapa deja rendimiento sobre la mesa: una imagen sin comprimir es lenta, una imagen sobredimensionada desperdicia bytes y una imagen sin carga diferida retrasa el renderizado inicial. Ejecuta toda la lista de verificación en lugar de elegir etapas.

¿Por qué ejecutar una lista de verificación en lugar de optimizar ad hoc?

La optimización de imágenes tiene muchos pasos pequeños, y olvidar uno anula el trabajo de los demás. Una lista de verificación convierte un proceso multi-paso que se puede olvidar en una rutina repetible que produce resultados consistentes.

• Cada etapa aborda un factor de rendimiento distinto.
• Saltar una etapa deja ese factor sin abordar.
• Las etapas son lo suficientemente independientes como para ser verificadas con fiabilidad en una lista.

Etapa 1: Elegir el formato correcto

El formato es la primera decisión porque restringe todo lo que viene después. Haz coincidir el formato con el contenido de la imagen.

• WebP — el predeterminado para fotos en navegadores modernos. Más pequeño que JPEG con la misma calidad.
• AVIF — incluso más pequeño que WebP, con soporte creciente. Úsalo con un fallback a WebP o JPEG.
• SVG — para logotipos, iconos y gráficos vectoriales. Escala infinitamente, archivo diminuto.
• PNG — para imágenes que necesitan transparencia y calidad sin pérdida (lossless).
• JPEG — el fallback universal para fotos cuando los formatos modernos no son compatibles.

La guía de comparación de formatos y la guía AVIF vs WebP cubren las compensaciones en profundidad. Elige el formato que proporcione el archivo más pequeño con una calidad aceptable para el contenido.

Etapa 2: Redimensionar a las dimensiones de visualización

Nunca sirvas una imagen más grande de lo que se muestra. Una foto de 4000 píxeles en un espacio de 600 píxeles desperdicia ancho de banda y ralentiza la página. Redimensiona al tamaño más grande que mostrará la imagen, teniendo en cuenta el retina (2x).

Redimensionar antes de comprimir es importante porque la compresión funciona con el conteo de píxeles: menos píxeles se comprimen a menos bytes. La guía de redimensionamiento cubre cómo hacer esto sin pérdida de calidad.

Etapa 3: Comprimir al tamaño de archivo objetivo

Después de redimensionar, comprime para reducir los bytes. Apunta al archivo más pequeño sin pérdida visible de calidad.

• Fotos: WebP o JPEG con calidad 80.
• Gráficos con color plano: PNG o WebP sin pérdida.
• Prueba con zoom del 100% para confirmar que no hay artefactos visibles.
• Intenta mantener las imágenes hero por debajo de los 200 KB y las imágenes de contenido por debajo de los 100 KB.

La guía de compresión cubre las técnicas y la configuración de calidad.

Etapa 4: Servir variantes responsivas

Diferentes pantallas necesitan diferentes tamaños de imagen. Sírvelas con srcset para que cada dispositivo descargue el archivo correcto en lugar de uno universal.

• Genera variantes 1x, 2x y 3x para pantallas retina.
• Usa descriptores de ancho (400w, 800w) con sizes para diseños responsivos.
• Deja que el navegador elija el archivo correcto.
• La guía de imágenes responsivas cubre el marcado (markup).

Etapa 5: Cargar diferida (Lazy-load) en imágenes debajo del pliegue

Las imágenes debajo del pliegue no deben cargar hasta que el usuario se desplace hasta ellas. Esto libera ancho de banda para el renderizado inicial y mejora la métrica Largest Contentful Paint.

• Añade loading="lazy" a las imágenes debajo del pliegue.
• Mantén la imagen hero precargada (eager-loaded) para que el elemento LCP cargue rápido.
• La guía de carga diferida cubre la implementación.

Etapa 6: Entregar desde un CDN

Sirve las imágenes desde una red de entrega de contenido (CDN) para que se carguen desde una ubicación perimetral cercana a cada usuario. Un CDN reduce la latencia y descarga el servidor de origen, lo cual es más importante para sitios con audiencia geográficamente dispersa; de lo contrario, un usuario en otro continente espera que cada imagen cruce esa distancia desde tu origen. La guía de CDN cubre la configuración, incluidas las funciones de transformación que permiten a un CDN redimensionar y reformatear sobre la marcha, y la guía Core Web Vitals relaciona la entrega rápida de imágenes con las métricas que afectan el ranking.

Un CDN también absorbe picos de tráfico. Cuando una página se vuelve viral o una campaña envía un aumento de visitantes, la caché perimetral sirve las imágenes en lugar del origen, por lo que el sitio permanece rápido bajo una carga que de otro modo abrumaría a un solo servidor. Para sitios donde el tiempo de actividad bajo tráfico es tan importante como el tiempo promedio de carga, esta resiliencia es tan valiosa como la reducción de latencia.

Errores comunes de optimización

Incluso con una lista de verificación, algunos errores se repiten y anulan el trabajo. Conocerlos acelera la etapa de verificación.

• Comprimir antes de redimensionar — desperdicia esfuerzo en píxeles que se desechan. Redimensiona siempre primero.
• Servir un tamaño a todos los dispositivos — los teléfonos descargan archivos del tamaño de escritorio. Usa srcset.
• Cargar diferida la imagen hero — retrasa el elemento LCP. Mantén la imagen por encima del pliegue precargada (eager).
• Olvidar atributos de ancho y alto — causa desplazamiento de diseño mientras las imágenes cargan. Inclúyelos siempre.
• Usar PNG para fotos — infla el archivo. Usa WebP o JPEG para contenido fotográfico.

Verificación: ¿funcionó la optimización?

Después de ejecutar la lista de verificación, verifica el resultado con mediciones en lugar de adivinar. Las herramientas confirman si las imágenes realmente cargan rápido, y medir es la única forma de saber que la optimización funcionó; la inspección visual no revela el tamaño del archivo ni el orden de carga. Ejecuta estas comprobaciones tanto en una conexión rápida como en una lenta, ya que la optimización que parece bien en banda ancha aún puede tener problemas con datos móviles.

1. Ejecuta Google PageSpeed Insights y revisa las oportunidades relacionadas con imágenes.
2. Confirma que el elemento LCP carga dentro de 2.5 segundos.
3. Revisa la pestaña red para confirmar que se carga el archivo con el tamaño correcto por dispositivo.
4. Verifica que las imágenes cargadas diferidamente (lazy-loaded) se retrasen hasta el desplazamiento.

La guía de medición de rendimiento web.dev documenta cómo PageSpeed puntúa las páginas, y la guía de rendimiento de Mozilla cubre las métricas en profundidad. Una página que pasa estas comprobaciones después de la lista de verificación tiene imágenes genuinamente rápidas, no solo imágenes que parecen optimizadas. Para el contexto SEO más amplio, la guía de SEO para imágenes conecta estas ganancias de rendimiento con el ranking de búsqueda.

Preguntas frecuentes

¿Qué incluye un pase completo de optimización de imágenes?

Elegir el formato correcto, redimensionar a las dimensiones de visualización, comprimir a un tamaño de archivo objetivo, servir variantes responsivas con srcset, implementar carga diferida debajo del pliegue y almacenar en caché en un CDN. Saltar cualquier etapa deja bytes o calidad sobre la mesa. La lista de verificación existe para que no se olvide ninguna etapa.

¿Por qué ejecutar una lista de verificación en lugar de optimizar ad hoc?

Porque la optimización ad hoc omite etapas: un desarrollador comprime pero olvida redimensionar, o añade srcset pero olvida la carga diferida (lazy-loading). Una lista de verificación garantiza que cada imagen pase por todas las etapas, consistentemente, en todo el sitio. La consistencia es lo que mueve Core Web Vitals a escala.

¿Cuál es la mayor ganancia de optimización de imágenes?

Redimensionar a las dimensiones de visualización. Una foto de cámara de 6000px servida a 800px es el mayor desperdicio individual en la mayoría de los sitios. Redimensiona primero; todo lo demás se acumula sobre una base con el tamaño correcto.

¿Cómo sirvo variantes responsivas?

Genera cada imagen en los tamaños que necesitan tus puntos de ruptura (breakpoints), y luego usa srcset y sizes para dejar que el navegador elija el archivo correcto según el viewport. El navegador solo descarga la variante que necesita, ahorrando bytes en pantallas pequeñas. Consulta la guía de imágenes responsivas.

¿Con qué frecuencia debo reoptimizar las imágenes?

Siempre que añadas nuevas imágenes, y audita el conjunto existente cuando Core Web Vitals disminuyen. Las imágenes antiguas optimizadas hace años pueden estar en JPEG cuando ahora sería más pequeño con WebP. Una auditoría periódica detecta la deriva de formato y compresión.

¿Cómo audito las imágenes de un sitio existente?

Ejecuta un rastreo (Lighthouse, o una herramienta como Screaming Frog) para listar cada imagen con su tamaño y dimensiones, y luego marca cualquier imagen que sea sobredimensionada para su espacio de visualización, servida como JPEG cuando WebP sería más pequeño, o que carezca de atributos width/height. Arregla primero los mayores infractores: unas pocas imágenes enormes suelen representar la mayor parte del peso de la página. Vuelve a ejecutar la auditoría después de las correcciones para confirmar la mejora.