Pregunta a cualquier desarrollador web qué ralentiza la mayoría de las webs y la respuesta casi siempre es la misma. Las imágenes. La optimización de imágenes para la web es el proceso de reducir el tamaño de archivo de las imágenes sin perder calidad visual, para que las páginas carguen más rápido sin verse peor. Una sola fotografía sin comprimir puede pesar varios megabytes. La misma imagen, con el formato adecuado y comprimida, puede quedarse por debajo de 100 kilobytes sin diferencia visible en pantalla. Este artículo explica qué formatos de archivo usar, cómo funciona la compresión, cuándo cambiar el tamaño antes de subir, cómo encaja el lazy loading y qué marca la mayor diferencia práctica en la velocidad de carga de tu página.
Las imágenes son lo que más contribuye al peso de la página en la mayoría de las webs. Una página con cinco fotos sin optimizar puede pesar diez veces más de lo necesario. Ese peso se traduce directamente en una carga más lenta, una peor puntuación de Largest Contentful Paint (LCP) y visitantes que se van antes de que la página termine de mostrarse. Para entender por qué la velocidad de carga afecta a tu negocio y a tu posicionamiento en buscadores, consulta el artículo sobre por qué importa la velocidad de una web.
¿Por qué las imágenes ralentizan las webs?
Cuando un visitante abre una página, el navegador descarga todos los recursos que contiene antes de mostrarla. Las imágenes suelen ser los más grandes de esos recursos. Cada imagen requiere su propia petición, y el navegador debe esperar a que se completen para poder mostrar el contenido por completo.
Cómo afectan las imágenes a las métricas de carga
- Las imágenes afectan directamente al Largest Contentful Paint (LCP). Si el elemento visible más grande de una página es una imagen principal, el LCP es el tiempo que tarda esa imagen en cargarse por completo
- Las imágenes sin optimizar aumentan el peso total de la página, lo que retrasa todas las demás métricas de la línea de carga
- En las conexiones móviles, el efecto se amplifica. Una imagen principal de 3 MB que carga en dos segundos con banda ancha puede tardar ocho o más segundos en una red móvil media
- Varias imágenes grandes agravan el problema. Una galería o una página de producto con diez fotos sin comprimir puede ser difícil de usar en conexiones más lentas
¿Qué formatos de archivo debes usar para las imágenes web?
JPEG
- El formato estándar para fotografías e imágenes con degradados y muchos colores
- Admite compresión con pérdida, es decir, se elimina de forma permanente parte de los datos de la imagen para reducir el tamaño del archivo
- Es compatible con todos los navegadores y dispositivos sin excepción
- Un ajuste de calidad de 75 a 85 produce archivos entre un 60 y un 80 por ciento más pequeños que el original, sin pérdida de calidad visible en la mayoría de las fotografías
PNG
- El formato para imágenes que necesitan fondo transparente, como logotipos, iconos y gráficos con áreas de color plano
- Usa compresión sin pérdida, es decir, no se elimina ningún dato y la imagen se conserva exactamente
- Los archivos PNG son bastante más grandes que los JPEG en el caso de las fotografías. Usa PNG solo cuando necesites transparencia; usa JPEG o WebP para las fotos
WebP
- Un formato moderno desarrollado para sustituir tanto a JPEG como a PNG, con mejor compresión a igual calidad
- Las imágenes WebP suelen ser entre un 25 y un 35 por ciento más pequeñas que los archivos JPEG equivalentes
- Admite compresión con y sin pérdida, y admite transparencia
- Lo admiten todos los navegadores principales. Si tu creador de webs no convierte las imágenes a WebP de forma automática, conviértelas manualmente antes de subirlas
AVIF
- Un formato más reciente que ofrece mejor compresión que WebP, a menudo un 50 por ciento más pequeño que JPEG con calidad comparable
- La compatibilidad de los navegadores crece, pero aún no es universal. Usa AVIF donde se admita, con un formato alternativo automático WebP o JPEG para los navegadores que no lo admitan
¿Qué es la compresión de imágenes y cómo funciona?
La compresión reduce el tamaño del archivo eliminando o simplificando datos de la imagen. Hay dos tipos, y la diferencia determina cuándo usar cada uno.
Compresión con pérdida
- Elimina de forma permanente parte de los datos de la imagen para conseguir un archivo más pequeño
- Los datos eliminados se eligen según lo que el ojo humano tiene menos probabilidad de notar, normalmente variaciones sutiles de color y detalles finos de textura
- Se usa en JPEG y en WebP con pérdida
- Un ajuste de calidad de 75 a 85 produce archivos mucho más pequeños con imágenes que parecen idénticas al original sin comprimir en la mayoría de los usos prácticos
- Evita volver a guardar un JPEG ya comprimido con un ajuste de calidad más bajo. Esto acumula artefactos de compresión y degrada más la imagen con cada guardado
Compresión sin pérdida
- Reduce el tamaño del archivo sin eliminar ningún dato de la imagen. Cada píxel se conserva exactamente
- Se usa en PNG y en WebP sin pérdida
- Ahorra menos tamaño de archivo que la compresión con pérdida, pero sin ninguna pérdida de calidad
- Es la más adecuada para diagramas de producto, capturas de pantalla, gráficos con mucho texto o cualquier imagen donde los artefactos de compresión se notarían o no serían aceptables
¿Necesitas cambiar el tamaño de las imágenes antes de subirlas?
El tamaño de archivo y las dimensiones en píxeles son dos asuntos distintos, y ambos afectan a la velocidad de carga. Comprimir una imagen de 4.000 píxeles de ancho no sirve de nada si el navegador solo necesita mostrarla a 800 píxeles de ancho. El navegador descarga la imagen completa de 4.000 píxeles y la reduce en la ventana, malgastando ancho de banda y ralentizando la página para cada visitante.
Cómo ajustar bien el tamaño de las imágenes antes de subirlas
- Identifica el ancho máximo al que se mostrará la imagen. En imágenes de ancho completo en ordenador, suele ser de 1.440 a 1.920 píxeles
- Para imágenes en columnas o tarjetas, el ancho mostrado es menor, a menudo de 400 a 800 píxeles
- Cambia el tamaño de la imagen a su tamaño máximo de visualización antes de subirla
- Para pantallas retina y de alta densidad, multiplica el ancho de visualización por 1,5 o 2. Una imagen de tarjeta de 400 píxeles de ancho se beneficia de un archivo de origen de 600 a 800 píxeles de ancho para verse nítida en pantallas retina
¿Qué es el lazy loading y cómo afecta a la optimización de imágenes?
El lazy loading retrasa la descarga de las imágenes que todavía no se ven en la ventana. En lugar de cargar todas las imágenes de la página a la vez, el navegador solo carga las imágenes cuando los visitantes se desplazan cerca de ellas. En páginas con muchas imágenes, esto reduce de forma notable el peso inicial de la página y mejora el Time to Interactive del contenido visible sin desplazarse.
- El lazy loading se admite de forma nativa en todos los navegadores principales mediante el atributo
loading="lazy"en las etiquetas de imagen - No apliques lazy loading a las imágenes de la parte superior de la página. La imagen principal y cualquier contenido visible sin desplazarse deben cargarse de inmediato
- Aplica lazy loading a todas las imágenes de más abajo, incluidas las galerías de producto, las miniaturas del blog y las secciones con muchas imágenes más abajo en la página
Para ver con detalle cómo funciona el lazy loading y cuándo usarlo, consulta el artículo sobre qué es el lazy loading y cómo funciona.
¿Qué son las imágenes adaptables y por qué importan?
Una imagen adaptable es la que sirve un tamaño de archivo distinto según el tamaño de pantalla del visitante. En lugar de enviar una imagen de 1.920 píxeles a todos los dispositivos, incluido un visitante con una pantalla móvil de 375 píxeles de ancho, las imágenes adaptables permiten que el navegador pida solo lo que necesita.
Cómo reducen las imágenes adaptables el tiempo de carga en el móvil
- Un visitante móvil recibe una versión de 400 píxeles de la imagen en lugar del archivo completo de ordenador, lo que reduce mucho el tamaño de descarga
- Las imágenes adaptables usan el atributo
srcsetpara definir varios archivos de origen con distintos anchos, de modo que el navegador pueda elegir el adecuado - Los creadores de webs que lo gestionan de forma automática te ahorran generar manualmente varios tamaños de imagen
- Las imágenes adaptables mejoran directamente los Core Web Vitals en el móvil, donde la optimización de imágenes tiene el mayor efecto en el LCP
Para ver qué son los Core Web Vitals y cómo se puntúa el LCP, consulta el artículo sobre qué son los Core Web Vitals.
¿Cómo se optimizan las imágenes paso a paso?
Antes de subirlas
- Cambia el tamaño de la imagen a las dimensiones de visualización correctas
- Elige el formato adecuado: WebP para fotografías y gráficos en general, PNG solo cuando necesites transparencia
- Comprime con un ajuste de calidad de 75 a 85 en los formatos con pérdida
- Comprueba el tamaño de archivo. Una imagen web típica debería pesar menos de 200 KB. Las imágenes principales en ordenador pueden llegar a 400 KB; lo que supere eso conviene revisarlo antes de subirlo
Después de subirlas
- Añade un texto alternativo descriptivo a cada imagen. Es importante para la accesibilidad y contribuye a la visibilidad en buscadores. Para ver una guía completa, consulta el artículo sobre cómo usar imágenes en tu web
- Aplica lazy loading a todas las imágenes que quedan más abajo
- Haz una prueba de velocidad de la página después de añadir imágenes nuevas. Una sola imagen sin optimizar puede deshacer todas las demás mejoras de velocidad de la página
De forma continua
- Revisa las imágenes nuevas antes de cada subida. Las imágenes sin optimizar se cuelan con facilidad cuando se trabaja deprisa
- Haz una prueba de velocidad después de publicar cualquier lote importante de imágenes nuevas
- Revisa las imágenes antiguas si la web es anterior a las prácticas actuales de optimización. Las bibliotecas de imágenes antiguas son una fuente común y pasada por alto de problemas de velocidad
Para ver una guía sobre cómo probar el rendimiento de toda tu web, consulta el artículo sobre cómo probar la velocidad de tu web.
Cómo gestiona WEMASY la optimización de imágenes
El creador de webs de WEMASY comprime y convierte las imágenes de forma automática al subirlas. Las imágenes se sirven en formato WebP cuando el navegador lo admite, con formatos alternativos para dispositivos más antiguos. Se generan varios tamaños al subir, de modo que los visitantes móviles reciben archivos del tamaño adecuado sin ninguna configuración manual.
El lazy loading se aplica por defecto a las imágenes inferiores en todas las páginas creadas con WEMASY. El texto alternativo se puede añadir en el editor de imágenes de la plataforma. Las puntuaciones de velocidad de página, incluido el LCP, son visibles en el panel de analítica de WEMASY, con los problemas relacionados con las imágenes señalados por página junto a recomendaciones concretas.
Descubre qué incluye en el creador de webs de WEMASY, o consulta las opciones de plan en la página de precios.
Preguntas frecuentes
¿Qué es la optimización de imágenes para la web?
La optimización de imágenes para la web es el proceso de reducir el tamaño de archivo de una imagen manteniendo una calidad visual aceptable para la pantalla. Implica elegir el formato adecuado, comprimir la imagen a un nivel de calidad apropiado, cambiar el tamaño a las dimensiones reales de visualización y aplicar técnicas como el lazy loading y las imágenes adaptables, para que los visitantes solo descarguen la versión del archivo que necesitan su dispositivo y su conexión. Con el creador de webs de WEMASY puedes montarlo directamente en tu web.
¿Cuál es el mejor formato de imagen para una web?
WebP es el mejor formato para la mayoría de las imágenes web. Ofrece una compresión bastante mejor que JPEG con calidad visual comparable, admite transparencia como PNG y lo admiten todos los navegadores principales. Para imágenes que requieren fondo transparente y precisión al píxel, PNG es la opción adecuada. AVIF ofrece una compresión aún mejor que WebP, pero tiene una compatibilidad de navegadores más limitada y funciona mejor con un formato alternativo automático.
¿Cuánto puede reducir la compresión de imágenes el tamaño de archivo?
La compresión con pérdida con un ajuste de calidad de 75 a 85 suele reducir el tamaño de un archivo JPEG entre un 60 y un 80 por ciento, sin diferencia de calidad visible en la mayoría de las fotografías. Convertir de JPEG a WebP con el mismo nivel de calidad reduce el tamaño del archivo entre un 25 y un 35 por ciento más. Una foto que empieza en 4 MB a menudo puede reducirse a menos de 150 KB combinando un cambio de tamaño correcto, la conversión de formato y los ajustes de compresión.
¿Afecta la optimización de imágenes al SEO?
Sí. Las imágenes sin optimizar son una de las causas más comunes de una mala puntuación de Largest Contentful Paint, que es un Core Web Vital que los buscadores usan como señal de posicionamiento. Las páginas con imágenes grandes sin comprimir suelen puntuar mal en LCP en comparación con páginas que tienen el mismo contenido en forma optimizada. Además, el texto alternativo descriptivo de las imágenes contribuye a la visibilidad en la búsqueda de imágenes y a la accesibilidad general de la página.
¿Se debe usar lazy loading en todas las imágenes?
No. El lazy loading debe aplicarse solo a las imágenes que aparecen más abajo, es decir, el contenido que no se ve cuando la página se abre por primera vez. Las imágenes de la parte superior, incluida la imagen principal o cualquier elemento visual destacado cerca del principio de la página, deben cargarse de inmediato. Aplicar lazy loading a las imágenes de la parte superior retrasa el LCP, lo que empeora las puntuaciones de Core Web Vitals y la experiencia de los visitantes.
¿Qué tamaño deben tener las imágenes de una web?
Una imagen web típica debería pesar menos de 200 KB. Las imágenes principales y las de ancho completo en ordenador pueden llegar a 400 KB sin un efecto notable en el tiempo de carga, siempre que estén en formato WebP y bien comprimidas. Las imágenes usadas en tarjetas, miniaturas y contenedores más pequeños deben ajustarse a su ancho real de visualización. Servir una imagen de 1.920 píxeles en un contenedor de 400 píxeles malgasta ancho de banda para cada visitante en cada dispositivo.