diff --git a/core/lib/presentation/utils/html_transformer/dom/image_transformers.dart b/core/lib/presentation/utils/html_transformer/dom/image_transformers.dart
index c65c2e254..e5e1874be 100644
--- a/core/lib/presentation/utils/html_transformer/dom/image_transformers.dart
+++ b/core/lib/presentation/utils/html_transformer/dom/image_transformers.dart
@@ -39,6 +39,15 @@ class ImageTransformer extends DomTransformer {
           imageSource: src
         );
         imageElement.attributes['src'] = imageBase64 ?? src;
+      } else if (src.startsWith('https://') || src.startsWith('http://')) {
+        final classAttribute = imageElement.attributes['class'];
+        if (classAttribute != null) {
+          imageElement.attributes['class'] = '$classAttribute lazy-loading';
+        } else {
+          imageElement.attributes['class'] = 'lazy-loading';
+        }
+        imageElement.attributes['data-src'] = src;
+        imageElement.attributes.remove('src');
       }
     }));
   }
diff --git a/core/lib/presentation/utils/html_transformer/html_template.dart b/core/lib/presentation/utils/html_transformer/html_template.dart
index 2e8a875a8..44e303de1 100644
--- a/core/lib/presentation/utils/html_transformer/html_template.dart
+++ b/core/lib/presentation/utils/html_transformer/html_template.dart
@@ -54,10 +54,10 @@ String generateHtml(String content, {
       ''' : ''}
       ${styleCSS ?? ''}
     </style>
-    ${javaScripts ?? ''}
     </head>
     <body ${direction == TextDirection.rtl ? 'dir="rtl"' : ''} style = "overflow-x: hidden">
     <div class="tmail-content">$content</div>
+    ${javaScripts ?? ''}
     </body>
     </html> 
   ''';
diff --git a/core/lib/presentation/utils/html_transformer/html_utils.dart b/core/lib/presentation/utils/html_transformer/html_utils.dart
index c148b3bd2..d1c659265 100644
--- a/core/lib/presentation/utils/html_transformer/html_utils.dart
+++ b/core/lib/presentation/utils/html_transformer/html_utils.dart
@@ -68,6 +68,39 @@ class HtmlUtils {
     }
   ''';
 
+  static const scriptLazyLoadImage = '''
+    <script type="text/javascript">
+      const lazyImages = document.querySelectorAll("img.lazy-loading");
+      
+      const options = {
+        root: null, // Use the viewport as the root
+        rootMargin: "0px",
+        threshold: 0.1 // Specify the threshold for intersection
+      };
+      
+      const handleIntersection = (entries, observer) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const img = entry.target;
+            const src = img.getAttribute("data-src");
+      
+            // Replace the placeholder with the actual image source
+            img.src = src;
+      
+            // Stop observing the image
+            observer.unobserve(img);
+          }
+        });
+      };
+      
+      const observer = new IntersectionObserver(handleIntersection, options);
+      
+      lazyImages.forEach((image) => {
+        observer.observe(image);
+      });
+    </script>
+  ''';
+
   static String customCssStyleHtmlEditor({TextDirection direction = TextDirection.ltr}) {
     if (PlatformInfo.isWeb) {
       return '''
diff --git a/core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart b/core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart
index 7c8202df2..1bdb229b7 100644
--- a/core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart
+++ b/core/lib/presentation/views/html_viewer/html_content_viewer_on_web_widget.dart
@@ -4,6 +4,7 @@ import 'dart:math' as math;
 
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/utils/html_transformer/html_template.dart';
+import 'package:core/presentation/utils/html_transformer/html_utils.dart';
 import 'package:core/presentation/views/html_viewer/html_viewer_controller_for_web.dart';
 import 'package:core/utils/app_logger.dart';
 import 'package:flutter/cupertino.dart';
@@ -171,7 +172,7 @@ class _HtmlContentViewerOnWebState extends State<HtmlContentViewerOnWeb> {
       minHeight: minHeight,
       minWidth: minWidth,
       styleCSS: tooltipLinkCss,
-      javaScripts: webViewActionScripts + scriptsDisableZoom,
+      javaScripts: webViewActionScripts + scriptsDisableZoom + HtmlUtils.scriptLazyLoadImage,
       direction: widget.direction);
 
     return htmlTemplate;
diff --git a/core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart b/core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart
index e2d876c4c..56e60c9fb 100644
--- a/core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart
+++ b/core/lib/presentation/views/html_viewer/html_content_viewer_widget.dart
@@ -65,7 +65,11 @@ class _HtmlContentViewState extends State<HtmlContentViewer> {
   void initState() {
     super.initState();
     actualHeight = widget.heightContent;
-    _htmlData = generateHtml(widget.contentHtml, direction: widget.direction);
+    _htmlData = generateHtml(
+      widget.contentHtml,
+      direction: widget.direction,
+      javaScripts: HtmlUtils.scriptLazyLoadImage,
+    );
   }
 
   @override
@@ -76,7 +80,8 @@ class _HtmlContentViewState extends State<HtmlContentViewer> {
         widget.direction != oldWidget.direction) {
       _htmlData = generateHtml(
         widget.contentHtml,
-        direction: widget.direction
+        direction: widget.direction,
+        javaScripts: HtmlUtils.scriptLazyLoadImage,
       );
     }
   }
@@ -176,8 +181,6 @@ class _HtmlContentViewState extends State<HtmlContentViewer> {
         actualHeight = minHeight;
       }
     }
-
-    return Future.value(null);
   }
 
   Future<void> _setActualWidthView() async {
@@ -210,8 +213,6 @@ class _HtmlContentViewState extends State<HtmlContentViewer> {
         widget.onWebViewLoaded?.call(isScrollActivated);
       }
     }
-
-    return Future.value(null);
   }
 
   void _hideLoadingProgress() {
