Blog

Buenas! Hoy me dispongo a mostrar el como optimizar imágenes en Angular de una forma sencilla y fácil para el usuario. Para esto haremos uso de la directiva NgOptimizedImage que nos ofrece la posibilidad de optimizar las imágenes que subamos a nuestra página web. Para ello, los pasos que seguiremos serán los siguientes:

1. En el componente importamos el componente.
2. Tras ello, lo colocamos en los imports del componente.
3. Aparte de esto, debemos ir al template html del componente y en este reemplazar el atributo src de la imagen por ngSrc.
4. Opcional: Hay la posibilidad de componer la ruta de las imagenes a partir de una ruta, pero eso es tema para otro POST. Espero que os haya gustado el contenido. Aquí tenéis un ejemplo de la implementación:

optimizing-images.component.html

<p>optimizing-images works!</p>
<li>
  <img ngSrc="assets/favicon.ico" alt="Angular logo" width="32" height="32" />
  <img
    ngSrc="cafeteria-barcelona.jpeg"
    alt="Cafeteria en Barcelona"
    width="320"
    height="320"
  />
</li>

optimizing-images.component.ts

import { Component } from '@angular/core';
import { NgOptimizedImage } from '@angular/common';

@Component({
  selector: 'app-optimizing-images',
  imports: [NgOptimizedImage],
  templateUrl: './optimizing-images.component.html',
  styleUrl: './optimizing-images.component.scss'
})
export class OptimizingImagesComponent {

}