diff --git a/erpnext/portal/doctype/homepage_section/test_homepage_section.py b/erpnext/portal/doctype/homepage_section/test_homepage_section.py
index 27b0169c595..27c8fe4c95a 100644
--- a/erpnext/portal/doctype/homepage_section/test_homepage_section.py
+++ b/erpnext/portal/doctype/homepage_section/test_homepage_section.py
@@ -57,7 +57,11 @@ class TestHomepageSection(unittest.TestCase):
 		self.assertEqual(cards[0].h5.text, "Card 1")
 		self.assertEqual(cards[0].a["href"], "/card-1")
 		self.assertEqual(cards[1].p.text, "Subtitle 2")
-		self.assertEqual(cards[1].find(class_="website-image-lazy")["data-src"], "test.jpg")
+
+		img = cards[1].find(class_="card-img-top")
+
+		self.assertEqual(img["src"], "test.jpg")
+		self.assertEqual(img["loading"], "lazy")
 
 		# cleanup
 		frappe.db.rollback()
diff --git a/erpnext/templates/includes/macros.html b/erpnext/templates/includes/macros.html
index 3e20e50c3d8..f56dc3a4549 100644
--- a/erpnext/templates/includes/macros.html
+++ b/erpnext/templates/includes/macros.html
@@ -46,7 +46,7 @@
 		<div class="col-md-{{ section.column_value }} mb-4">
 			<div class="card h-100 justify-content-between">
 				{% if card.image %}
-				<div class="website-image-lazy" data-class="card-img-top h-75" data-src="{{ card.image }}" data-alt="{{ card.title }}"></div>
+				<img class="card-img-top h-75" src="{{ card.image }}" loading="lazy" alt="{{ card.title }}"></img>
 				{% endif %}
 				<div class="card-body">
 					<h5 class="card-title">{{ card.title }}</h5>
diff --git a/erpnext/templates/pages/home.html b/erpnext/templates/pages/home.html
index 4c69b8388de..27d966ad42e 100644
--- a/erpnext/templates/pages/home.html
+++ b/erpnext/templates/pages/home.html
@@ -37,7 +37,7 @@
 			{% for item in homepage.products %}
 			<div class="col-md-4 mb-4">
 				<div class="card h-100 justify-content-between">
-					<div class="website-image-lazy" data-class="card-img-top website-image-extra-large" data-src="{{ item.image }}" data-alt="{{ item.item_name }}"></div>
+					<img class="card-img-top website-image-extra-large" src="{{ item.image }}" loading="lazy" alt="{{ item.item_name }}"></img>
 					<div class="card-body flex-grow-0">
 						<h5 class="card-title">{{ item.item_name }}</h5>
 						<a href="{{ item.route }}" class="card-link">{{ _('More details') }}</a>