Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:20

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Curso de Optimización Web

Clase 16 de 38

Clase 16 / 38

Recursos

Elegir la resolución correcta de una imagen puede significar una diferencia enorme en el rendimiento de un sitio web. Cuando una API ofrece múltiples tamaños, aprovechar esa ventaja es una de las formas más seguras y efectivas de reducir el peso de una página sin alterar su apariencia ni su funcionamiento.

¿Cómo analizar la respuesta JSON de una API de imágenes?

Al consumir datos de una API, la respuesta suele llegar en formato JSON. Para inspeccionarla de manera clara, se puede copiar todo el contenido y pegarlo en VS Code [0:08]. Una vez ahí, se indica que el lenguaje es JSON y se formatea automáticamente para facilitar la lectura.

Dentro de esa respuesta, cada elemento representa un item que se renderiza en el proyecto, en este caso como un carousel item. Los atributos de cada objeto incluyen:

Títulos e información descriptiva del contenido.
Un objeto de imágenes con múltiples resoluciones disponibles [0:42].

Esta característica depende de cada API. Algunas ofrecen varios tamaños (large, medium, small), mientras que otras solo entregan una única resolución, lo que limita las opciones de optimización.

¿Por qué cambiar de large a medium mejora el rendimiento?

En el proyecto de ejemplo, el componente carousel item utiliza la imagen con el atributo large [1:10]. Sin embargo, esa imagen tiene un tamaño de 500 × 750 píxeles, mucho mayor que el contenedor donde se muestra, que solo ocupa aproximadamente 200 × 250 píxeles [1:30].

Cargar una imagen más grande de lo necesario significa transferir kilobytes innecesarios al navegador del usuario. La solución es sencilla: usar una resolución más conservadora como medium [1:48].

¿Cómo se aplica el cambio en el código?

En el archivo index.js, en la línea donde se define la image URL, basta con cambiar el valor del atributo de large a medium [2:02]:

Se modifica la propiedad que extrae la URL de la respuesta JSON.
Se guarda el archivo y se recarga el proyecto.
El resultado visual es prácticamente idéntico, pero con un peso significativamente menor por imagen.

Este tipo de optimización es muy seguro. A menos que se elija una resolución demasiado baja, no debería haber ningún cambio visible ni afectar el comportamiento de la página [2:18].

¿Qué es WebP y por qué no se usa todavía de forma generalizada?

Existe un formato llamado WebP, desarrollado por Google, que está diseñado para ser más eficiente que los formatos estándar como JPEG o PNG [2:36]. Su compresión es superior, lo que se traduce en archivos más ligeros con calidad comparable.

Sin embargo, hay una razón práctica para no adoptarlo de inmediato:

El soporte en navegadores no es universal al día de hoy [2:48].
Para cubrir navegadores que no lo soportan, sería necesario incluir polyfills.
Esos polyfills agregan peso adicional y generan requests HTTP extra, lo que contradice el objetivo de optimización.

A pesar de esto, se espera que WebP gane mucha más adopción entre los navegadores en el futuro, por lo que vale la pena mantenerlo en el radar [3:02].

Optimizar imágenes es uno de los pasos con mayor impacto y menor riesgo en la mejora del rendimiento web. Si trabajas con una API que ofrece distintas resoluciones, comparte cuál estrategia te ha dado mejores resultados en tus proyectos.