diff --git a/projects/demo-cypress/src/tests/lazy-loading.cy.ts b/projects/demo-cypress/src/tests/lazy-loading.cy.ts
index b9f7204666c8e..ce5746ed424bd 100644
--- a/projects/demo-cypress/src/tests/lazy-loading.cy.ts
+++ b/projects/demo-cypress/src/tests/lazy-loading.cy.ts
@@ -9,8 +9,8 @@ describe('LazyLoading', () => {
         template: `
             <img
                 alt="picsum"
-                loading="lazy"
                 style="--tui-background-neutral-2: rgba(0, 0, 0, 0.16); width: 100px; height: 100px; display: block"
+                tuiLoading="lazy"
                 [attr.src]="src"
             />
 
diff --git a/projects/demo/src/modules/app/landing/index.html b/projects/demo/src/modules/app/landing/index.html
index c4e26437b90b3..f602acf7cd2b7 100644
--- a/projects/demo/src/modules/app/landing/index.html
+++ b/projects/demo/src/modules/app/landing/index.html
@@ -1,6 +1,6 @@
 <img
     alt="taiga"
-    loading="lazy"
+    tuiLoading="lazy"
     src="assets/images/taiga.svg"
     class="taiga"
 />
@@ -15,7 +15,7 @@
     <div class="topography">
         <img
             alt="topography"
-            loading="lazy"
+            tuiLoading="lazy"
             src="assets/images/topography.svg"
         />
     </div>
@@ -26,7 +26,7 @@
         <iframe
             *ngIf="intersected || current === 1"
             height="100%"
-            loading="lazy"
+            tuiLoading="lazy"
             src="https://taiga-family.github.io/preview-landing-components/"
             title="Preview of components"
             width="100%"
@@ -127,7 +127,7 @@ <h2 class="opensource">It’s open source</h2>
     <div class="map">
         <img
             alt="topography"
-            loading="lazy"
+            tuiLoading="lazy"
             src="assets/images/topography.svg"
         />
     </div>
@@ -139,7 +139,7 @@ <h2 class="opensource">It’s open source</h2>
         <span class="dash">——</span>
         <img
             alt="logo"
-            loading="lazy"
+            tuiLoading="lazy"
             src="assets/images/taiga.svg"
             class="logo"
         />
@@ -190,7 +190,7 @@ <h2 class="opensource">It’s open source</h2>
     ></button>
     <img
         alt="by TBank"
-        loading="lazy"
+        tuiLoading="lazy"
         src="assets/images/by.svg"
         class="by"
     />
diff --git a/projects/demo/src/modules/app/landing/index.ts b/projects/demo/src/modules/app/landing/index.ts
index 82c24554d2f4c..4646d2343f95f 100644
--- a/projects/demo/src/modules/app/landing/index.ts
+++ b/projects/demo/src/modules/app/landing/index.ts
@@ -16,6 +16,7 @@ import {
 } from '@ng-web-apis/intersection-observer';
 import {EMPTY_QUERY, TuiAutoFocus, tuiProvide, TuiRepeatTimes} from '@taiga-ui/cdk';
 import {TuiButton, tuiFadeIn} from '@taiga-ui/core';
+import {TuiImgLazyLoading} from '@taiga-ui/kit';
 
 @Component({
     standalone: true,
@@ -24,6 +25,7 @@ import {TuiButton, tuiFadeIn} from '@taiga-ui/core';
         RouterLink,
         TuiAutoFocus,
         TuiButton,
+        TuiImgLazyLoading,
         TuiRepeatTimes,
         WaIntersectionObserver,
     ],
diff --git a/projects/demo/src/modules/directives/lazy-loading/examples/1/index.html b/projects/demo/src/modules/directives/lazy-loading/examples/1/index.html
index 15f6ccd0d9f1b..c2e23c51f877f 100644
--- a/projects/demo/src/modules/directives/lazy-loading/examples/1/index.html
+++ b/projects/demo/src/modules/directives/lazy-loading/examples/1/index.html
@@ -2,7 +2,7 @@
     <img
         alt="Random image"
         height="200"
-        loading="lazy"
+        tuiLoading="lazy"
         width="300"
         [src]="src"
     />
diff --git a/projects/demo/src/modules/directives/lazy-loading/examples/import/template.md b/projects/demo/src/modules/directives/lazy-loading/examples/import/template.md
index 61a50874b2f4b..a1201635c7ae0 100644
--- a/projects/demo/src/modules/directives/lazy-loading/examples/import/template.md
+++ b/projects/demo/src/modules/directives/lazy-loading/examples/import/template.md
@@ -3,6 +3,6 @@
   src="myImage.jpg"
   height="200"
   width="300"
-  loading="lazy"
+  tuiLoading="lazy"
 />
 ```
diff --git a/projects/demo/src/modules/directives/lazy-loading/index.html b/projects/demo/src/modules/directives/lazy-loading/index.html
index 7ed9474764fae..17767a84674a2 100644
--- a/projects/demo/src/modules/directives/lazy-loading/index.html
+++ b/projects/demo/src/modules/directives/lazy-loading/index.html
@@ -6,7 +6,7 @@
     <ng-template pageTab>
         <p>
             Directive can be used for image lazy loading. It is the same as
-            <code>loading="lazy"</code>
+            <code>tuiLoading="lazy"</code>
             but supports also old browsers
         </p>
 
diff --git a/projects/kit/components/avatar/avatar.component.ts b/projects/kit/components/avatar/avatar.component.ts
index fe60381f0f56d..69121802a0da0 100644
--- a/projects/kit/components/avatar/avatar.component.ts
+++ b/projects/kit/components/avatar/avatar.component.ts
@@ -7,13 +7,14 @@ import {
     tuiAppearanceOptionsProvider,
     TuiWithAppearance,
 } from '@taiga-ui/core/directives/appearance';
+import {TuiImgLazyLoading} from '@taiga-ui/kit/directives';
 
 import {TUI_AVATAR_OPTIONS} from './avatar.options';
 
 @Component({
     standalone: true,
     selector: 'tui-avatar,button[tuiAvatar],a[tuiAvatar]',
-    imports: [NgSwitch, NgSwitchCase, NgSwitchDefault, TuiIcon],
+    imports: [NgSwitch, NgSwitchCase, NgSwitchDefault, TuiIcon, TuiImgLazyLoading],
     templateUrl: './avatar.template.html',
     styleUrls: ['./avatar.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/projects/kit/components/avatar/avatar.template.html b/projects/kit/components/avatar/avatar.template.html
index e84d7d420682c..87afbd9015e48 100644
--- a/projects/kit/components/avatar/avatar.template.html
+++ b/projects/kit/components/avatar/avatar.template.html
@@ -2,7 +2,7 @@
     <img
         *ngSwitchCase="'img'"
         alt=""
-        loading="lazy"
+        tuiLoading="lazy"
         [src]="value"
     />
     <tui-icon
diff --git a/projects/kit/directives/lazy-loading/lazy-loading.directive.ts b/projects/kit/directives/lazy-loading/lazy-loading.directive.ts
index a52fe80f30847..cf1fc55fe9065 100644
--- a/projects/kit/directives/lazy-loading/lazy-loading.directive.ts
+++ b/projects/kit/directives/lazy-loading/lazy-loading.directive.ts
@@ -8,20 +8,20 @@ import {TuiLazyLoadingService} from './lazy-loading.service';
 
 @Directive({
     standalone: true,
-    selector: 'img[loading="lazy"]',
+    selector: 'img[tuiLoading="lazy"],img[tuiLoading="lazy"]',
     providers: [TuiLazyLoadingService, IntersectionObserverService],
     host: {
         '[style.animation]': 'animation()',
         '[style.background]': 'background()',
+        '[attr.loading]': 'supported ? "lazy" : null',
         '[attr.src]': 'src()',
         '(load)': 'unset()',
         '(error)': 'unset()',
     },
 })
 export class TuiImgLazyLoading {
-    private readonly el = tuiInjectElement<HTMLImageElement>();
     private readonly loading$ = inject(TuiLazyLoadingService);
-    private readonly supported = 'loading' in this.el;
+    protected readonly supported = 'loading' in tuiInjectElement<HTMLImageElement>();
     protected src = signal<SafeResourceUrl | string | null>(null);
     protected animation = signal('tuiSkeletonVibe ease-in-out 1s infinite alternate');
     protected background = signal('var(--tui-background-neutral-2)');