Cómo optimizar imágenes para páginas web

En este blog, al hablar de diseño de páginas web, hemos comentado muchas veces la importancia de optimizar las imágenes a la hora de utilizarlas en la web. Hoy vamos a hablar sobre lo que significa exactamente lo de optimizar imágenes para web, formato, tamaño, peso…

Pasos para optimizar imágenes para web

1. Elige el formato adecuado para tus imágenes

Hasta hace no mucho tiempo se utilizaban generalmente 2 tipos de formatos:

• JPEG/JPG: ideal para fotografías o imágenes. Ofrece una excelente compresión.
• PNG: obligatorio si necesitas fondos transparentes, sobre todo en logos o iconos.

Pero hoy en día hay dos que están cogiendo mucha fuerza:

• AVIF: proporciona una compresión superior, generando archivos entre un 20% y 50% más ligeros que WebP. Al ser el más moderno de todos y aunque su compatibilidad en navegadores de escritorio y móviles está creciendo enormemente, hoy en día, todavía no es del todo compatible en versiones de software más antiguas.
• WebP: aunque no alcanza el nivel de optimización extrema de AVIF, ofrece archivos hasta un 30% más pequeños que los formatos JPEG tradicionales. Además es prácticamente compatible con todos los navegadores modernos, incluyendo Safari, Chrome, Edge y Firefox.

2. Ajusta el tamaño y la resolución de las imágenes

Las imágenes que sacas con tu cámara (reflex o móvil) tanto las que bajas de un banco de imágenes suelen tener resoluciones muy grandes (p.ej. 4000 x 3000 pixeles). Una imagen de fondo para una pantalla de sobremesa o portátil puede medir hasta 1920 x 1080 así que redimensiona las imágenes que quieras utilizar al tamaño que necesites realmente.

• Tamaño exacto: redimensiona la imagen al tamaño máximo que se mostrará en la web (al ser una web responsive, la plantilla se encargará de redimensionarla luego para tamaños más pequeños).
• Resolución: después de modificar la imagen con los cambios que necesites (dimensión, retoques…) y vayas a guardarlo, configura la resolución a 72 dpi (píxeles por pulgada), el estándar óptimo para pantallas.

3. Comprimir la imagen o archivo

El objetivo de optimizar una imagen es que no pase de los 200 kb (a ser posible de 150kb). Para ello existen herramientas que podrás utilizar que eliminan datos innecesarios del archivo y así aligeran su peso.

• Herramientas online de compresión de imágenes: plataformas como iLoveIMG o TinyPNG son bastante eficaces a la hora de comprimir (aligerar el peso) de las imágenes sin perder calidad. Para ello simplemente accede a su web, arrastra la imagen, comprime y descarga el archivo ya optimizado. En la misma plataforma te indicarán si ha sido posible comprimir la imagen o no, y en caso afirmativo qué porcentaje de compresión se ha realizado.
• Plugins gratuitos para WordPress: puedes probar a instalar plugins como Smush o ShortPixel, estos plugins comprimen las imágenes automáticamente al subirlas a la web.

Y no podemos terminar este post sobre optimización de imágenes sin comentar la importancia que tiene también el SEO en las imágenes.

Cuando ya tengas optimizada la imagen para subirla a tu web recuerda seguir estos pasos:

1. Nombra correctamente la imagen o archivo: no subas la imagen con un nombre genérico (p. ej. img_1238.jpg o WhatsApp Image 2026-06-05 at 15.37.11.jpeg). Renombra la imagen con palabras descriptivas separadas por guiones (p. ej. zapatillas-nike-vomero.jpg).
2. Añade un texto alternativo a la imagen: después de subir la imagen a tu web, accede al archivo y en el modo de edición, añade texto en el atributo alt describiendo brevemente la imagen de forma que los motores de búsqueda sepan de qué trata la imagen y mejorar de esta forma su indexación y accesibilidad.

Conclusión

Ya conoces los pasos a seguir a la hora de optimizar las imágenes para subirlas a tu web, esperamos que te hayan sido de utilidad. Es un proceso que consume tiempo pero es importante para optimizar la velocidad de carga web. Y cómo siempre si tienes alguna pregunta sobre este tema o alguno relacionado con el diseño de páginas web no dudes en contactar con nosotros.