diff --git a/javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.css b/javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.css
index 396dbf6aa..479151edd 100644
--- a/javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.css
+++ b/javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.css
@@ -7,6 +7,7 @@ Copyright (c) 2023-present Kaleidos INC
 */
 
 img {
+  inline-size: auto;
   inset-block-start: var(--banner-height);
   max-block-size: calc(100vh - var(--banner-height));
   pointer-events: none;
diff --git a/javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.html b/javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.html
index 5d6296166..a67558427 100644
--- a/javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.html
+++ b/javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.html
@@ -7,12 +7,16 @@
 -->
 
 <img
-  src="/assets/images/signup/login-left.svg"
+  ngSrc="/assets/images/signup/login-left.svg"
   alt=""
+  width="385"
+  height="1080"
   class="left" />
 <img
-  src="/assets/images/signup/login-right.svg"
+  ngSrc="/assets/images/signup/login-right.svg"
   alt=""
+  width="485"
+  height="1081"
   class="right" />
 
 <ng-content></ng-content>
diff --git a/javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.ts b/javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.ts
index f7ea2270f..32eb712ea 100644
--- a/javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.ts
+++ b/javascript/apps/taiga/src/app/modules/auth/components/auth-forest/auth-forest.component.ts
@@ -6,7 +6,7 @@
  * Copyright (c) 2023-present Kaleidos INC
  */
 
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { Component } from '@angular/core';
 
 @Component({
@@ -14,6 +14,6 @@ import { Component } from '@angular/core';
   standalone: true,
   templateUrl: './auth-forest.component.html',
   styleUrls: ['./auth-forest.component.css'],
-  imports: [CommonModule],
+  imports: [CommonModule, NgOptimizedImage],
 })
 export class AuthForestComponent {}
diff --git a/javascript/apps/taiga/src/app/modules/auth/components/social-login-button/social-login-button.component.html b/javascript/apps/taiga/src/app/modules/auth/components/social-login-button/social-login-button.component.html
index 60d1a1eb9..deb02b66e 100644
--- a/javascript/apps/taiga/src/app/modules/auth/components/social-login-button/social-login-button.component.html
+++ b/javascript/apps/taiga/src/app/modules/auth/components/social-login-button/social-login-button.component.html
@@ -12,7 +12,9 @@
     <img
       class="social-logo"
       role="presentation"
-      [attr.src]="socialImage"
+      width="18"
+      height="18"
+      [ngSrc]="socialImage"
       alt="" />
     {{ socialText }}
   </a>
diff --git a/javascript/apps/taiga/src/app/modules/auth/components/social-login-button/social-login-button.component.ts b/javascript/apps/taiga/src/app/modules/auth/components/social-login-button/social-login-button.component.ts
index 38f77ad6a..c23f198c5 100644
--- a/javascript/apps/taiga/src/app/modules/auth/components/social-login-button/social-login-button.component.ts
+++ b/javascript/apps/taiga/src/app/modules/auth/components/social-login-button/social-login-button.component.ts
@@ -6,7 +6,7 @@
  * Copyright (c) 2023-present Kaleidos INC
  */
 
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import {
@@ -30,7 +30,7 @@ interface SocialParams {
   standalone: true,
   templateUrl: './social-login-button.component.html',
   styleUrls: ['./social-login-button.component.css'],
-  imports: [CommonModule, TranslocoModule],
+  imports: [CommonModule, TranslocoModule, NgOptimizedImage],
   providers: [
     {
       provide: TRANSLOCO_SCOPE,
diff --git a/javascript/apps/taiga/src/app/modules/auth/feature-login/auth-feature-login.component.html b/javascript/apps/taiga/src/app/modules/auth/feature-login/auth-feature-login.component.html
index 63d21b92f..0241721d8 100644
--- a/javascript/apps/taiga/src/app/modules/auth/feature-login/auth-feature-login.component.html
+++ b/javascript/apps/taiga/src/app/modules/auth/feature-login/auth-feature-login.component.html
@@ -14,7 +14,9 @@
         <img
           class="taiga-logo"
           role="presentation"
-          src="/assets/images/LogoTaiga.svg"
+          width="56"
+          height="56"
+          ngSrc="/assets/images/LogoTaiga.svg"
           alt="" />
         <h1 class="auth-title">{{ t('login.title') }}</h1>
         <tg-social-login *ngIf="displaySocialNetworks"></tg-social-login>
diff --git a/javascript/apps/taiga/src/app/modules/auth/feature-login/auth-feature-login.component.ts b/javascript/apps/taiga/src/app/modules/auth/feature-login/auth-feature-login.component.ts
index c350bd4c8..b4da7fad7 100644
--- a/javascript/apps/taiga/src/app/modules/auth/feature-login/auth-feature-login.component.ts
+++ b/javascript/apps/taiga/src/app/modules/auth/feature-login/auth-feature-login.component.ts
@@ -13,7 +13,7 @@ import { fadeIntOutAnimation } from '~/app/shared/utils/animations';
 import { AuthService } from '../services/auth.service';
 import { LoginComponent } from './components/login/login.component';
 import { SocialLoginComponent } from '../components/social-login/social-login.component';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { AuthForestComponent } from '../components/auth-forest/auth-forest.component';
 import { TranslocoDirective } from '@ngneat/transloco';
 import { TitleComponent } from '~/app/shared/title/title.component';
@@ -32,6 +32,7 @@ import { TitleComponent } from '~/app/shared/title/title.component';
     SocialLoginComponent,
     LoginComponent,
     RouterLink,
+    NgOptimizedImage,
   ],
 })
 export class AuthFeatureLoginComponent implements OnInit {
diff --git a/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/auth-feature-reset-password.component.html b/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/auth-feature-reset-password.component.html
index 7645213a0..c97a765ec 100644
--- a/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/auth-feature-reset-password.component.html
+++ b/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/auth-feature-reset-password.component.html
@@ -28,7 +28,9 @@
           <img
             class="taiga-logo"
             role="presentation"
-            src="/assets/images/LogoTaiga.svg"
+            width="56"
+            height="56"
+            ngSrc="/assets/images/LogoTaiga.svg"
             alt="" />
           <h1 class="auth-title">{{ t('reset_password.title') }}</h1>
           <p class="description">{{ t('reset_password.description') }}</p>
@@ -96,7 +98,9 @@ <h1 class="auth-title">{{ t('reset_password.title') }}</h1>
         data-test="verify-email-page">
         <img
           class="owl"
-          src="/assets/images/signup/verify-email-owl.svg"
+          ngSrc="/assets/images/signup/verify-email-owl.svg"
+          width="180"
+          height="146"
           alt="" />
         <h1 class="verify-title">{{ t('reset_password.confirm.title') }}</h1>
         <p class="verify-text">{{ t('reset_password.confirm.description') }}</p>
diff --git a/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/auth-feature-reset-password.component.ts b/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/auth-feature-reset-password.component.ts
index 552d3f7d5..3ab651dd3 100644
--- a/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/auth-feature-reset-password.component.ts
+++ b/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/auth-feature-reset-password.component.ts
@@ -22,7 +22,7 @@ import {
 } from '../data-access/+state/actions/auth.actions';
 import { selectShowResetPasswordConfirmation } from '../data-access/+state/selectors/auth.selectors';
 import { AuthForestComponent } from '../components/auth-forest/auth-forest.component';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 import { TranslocoDirective } from '@ngneat/transloco';
 import { InputsModule } from '@taiga/ui/inputs';
@@ -53,6 +53,7 @@ import { TitleComponent } from '~/app/shared/title/title.component';
     InternalLinkDirective,
     RouterLink,
     getUrlPipe,
+    NgOptimizedImage,
   ],
 })
 export class AuthFeatureResetPasswordComponent implements OnInit {
diff --git a/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/components/new-password.component.html b/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/components/new-password.component.html
index 63b6e5976..2d53efbd7 100644
--- a/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/components/new-password.component.html
+++ b/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/components/new-password.component.html
@@ -12,7 +12,9 @@
       <img
         class="taiga-logo"
         role="presentation"
-        src="/assets/images/LogoTaiga.svg"
+        width="56"
+        height="56"
+        ngSrc="/assets/images/LogoTaiga.svg"
         alt="" />
       <h1 class="auth-title">{{ t('reset_password.new_password.title') }}</h1>
 
diff --git a/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/components/new-password.component.ts b/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/components/new-password.component.ts
index 5c3ff3a0d..898b5cbb0 100644
--- a/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/components/new-password.component.ts
+++ b/javascript/apps/taiga/src/app/modules/auth/feature-reset-password/components/new-password.component.ts
@@ -22,7 +22,7 @@ import { PasswordStrengthComponent } from '@taiga/ui/inputs/password-strength/pa
 import { newPassword } from '~/app/modules/auth/data-access/+state/actions/auth.actions';
 import { TuiButtonModule } from '@taiga-ui/core';
 import { TranslocoDirective } from '@ngneat/transloco';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { InputsModule } from '@taiga/ui/inputs';
 import { ButtonLoadingDirective } from '~/app/shared/directives/button-loading/button-loading.directive';
 import { InternalLinkDirective } from '~/app/shared/directives/internal-link/internal-link.directive';
@@ -44,6 +44,7 @@ import { getUrlPipe } from '~/app/shared/pipes/get-url/get-url.pipe';
     InternalLinkDirective,
     RouterLink,
     getUrlPipe,
+    NgOptimizedImage,
   ],
 })
 export class NewPasswordComponent implements OnInit {
diff --git a/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/auth-feature-sign-up.component.html b/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/auth-feature-sign-up.component.html
index f8a6e5dbe..30d2896dd 100644
--- a/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/auth-feature-sign-up.component.html
+++ b/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/auth-feature-sign-up.component.html
@@ -35,7 +35,9 @@
         <img
           class="taiga-logo"
           role="presentation"
-          src="/assets/images/LogoTaiga.svg"
+          width="56"
+          height="56"
+          ngSrc="/assets/images/LogoTaiga.svg"
           alt="" />
         <h1 class="auth-title">{{ t('signup.title') }}</h1>
         <p class="auth-subtitle">{{ t('signup.subtitle') }}</p>
diff --git a/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/auth-feature-sign-up.component.ts b/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/auth-feature-sign-up.component.ts
index b50f66924..7bbdfbad5 100644
--- a/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/auth-feature-sign-up.component.ts
+++ b/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/auth-feature-sign-up.component.ts
@@ -23,7 +23,7 @@ import { AuthFeatureVerifyEmailComponent } from './components/verify-email/verif
 import { SignupComponent } from './components/signup/signup.component';
 import { TuiButtonModule } from '@taiga-ui/core';
 import { SocialLoginComponent } from '../components/social-login/social-login.component';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { TranslocoDirective } from '@ngneat/transloco';
 import { ContextNotificationComponent } from '@taiga/ui/context-notification/context-notification.component';
 import { InlineNotificationComponent } from '@taiga/ui/inline-notification';
@@ -55,6 +55,7 @@ import { TitleComponent } from '~/app/shared/title/title.component';
     InternalLinkDirective,
     AuthFeatureVerifyEmailComponent,
     getUrlPipe,
+    NgOptimizedImage,
   ],
 })
 export class AuthFeatureSignUpComponent implements OnInit {
diff --git a/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/components/verify-email/verify-email.component.html b/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/components/verify-email/verify-email.component.html
index 39917a868..1d32d0fc4 100644
--- a/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/components/verify-email/verify-email.component.html
+++ b/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/components/verify-email/verify-email.component.html
@@ -11,7 +11,9 @@
     data-test="verify-email-page">
     <img
       class="owl"
-      src="/assets/images/signup/verify-email-owl.svg"
+      ngSrc="/assets/images/signup/verify-email-owl.svg"
+      width="182"
+      height="148"
       alt="" />
     <h1 class="verify-title">{{ t('verify.title') }}</h1>
     <p class="verify-text">{{ t('verify.verification_link_sent') }}</p>
diff --git a/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/components/verify-email/verify-email.component.ts b/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/components/verify-email/verify-email.component.ts
index 67f8bf767..5bc1ea49c 100644
--- a/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/components/verify-email/verify-email.component.ts
+++ b/javascript/apps/taiga/src/app/modules/auth/feature-sign-up/components/verify-email/verify-email.component.ts
@@ -26,7 +26,7 @@ import {
 import { SignUp } from '~/app/modules/auth/feature-sign-up/models/sign-up.model';
 import { AppService } from '~/app/services/app.service';
 import { TranslocoDirective } from '@ngneat/transloco';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 @UntilDestroy()
 @Component({
@@ -35,7 +35,7 @@ import { CommonModule } from '@angular/common';
   styleUrls: ['./verify-email.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, TranslocoDirective, TuiLinkModule],
+  imports: [CommonModule, TranslocoDirective, TuiLinkModule, NgOptimizedImage],
 })
 export class AuthFeatureVerifyEmailComponent implements OnInit {
   @Input()
diff --git a/javascript/apps/taiga/src/app/modules/errors/403/error-403.component.html b/javascript/apps/taiga/src/app/modules/errors/403/error-403.component.html
index 1606d0b4e..8a0ed55fe 100644
--- a/javascript/apps/taiga/src/app/modules/errors/403/error-403.component.html
+++ b/javascript/apps/taiga/src/app/modules/errors/403/error-403.component.html
@@ -13,7 +13,9 @@
         [routerLink]="['/']"
         [attr.aria-label]="t('navigation.go_home')">
         <img
-          src="/assets/images/LogoTaiga.svg"
+          width="56"
+          height="56"
+          ngSrc="/assets/images/LogoTaiga.svg"
           alt="" />
       </a>
       <h1 class="error-title">{{ t('errors_page.403.title') }}</h1>
@@ -30,7 +32,9 @@ <h1 class="error-title">{{ t('errors_page.403.title') }}</h1>
     </div>
     <img
       class="error-background-image"
-      src="https://c.tenor.com/TbuJBSvnCLkAAAAd/cheese-challenge-cat.gif"
+      width="600"
+      height="608"
+      ngSrc="https://c.tenor.com/TbuJBSvnCLkAAAAd/cheese-challenge-cat.gif"
       alt="" />
   </div>
 </ng-container>
diff --git a/javascript/apps/taiga/src/app/modules/errors/403/error-403.component.ts b/javascript/apps/taiga/src/app/modules/errors/403/error-403.component.ts
index f938f839d..7fd3db0bb 100644
--- a/javascript/apps/taiga/src/app/modules/errors/403/error-403.component.ts
+++ b/javascript/apps/taiga/src/app/modules/errors/403/error-403.component.ts
@@ -11,14 +11,20 @@ import { Router, RouterLink } from '@angular/router';
 import { ConfigService } from '@taiga/cdk/services/config';
 import { TuiButtonModule } from '@taiga-ui/core';
 import { TranslocoDirective } from '@ngneat/transloco';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'tg-error-403',
   templateUrl: './error-403.component.html',
   styleUrls: ['./error-403.component.css'],
   standalone: true,
-  imports: [CommonModule, TranslocoDirective, RouterLink, TuiButtonModule],
+  imports: [
+    CommonModule,
+    TranslocoDirective,
+    RouterLink,
+    TuiButtonModule,
+    NgOptimizedImage,
+  ],
 })
 export class Error403Component {
   constructor(private router: Router, public config: ConfigService) {}
diff --git a/javascript/apps/taiga/src/app/modules/errors/404/error-404.component.html b/javascript/apps/taiga/src/app/modules/errors/404/error-404.component.html
index 99e951d13..d851e0043 100644
--- a/javascript/apps/taiga/src/app/modules/errors/404/error-404.component.html
+++ b/javascript/apps/taiga/src/app/modules/errors/404/error-404.component.html
@@ -13,7 +13,9 @@
         [routerLink]="['/']"
         [attr.aria-label]="t('navigation.go_home')">
         <img
-          src="/assets/images/LogoTaiga.svg"
+          width="56"
+          height="56"
+          ngSrc="/assets/images/LogoTaiga.svg"
           alt="" />
       </a>
       <h1 class="error-title">{{ t('errors_page.404.title') }}</h1>
@@ -30,7 +32,9 @@ <h1 class="error-title">{{ t('errors_page.404.title') }}</h1>
     </div>
     <img
       class="error-background-image"
-      src="https://media.tenor.com/VBTAFdK3d1MAAAAd/dog-cute.gif"
+      width="512"
+      height="640"
+      ngSrc="https://media.tenor.com/VBTAFdK3d1MAAAAd/dog-cute.gif"
       alt="" />
   </div>
 </ng-container>
diff --git a/javascript/apps/taiga/src/app/modules/errors/404/error-404.component.ts b/javascript/apps/taiga/src/app/modules/errors/404/error-404.component.ts
index 010b83d32..798bf3b4a 100644
--- a/javascript/apps/taiga/src/app/modules/errors/404/error-404.component.ts
+++ b/javascript/apps/taiga/src/app/modules/errors/404/error-404.component.ts
@@ -11,14 +11,20 @@ import { Router, RouterLink } from '@angular/router';
 import { ConfigService } from '@taiga/cdk/services/config';
 import { TuiButtonModule } from '@taiga-ui/core';
 import { TranslocoDirective } from '@ngneat/transloco';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'tg-error-404',
   templateUrl: './error-404.component.html',
   styleUrls: ['./error-404.component.css'],
   standalone: true,
-  imports: [CommonModule, TranslocoDirective, RouterLink, TuiButtonModule],
+  imports: [
+    CommonModule,
+    TranslocoDirective,
+    RouterLink,
+    TuiButtonModule,
+    NgOptimizedImage,
+  ],
 })
 export class Error404Component {
   constructor(private router: Router, public config: ConfigService) {}
diff --git a/javascript/apps/taiga/src/app/modules/errors/500/error-500.component.html b/javascript/apps/taiga/src/app/modules/errors/500/error-500.component.html
index 35df3b73f..be8bfad3d 100644
--- a/javascript/apps/taiga/src/app/modules/errors/500/error-500.component.html
+++ b/javascript/apps/taiga/src/app/modules/errors/500/error-500.component.html
@@ -13,7 +13,9 @@
         [routerLink]="['/']"
         [attr.aria-label]="t('navigation.go_home')">
         <img
-          src="/assets/images/LogoTaiga.svg"
+          width="56"
+          height="56"
+          ngSrc="/assets/images/LogoTaiga.svg"
           alt="" />
       </a>
       <h1 class="error-title">{{ t('errors_page.500.something_wrong') }}</h1>
@@ -38,8 +40,10 @@ <h1 class="error-title">{{ t('errors_page.500.something_wrong') }}</h1>
       </button>
     </div>
     <img
+      width="674"
+      height="495"
       class="error-background-image"
-      src="/assets/images/error-500.svg"
+      ngSrc="/assets/images/error-500.svg"
       alt="" />
     <a
       class="error-home"
diff --git a/javascript/apps/taiga/src/app/modules/errors/500/error-500.component.ts b/javascript/apps/taiga/src/app/modules/errors/500/error-500.component.ts
index 95ecb2daf..0887cd11e 100644
--- a/javascript/apps/taiga/src/app/modules/errors/500/error-500.component.ts
+++ b/javascript/apps/taiga/src/app/modules/errors/500/error-500.component.ts
@@ -11,14 +11,20 @@ import { ConfigService } from '@taiga/cdk/services/config';
 import { Router, RouterLink } from '@angular/router';
 import { TuiButtonModule } from '@taiga-ui/core';
 import { TranslocoDirective } from '@ngneat/transloco';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'tg-error-500',
   templateUrl: './error-500.component.html',
   styleUrls: ['./error-500.component.css'],
   standalone: true,
-  imports: [CommonModule, TranslocoDirective, RouterLink, TuiButtonModule],
+  imports: [
+    CommonModule,
+    TranslocoDirective,
+    RouterLink,
+    TuiButtonModule,
+    NgOptimizedImage,
+  ],
 })
 export class Error500Component {
   constructor(private router: Router, public config: ConfigService) {}
diff --git a/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/empty/kanban-empty.component.ts b/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/empty/kanban-empty.component.ts
index 0c4bc9f45..cbdd93228 100644
--- a/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/empty/kanban-empty.component.ts
+++ b/javascript/apps/taiga/src/app/modules/project/feature-kanban/components/empty/kanban-empty.component.ts
@@ -16,8 +16,7 @@ import {
 import { TranslocoModule } from '@ngneat/transloco';
 import { TuiButtonModule } from '@taiga-ui/core';
 
-import { CommonModule } from '@angular/common';
-import { NgOptimizedImage } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'tg-kanban-empty',
diff --git a/javascript/apps/taiga/src/app/shared/invite-user-modal/invite-user-modal.component.html b/javascript/apps/taiga/src/app/shared/invite-user-modal/invite-user-modal.component.html
index 5670e6eab..d85e399e5 100644
--- a/javascript/apps/taiga/src/app/shared/invite-user-modal/invite-user-modal.component.html
+++ b/javascript/apps/taiga/src/app/shared/invite-user-modal/invite-user-modal.component.html
@@ -214,7 +214,9 @@
               <img
                 class="tip-icon"
                 role="presentation"
-                src="/assets/images/curved-arrow.svg"
+                width="176"
+                height="150"
+                ngSrc="/assets/images/curved-arrow.svg"
                 alt="" />
               <p class="tip">{{ t('invitation_modal.add_people') }}</p>
             </div>
diff --git a/javascript/apps/taiga/src/app/shared/invite-user-modal/invite-user-modal.component.ts b/javascript/apps/taiga/src/app/shared/invite-user-modal/invite-user-modal.component.ts
index 7d28a851e..51880686d 100644
--- a/javascript/apps/taiga/src/app/shared/invite-user-modal/invite-user-modal.component.ts
+++ b/javascript/apps/taiga/src/app/shared/invite-user-modal/invite-user-modal.component.ts
@@ -79,7 +79,7 @@ import { UserCardComponent } from '../user-card/user-card.component';
 import { TuiDropdownModule } from '@taiga-ui/core/directives/dropdown';
 import { TuiAutoFocusModule, TuiActiveZoneModule } from '@taiga-ui/cdk';
 import { TuiScrollbarModule } from '@taiga-ui/core/components/scrollbar';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { InputsModule } from '@taiga/ui/inputs';
 import { BadgeComponent } from '@taiga/ui/badge/badge.component';
 import { ContextNotificationComponent } from '@taiga/ui/context-notification/context-notification.component';
@@ -141,6 +141,7 @@ interface InviteUserState {
     TuiLinkModule,
     ButtonLoadingDirective,
     capitalizePipe,
+    NgOptimizedImage,
   ],
 })
 export class InviteUserModalComponent implements OnInit, OnChanges {
diff --git a/javascript/apps/taiga/src/app/shared/nouser-avatar/nouser-avatar.component.html b/javascript/apps/taiga/src/app/shared/nouser-avatar/nouser-avatar.component.html
index b21bc7318..bb056e094 100644
--- a/javascript/apps/taiga/src/app/shared/nouser-avatar/nouser-avatar.component.html
+++ b/javascript/apps/taiga/src/app/shared/nouser-avatar/nouser-avatar.component.html
@@ -7,6 +7,8 @@
 -->
 
 <img
-  src="assets/images/avatar.svg"
+  width="32"
+  height="32"
+  ngSrc="assets/images/avatar.svg"
   alt=""
   [attr.alt]="alt" />
diff --git a/javascript/apps/taiga/src/app/shared/nouser-avatar/nouser-avatar.component.ts b/javascript/apps/taiga/src/app/shared/nouser-avatar/nouser-avatar.component.ts
index 3400b4044..ab71c701e 100644
--- a/javascript/apps/taiga/src/app/shared/nouser-avatar/nouser-avatar.component.ts
+++ b/javascript/apps/taiga/src/app/shared/nouser-avatar/nouser-avatar.component.ts
@@ -12,12 +12,12 @@ import {
   HostBinding,
   Input,
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 
 @Component({
   selector: 'tg-nouser-avatar',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, NgOptimizedImage],
   templateUrl: './nouser-avatar.component.html',
   styleUrls: ['./nouser-avatar.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/javascript/apps/taiga/src/app/shared/user-card/user-card.component.css b/javascript/apps/taiga/src/app/shared/user-card/user-card.component.css
index 8522dfbab..559384370 100644
--- a/javascript/apps/taiga/src/app/shared/user-card/user-card.component.css
+++ b/javascript/apps/taiga/src/app/shared/user-card/user-card.component.css
@@ -141,14 +141,6 @@ Copyright (c) 2023-present Kaleidos INC
   padding: var(--spacing-4);
 }
 
-.avatar {
-  block-size: 32px;
-  border: solid 2px var(--color-gray20);
-  border-radius: 50%;
-  inline-size: 32px;
-  overflow: hidden;
-}
-
 .overflow {
   @mixin ellipsis;
 
@@ -157,7 +149,7 @@ Copyright (c) 2023-present Kaleidos INC
   max-inline-size: 100%;
 }
 
-.top {
+.user-avatar {
   align-self: start;
 
   &.disabled {
diff --git a/javascript/apps/taiga/src/app/shared/user-card/user-card.component.html b/javascript/apps/taiga/src/app/shared/user-card/user-card.component.html
index b0d14c099..c76e48cc3 100644
--- a/javascript/apps/taiga/src/app/shared/user-card/user-card.component.html
+++ b/javascript/apps/taiga/src/app/shared/user-card/user-card.component.html
@@ -9,7 +9,7 @@
   class="user-card"
   [class.disabled]="disabled">
   <tg-user-avatar
-    class="top"
+    class="user-avatar"
     *ngIf="fullName"
     [color]="setColor(user.color)"
     [class.disabled]="disabled"
@@ -17,11 +17,9 @@
     type="light"
     [user]="user"></tg-user-avatar>
 
-  <img
+  <tg-nouser-avatar
     *ngIf="!fullName"
-    src="assets/images/avatar.svg"
-    class="avatar top"
-    alt="" />
+    class="user-avatar"></tg-nouser-avatar>
   <div
     class="user-identifier"
     [class.highlight]="textToHighlight"
diff --git a/javascript/apps/taiga/src/app/shared/user-card/user-card.component.ts b/javascript/apps/taiga/src/app/shared/user-card/user-card.component.ts
index b471e6595..4d86ed437 100644
--- a/javascript/apps/taiga/src/app/shared/user-card/user-card.component.ts
+++ b/javascript/apps/taiga/src/app/shared/user-card/user-card.component.ts
@@ -12,6 +12,7 @@ import { TranslocoService } from '@ngneat/transloco';
 import { TuiSvgModule } from '@taiga-ui/core';
 import { User } from '@taiga/data';
 import { UserAvatarComponent } from '~/app/shared/user-avatar/user-avatar.component';
+import { NouserAvatarComponent } from '~/app/shared/nouser-avatar/nouser-avatar.component';
 import { UtilsService } from '~/app/shared/utils/utils-service.service';
 
 @Component({
@@ -19,7 +20,12 @@ import { UtilsService } from '~/app/shared/utils/utils-service.service';
   standalone: true,
   templateUrl: './user-card.component.html',
   styleUrls: ['./user-card.component.css'],
-  imports: [CommonModule, UserAvatarComponent, TuiSvgModule],
+  imports: [
+    CommonModule,
+    UserAvatarComponent,
+    NouserAvatarComponent,
+    TuiSvgModule,
+  ],
 })
 export class UserCardComponent implements OnChanges {
   @Input() public user!: Partial<User>;