Cómo preparar imágenes para que tu web cargue rápido

Cuando una web carga lenta, la reacción habitual es sospechar del hosting, del código o de algún plugin pesado — y a veces el problema está ahí. Pero en la inmensa mayoría de casos reales, el principal responsable son las imágenes: unas pocas fotos sin optimizar pueden pesar más que todo el resto de la página junta. Antes de cambiar de servidor o tocar código, merece la pena revisar esta checklist.

Por qué las imágenes son casi siempre el cuello de botella

El HTML, el CSS y el JavaScript de una página normal pesan, en conjunto, unos pocos cientos de kilobytes en la mayoría de webs. Las imágenes, en cambio, fácilmente superan varios megabytes si no se han optimizado — una sola foto de héroe sin comprimir puede pesar más que todo el resto de la página. Es la razón por la que optimizar imágenes suele dar la mejora de velocidad más grande por el esfuerzo más pequeño, comparado con optimizaciones de código que exigen mucho más trabajo para un ahorro menor.

La checklist, en orden de impacto

1) Formato correcto. WebP o AVIF en vez de JPG o PNG por defecto — a calidad visual equivalente, suelen pesar bastante menos. Lo cubrimos con detalle en laguía de formatos.

2) Tamaño en píxeles ajustado al hueco real. Si la imagen se muestra a 800 píxeles de ancho, no tiene sentido servir un archivo de 4000 píxeles — el navegador tiene que descargar y procesar todo ese exceso de datos solo para reducirlo visualmente después.

3) Compresión en el punto justo. Ni sin comprimir (peso innecesario) ni sobrecomprimida (artefactos visibles) — el rango de calidad que da el mejor equilibrio, que tratamos en el artículo sobre cómo reducir el peso de un JPG sin perder calidad.

4) Carga diferida (lazy loading). El atributo nativo loading="lazy" del propio HTML evita que el navegador cargue imágenes que el usuario nunca llega a ver — sin necesidad de ninguna librería externa, solo añadiendo ese atributo a las imágenes que están fuera de la pantalla inicial.

5) Dimensiones declaradas en el HTML. Indicar width y heighten la etiqueta de la imagen permite al navegador reservar el espacio exacto antes de que la imagen termine de cargar, evitando que el resto del contenido "salte" — un factor que Google mide específicamente como CLS (Cumulative Layout Shift), otra de las métricas de Core Web Vitals.

Cómo aplicar todo esto de una vez

Los puntos 1, 2 y 3 se resuelven en un solo paso conel compresor de SMALLIMG: subes el lote de imágenes de la web, eliges formato de salida, ancho máximo y calidad, y descargas todo listo para subir. Los puntos 4 y 5 son cambios que se hacen directamente en el HTML o la plantilla de tu web — la mayoría de gestores de contenido modernos (WordPress incluido, desde la versión 5.5) ya activan la carga diferida por defecto, así que a veces solo hace falta comprobar que no esté desactivada.