DEV Community: João Paulo Ávila

Image Optimization and Lazy Loading

João Paulo Ávila — Mon, 17 Jun 2024 13:03:18 +0000

In the era of modern frontends, we often raise the question, "How do I make my application more performant?" In this article, I will discuss image optimization and lazy loading to help improve performance and make our application increasingly faster.

Images are always a problem in the life of frontenders.

Very large and heavy images can hinder our application in various aspects, from super slow loading when you have a not-so-fast internet connection, especially when on 3G or 4G, to the initial bootstrap on a desktop, failing to provide elegant feedback to the user. There are many other issues we encounter along the way as well, hehe.

Here, I present some good practice ideas to assist in application development and perhaps provide some tips for those facing this issue. We will use the NgOptimizedImage directive, which helps improve image loading speed.

We will create the project using the Angular CLI. I will assume you already know what we are talking about and import the NgOptimizedImage directive in the AppModule file. Remember that this directive is available from version 14.2.0 onwards.

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

@NgModule({
  imports: [
    NgOptimizedImage
  ]
})
export class AppModule { }

// If you are using standalone, it can be done as below.

@Component({
  standalone: true,
  imports: [NgOptimizedImage],
})
class StandaloneComponent {}

Change the src property to ngSrc in your HTML template and it will also be necessary to set a width and height.

<img
  ngSrc="../assets/img/image.jpeg"
  width="4000"
  height="3000"
/>

For responsive images, provide various sizes so the browser can choose the best one to render, thus avoiding performance loss.

<img
  ngSrc="../assets/img/image.jpeg"
  width="4000"
  height="3000"
  ngSrcset="200w, 400w, 600w, 800w, 1000w, 1200w, 1600w, 2000w, 3000w"
/>

The Angular NgOptimizedImage directive already loads images by default with lazy loading, but non-visible images should also be loaded this way.

For example, images in a carousel or those lower down the page do not need to be "loaded" when the page is first called. For this, we use another attribute to assist, which is priority.

<img
  ngSrc="../assets/img/image.jpeg"
  width="4000"
  height="3000"
  ngSrcset="200w, 400w, 600w, 800w, 1000w, 1200w, 1600w, 2000w, 3000w"
  priority
/>

With this, all images shown on the page to the user will be marked with priority and will load first. If you have a CDN, from this version of Angular onwards, you can add the provider provideImageKitLoader, making it easier to import images.

import { NgOptimizedImage, provideImageKitLoader } from '@angular/common';

@NgModule({
  imports: [
    NgOptimizedImage
  ],
  providers: [
    provideImageKitLoader("cdn_url")
  ],
})
export class AppModule { }

By doing this, you only need to use the image name in the src, without always typing the full image path, as it will already be called in the provider.

<img
  ngSrc="image.jpeg"
  width="4000"
  height="3000"
  ngSrcset="200w, 400w, 600w, 800w, 1000w, 1200w, 1600w, 2000w, 3000w"
  priority
/>

Below are some data showing the differences between using lazy loading and not.

Without Lazy Loading

With Lazy Loading

These were some tips on how we can use image lazy loading to our advantage, bringing faster loading speeds to our pages and providing good usability for the user.

twitter @joaopaulo_avila

Otimização de imagem e lazy loading

João Paulo Ávila — Fri, 24 Feb 2023 22:30:00 +0000

Nos tempos de frontends modernos, sempre levantamos a questão de… "Como faço para tornar minha aplicação mais performática?” Neste artigo irei falar sobre otimização de imagem e lazy loading para auxiliar nesse processo de performance e ter nossa aplicação cada vez mais rápida.

As imagens sempre são um problema na vida dos frontenders.

Imagem muito grande e pesada pode atrapalhar em vários aspectos nossa aplicação, desde a um carregamento super lento quando se tem uma internet não tão rápida, principalmente quando se está em um 3g ou 4g, como também em um desktop para primeiro bootstrap da aplicação, não dando um feedback para o usuário de forma elegante. Além de vários outros problemas também que as vezes encontramos por esse caminho hehe.

Trago aqui alguma ideia de boa prática e poder auxiliar no desenvolvimento das aplicações e quem sabe dar alguma dica para as pessoas que estão passando por esse problema. Vamos utilizar a diretiva NgOptimizedImage que ajuda a melhorar a velocidade de carregamento de imagens.

Vamos criar o projeto usando a CLI do angular. Vou considerar que você já sabe do que estamos falando e importe a diretiva NgOptimizedImage no arquivo do AppModule. Lembrando que essa diretiva está disponível a partir da versão 14.2.0.

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

@NgModule({
  imports: [
    NgOptimizedImage
  ]
})
export class AppModule { }

// Caso voce esteja usando standalone pode ser feito da forma a baixo.

@Component({
  standalone: true
  imports: [NgOptimizedImage],
})
class StandaloneComponent {}

Troque a propriedade src para ngSrc no seu template html e também será necessário colocar um width e um height.

<img
  ngSrc="../assets/img/image.jpeg"
  width="4000"
  height="3000"
/>

Para imagens responsivas passe diversos tamanhos, assim o browser escolherá a melhor para renderizar e assim você não irá perder performance.

<img
  ngSrc="../assets/img/image.jpeg"
  width="4000"
  height="3000"
  ngSrcset="200w, 400w, 600w, 800w, 1000w, 1200w, 1600w, 2000w, 3000w"
/>

A diretiva NgOptimizedImage do angular, já carrega as imagens por default em lazy loading, porém as imagens não visíveis também devem ser carregadas dessa forma.

Por exemplo, imagens de um carrosel ou que esteja mais a baixo da página, não precisa ser "carregada” quando a página é chamada, com isso, usamos um outro atributo para nos auxiliar, que é o priority.

<img
  ngSrc="../assets/img/image.jpeg"
  width="4000"
  height="3000"
  ngSrcset="200w, 400w, 600w, 800w, 1000w, 1200w, 1600w, 2000w, 3000w"
  priority
/>

Com ele, todas as imagens que são mostradas na página para o usuário serão marcadas com prioridade e irão ser carregadas primeiro. Caso voce tenha algum CDN, a partir dessa versão do angular, é possível adicionar o provider provideImageKitLoader, assim facilita a importação das imagens.

import { NgOptimizedImage, provideImageKitLoader } from '@angular/common';

@NgModule({
  imports: [
    NgOptimizedImage
  ],
  providers: [
    provideImageKitLoader("url_cdn")
  ],
})
export class AppModule { }

Fazendo isso basta usar só o nome da imagem no src assim, não precisa ficar digitando sempre o caminho da imagem, pois já estará sendo chamado no provider.

<img
  ngSrc="image.jpeg"
  width="4000"
  height="3000"
  ngSrcset="200w, 400w, 600w, 800w, 1000w, 1200w, 1600w, 2000w, 3000w"
  priority
/>

Alguns dados a baixo com as diferenças de usar com e sem lazy loading.

Sem Lazy Loading

Com lazy Loading

Estas foram algumas dicas de como podemos utilizar o lazy loading de imagem ao nosso favor, trazendo mais velocidade de carregamento em nossas páginas e dando uma boa usabilidade para o usuário.

twitter @joaopaulo_avila

Criando eventBinding com exportAs

João Paulo Ávila — Thu, 20 Jan 2022 22:37:48 +0000

Estava criando um componente angular e pensei "Será que é possível pegar um método ou retorno de função sem precisar emitir um evento em si?".

Foi onde achei uma propriedade do angular que é o exportAs.

O exportAs basicamente exporta seu componente com todas as variáveis e métodos públicos.

Começando com o básico vamos criar um projeto Angular simples rodando o comando

ng new nameProject

Para este caso vou escolher as opções básicas do CLI.

para rodar o projeto execute o comando

ng serve

E ele irá rodar na porta https://localhost:4200

Feito isso, vamos criar nosso componente onde vamos exportar ele para o "pai".

Para criar um novo componente você pode criar na "mão" ou rodar o comando ng g c nameComponent ou ng generate component nameComponent ambos criam um novo component.

Quando inicia um novo componente vamos criar um método qualquer aqui que retorno uma informação. Vamos fazer o exemplo do Output primeiro para demonstrar a diferença de ambos.

O app.component.html ficaria dessa forma

<div class="content">
  <div style="display: flex">
    <app-user #exportUser="user"></app-user>

    <button (click)="exportUser.hideUser()">Hide User</button>
  </div>

  <div *ngIf="exportUser.user">
    <p>User:</p>
    <p>{{ exportUser.user.name }}</p>
    <p>{{ exportUser.user.age }}</p>
  </div>
</div>

No exemplo acima, estou importando o component app-user no html e criando uma variável nele chamada exportUser , o nome desta variável você quem escolhe e não precisa ter o nome “export” nela, usei apenas como exemplo.

Feito isso eu posso pegar os valores de variáveis e métodos publicos dentro do meu componente e poder fazer todas as interações com ele.

O user.component.ts fica dessa forma

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

interface User {
  name: string;
  age: number;
}

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss'],
  exportAs: 'user',
})
export class UserComponent {
  user: User | undefined;

  clickedButton = '';

  showTextClickedButton = false;

  showUser() {
    this.user = {
      name: 'Joao',
      age: 18,
    };
  }

  hideUser() {
    this.user = undefined;
  }
}

O “Pulo do Gato” está em colocar o exportAs no decorator, exportAs: 'user' , o nome da variável que utilizei para atribuir ao exportAs é a qual voce vai usar dentro do app.component.html então o nome delas precisam ser iguais. Você também pode escolher o nome da variável que achar mais viável para o seu component.

Essa é uma forma que podemos trabalhar com eventos, além do Output e pegar o retorno de alguma variável específica, podendo facilitar assim para algo que precise.