Lazy loading de imágenes con ngSrc en Angular

Contenido del curso

Configuración Inicial

Gestión de Entornos

Nuevas Funcionalidades en Angular

Server-Side Rendering (SSR) y Navegación

Optimización de Rendimiento

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0017:08

Lazy loading de imágenes con ngSrc en Angular

Curso de Angular Avanzado

Clase 8 de 36

Clase 8 / 36

Recursos

Optimizar imágenes en Angular es uno de los pasos más rentables para mejorar el rendimiento de tu sitio web. La directiva NgOptimizeImage y su atributo ngSrc te permiten reducir tiempos de carga, evitar saltos visuales molestos y aplicar lazy loading sin escribir lógica adicional. Esta guía te muestra cómo implementarla paso a paso en un store real.

¿Qué son los Web Vitals y por qué importan al optimizar imágenes?

Los Web Vitals son tres métricas que miden la experiencia real de un usuario en tu sitio: el loading (qué tan rápido carga la página), el INP (la interactividad) y el CLS o Cumulative Layout Shift (la estabilidad visual). Al usar ngSrc impactas directamente dos de estas métricas: el rendimiento de carga y el CLS [01:00].

El CLS es esa molestia que sientes cuando intentas hacer clic en un botón y, de repente, un banner se carga arriba y te empuja todo el contenido. Terminas dándole yes cuando querías no. Eso es justamente lo que la estabilidad visual busca evitar.

¿Qué hace la directiva NgOptimizeImage en Angular? Reemplaza el src tradicional de la etiqueta <img> por ngSrc, aplicando optimizaciones automáticas de carga y reservando espacio para evitar saltos visuales mientras la imagen se descarga.

¿Cómo implementar ngSrc en un componente Angular?

El primer paso es importar la directiva desde @angular/common. Una vez importada, basta con cambiar src por ngSrc en tu etiqueta <img>. En el ejemplo, se aplica tanto en el componente products-detail como en el carrusel de imágenes [03:30].

html <img ngSrc="ruta/imagen.jpg" width="80" height="80" />

Al hacerlo notarás que las imágenes dejan de cargar si no cumples las restricciones que la directiva exige. Y aquí viene lo interesante: esas restricciones son las que garantizan la optimización.

¿Por qué necesito definir width y height?

Para mantener estabilidad visual, Angular necesita conocer las dimensiones del espacio que la imagen ocupará. Así reserva el cuadro y lo rellena cuando la imagen termine de descargarse, sin mover el resto del layout.

En el carrusel del store funcionó bien con width="80" y height="80". El problema aparece con imágenes responsive, como un cover, donde no puedes fijar dimensiones absolutas porque cambian entre mobile y desktop.

¿Cómo usar fill para imágenes responsive?

Cuando no puedes definir un ancho y alto fijos, la solución es el atributo fill. Le dices a Angular que la imagen debe rellenar a su contenedor padre más cercano que tenga la propiedad CSS position: relative [07:45].

html

Si solo activas fill sin un padre relativo, la imagen se irá hasta el body y ocupará toda la pantalla. Por eso necesitas tres elementos trabajando juntos:

Un contenedor padre con position: relative (o la clase relative en Tailwind).
Un alto fijo en ese contenedor, por ejemplo h-80 o h-96.
El atributo fill en la etiqueta <img> con ngSrc.

¿Por qué fill busca un padre relative? Porque internamente la imagen se posiciona de forma absoluta dentro de ese contenedor. Sin un ancestro relative, se escapa hasta el body. Por eso siempre debes envolverla en un div con esa propiedad.

El ancho lo hereda dinámicamente del padre, lo que te da responsive sin esfuerzo. Solo necesitas controlar la altura para evitar que la imagen se estire o pierda su aspect ratio.

¿Cómo activar lazy loading para mejorar el performance?

El lazy loading es la carga dinámica de imágenes a medida que el usuario hace scroll. ¿Para qué pedir una imagen del final de la página si quizás el usuario nunca llega ahí? Cada request evitado es rendimiento ganado.

Con NgOptimizeImage solo agregas un atributo:

html <img ngSrc="producto.jpg" fill loading="lazy" />

En el panel Network del navegador puedes verificar el efecto: al recargar la página, solo se descargan las imágenes visibles. A medida que haces scroll, Angular detecta la proximidad (aproximadamente 10 píxeles antes de entrar en pantalla) y dispara el request justo a tiempo [14:20].

¿Cuándo conviene combinar fill, dimensiones fijas y lazy?

La estrategia depende del tipo de imagen:

Imágenes de tamaño conocido (avatares, miniaturas, íconos): usa width y height fijos.
Imágenes responsive (covers, banners, hero images): usa fill con un padre relative y altura definida.
Imágenes fuera del viewport inicial (productos del feed, galerías largas): añade loading="lazy" para diferir su carga.

Un detalle práctico: al probar lazy loading, limpia el caché del navegador. Si las imágenes ya están cacheadas no verás el efecto y podrías pensar que la directiva no funciona.

¿Qué ganas al usar NgOptimizeImage en tu aplicación?

Obtienes dos mejoras concretas en tus Web Vitals: reduces el Cumulative Layout Shift porque cada imagen reserva su espacio antes de cargar, y mejoras el performance porque evitas requests innecesarios mediante lazy loading. Todo esto sin escribir lógica personalizada, solo configurando atributos.

En el store del ejemplo, el carrusel quedó estable, el cover responsive dejó de saltar y el listado de productos en el home ahora carga progresivamente según el scroll. ¿Ya probaste medir el antes y después en Lighthouse? Cuéntame en los comentarios qué métricas mejoraste tras aplicar ngSrc en tu proyecto.

Max Andy Diaz Neyra

Hace un año

A mi me salia un mensaje de error por falta de priority, asi que decidi aplicar la siguiente solucion:

 <div class="grid grid-cols-2 gap-8 w-full md:grid-cols-4">
    @for (product of products(); let i = $index; track product) {
      <app-product
        [product]="product"
        [isPriority]="i >= 0 && i < 5"
        (addToCart)="addToCart($event)" />
    }
  </div>

```Luego el siguiente codiog
```js
@Component({
  selector: 'app-product',
  imports: [CommonModule, TimeAgoPipe, RouterLinkWithHref, NgOptimizedImage],
  templateUrl: './product.component.html',
})
export class ProductComponent {
  @Input({ required: true }) product!: Product;
  @Input() isPriority?: boolean;

  @Output() addToCart = new EventEmitter();

  addToCartHandler() {
    this.addToCart.emit(this.product);
  }
}

Y finalmente:

<div class="group rounded-lg border">
  <a
    [routerLink]="['/product', product.id]"
    class="w-full overflow-hidden rounded-t-lg bg-gray-200">
    <div class="relative h-80">
      <img
        [ngSrc]="product.images[0]"
        [fill]="true"
        [alt]="product.title"
        [priority]="isPriority"
        class="h-full w-full object-cover object-center group-hover:opacity-75" />
    </div>
  </a>
  <div class="flex flex-col space-y-2 p-4">
    <h3 class="text-sm text-gray-700">{{ product.title }}</h4>
    <p class="text-lg font-medium text-gray-900">
      {{ product.price | currency: '$' : 'symbol' : '1.0' }}
    </p>
    <p class="text-sm font-medium text-gray-500">
      {{ product.creationAt | timeAgo }}
    </p>
    <button
      class="text-black bg-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 w-full"
      (click)="addToCartHandler()">
      Add to cart
    </button>
  </div>
</div>


```Espero les ayude.

Configuración Inicial

Curso Avanzado de Desarrollo con Angular para eCommerce

Clona y explora el proyecto base de Angular

Configuración de ESLint y Prettier en proyectos Angular

Prettier y ESLint sin conflictos en Angular

Gestión de Entornos

Manejo de environments en Angular

Ambiente de staging en Angular paso a paso

Nuevas Funcionalidades en Angular

Variables locales con @let en Angular

Lazy loading de imágenes con ngSrc en Angular

URLs amigables para SEO en Angular

"Reactividad en Angular: Migración a Input Signals"

Migración automática de @Input a signals en Angular

Migración de Outputs en Angular: De Decoradores a Funciones

linkedSignal en Angular: computed con set

Sincronización de Componentes en Angular con Model y Signals

toSignal: Observables de RxJS como Signals

Conversión de Observables a Signals en Angular con toSignal

Interoperabilidad de RXDS y Signals en Angular: Uso de RX Resourcers

Manejo de Parámetros Reactivos con RX Resource en Angular

Manejo de Promesas y Fetch en Angular sin RXJS

Reactividad en Angular: Uso de Signals para Consultas DOM

Configuración de Prettier para HTML en Angular

Server-Side Rendering (SSR) y Navegación

Migración al Application Builder de Angular

Server Side Rendering con Angular: Mejora Rendimiento y SEO

afterNextRender: código seguro solo en el browser

Geolocalización y APIs: Creando un Mapa de Tiendas Cercanas

Pre-rendering en Angular con ng build

Desplegando Angular SSR en Firebase

Optimización de Rendimiento

Generación de Meta Tags Dinámicos con Angular y Open Graph

Creación de MetaTags Dinámicos en Angular

Proceso de Hydration y Event Replay en Angular

Productos relacionados con RxResource en Angular

Carga diferida de componentes en Angular para mejorar rendimiento

Optimización de Incremental Hydration en Angular

Configuración de Server Routing en Angular

Aplicaciones Sin Zone.js: Migración a Signals en Angular

Cierre del curso avanzado de Angular

Lazy loading de imágenes con ngSrc en Angular