How to Lazy Load Images in Plain HTML

Chris Achinga

Most websites contain images that contribute to high data usage and slow page loads. It is impossible to do away with photos on websites; therefore, page load speeds must be improved.

Image lazy loading is a method of identifying resources (images) as non-critical until they’re needed. For example, a page wouldn’t load an image if it is not in the user’s viewport. The image will get loaded only when a user scrolls to it. Lazy loading does not reduce the image quality but improves the page load time by rendering resources only when needed.

Demo and source code

We completed this project in CodeSandbox. Fork and run it to quickly get started.

The source code is available on GitHub.

Lazy loading images in HTML

NB: No extra skills or technical requirements are needed!

HTML provides a native way of lazy loading images using the <img> tag. Here is what a simple <img> tag would look like:

1<img src="https://res.cloudinary.com/chris101/image/upload/v1647634705/kq.jpg" class="img-fluid" alt="an image with a title" />

To enable lazyload, we will introduce the loading attribute. Assigning “lazy” to the loading attribute instructs the browser not to load images that are not on the viewport until a user scrolls near them:

loading="lazy"

1<img
2 src="https://res.cloudinary.com/chris101/image/upload/v1647634707/delta.jpg"
3 loading="lazy"
4/>

To test whether the lazyload works as intended, we will use the developer tools provided by popular browsers. We will be using Google Chrome for the demo. We will use the demo code below:

1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <title>images lazyload</title>
8 <!-- CSS only -->
9 <link
10 href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
11 rel="stylesheet"
12 integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
13 crossorigin="anonymous"
14 />
15 </head>
16 <body>
17 <main class="container m-3 align-items-center justify-content-center">
18 <h1 class="text-center">Lazy Load HTML</h1>
19
20 <img
21 src="https://res.cloudinary.com/chris101/image/upload/v1647634705/kq.jpg"
22 class="img-fluid"
23 alt=""
24 />
25
26 <p class="text-center text-mute">
27 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor
28 recusandae quibusdam accusamus culpa. Odit sit vero modi temporibus
29 velit perspiciatis ullam tempora quo rerum praesentium, facilis, minus
30 eaque enim illo necessitatibus eligendi ex tenetur, unde porro est eius?
31 Soluta cupiditate possimus hic exercitationem expedita animi repellat
32 debitis, molestiae quo eligendi blanditiis at minima quaerat?
33 Accusantium dolorum necessitatibus, doloremque itaque quos id tempore
34 sed fuga sit aliquam nulla? Officiis iusto consequuntur maxime ab
35 accusamus omnis possimus quo aperiam sapiente quasi impedit accusantium
36 harum necessitatibus deleniti tempore tempora hic molestiae ex
37 consectetur nisi, exercitationem placeat amet eum! Reiciendis
38 perspiciatis commodi qui. Dignissimos autem sint quis alias non, soluta,
39 nam quasi cupiditate nulla hic similique eius culpa tempora, ex qui nemo
40 vero vel atque minus dolores voluptate labore totam quidem! Repellat
41 harum quos amet, nisi ducimus deleniti illum, quas quaerat ipsum
42 incidunt consequuntur earum. Suscipit earum error quo corporis
43 aspernatur, dolores neque libero, maxime totam reiciendis iusto
44 quibusdam maiores. Earum sapiente aut, adipisci quae, eaque quis iure
45 tempora consequatur doloremque facilis esse totam. Consectetur autem
46 incidunt accusantium rerum asperiores quos ipsum iste iure, deserunt
47 magni assumenda minima modi id ipsam tempore, voluptatibus quisquam.
48 Molestiae, quam minus repudiandae quae suscipit iusto praesentium
49 obcaecati sint eligendi ducimus! Animi, suscipit. Pariatur molestiae
50 maiores quia, dolore voluptates obcaecati blanditiis voluptas aliquam
51 quos rerum voluptatem eaque hic architecto soluta totam nisi
52 necessitatibus! Accusantium veniam officiis inventore eaque eligendi
53 molestias ad dolorum alias quisquam iste. Cumque nostrum quidem
54 exercitationem quod nisi repellat laborum sit at recusandae modi
55 accusantium iure dolorem provident, aut facilis hic odit? Suscipit et
56 atque nesciunt. Eaque autem explicabo maiores animi quidem quae,
57 aspernatur exercitationem eius sint ullam reprehenderit ratione officia
58 quos aut atque quia. At, in cum! Unde totam quibusdam sequi dolore eum
59 ipsa ex minima adipisci culpa tempora rem autem voluptatem, provident
60 ducimus error reiciendis atque maxime dolorem quae aliquam dolores ad
61 odit numquam esse? Cumque necessitatibus optio illo asperiores inventore
62 rerum blanditiis voluptatum quasi provident cupiditate eaque eligendi
63 distinctio nemo reprehenderit doloremque totam explicabo, incidunt ullam
64 perferendis facere aperiam a porro voluptates repellendus! Veniam vel
65 quis autem delectus libero ab, assumenda placeat esse nisi non? Esse,
66 corrupti incidunt similique impedit sapiente blanditiis, iure
67 consequuntur voluptate quod, quas dicta laboriosam rem at? Atque
68 necessitatibus veritatis, commodi a reprehenderit tenetur alias nostrum
69 odit quis rerum iusto esse eius nulla tempore voluptatibus nesciunt eos
70 illo! Error a necessitatibus voluptatibus aperiam, sapiente minus fugit
71 voluptas tempora corrupti debitis dolores eum labore quasi. Neque, nam
72 aspernatur aliquam facere asperiores ducimus exercitationem. Cupiditate
73 tempore natus quo neque, aspernatur dignissimos nemo in vero omnis
74 fugiat repellendus non. Tempore, eveniet iste ab beatae recusandae dolor
75 ducimus! Eveniet ex dolore voluptatibus possimus numquam, suscipit
76 assumenda! Earum, error nulla? Minus autem doloremque sunt explicabo
77 quam. Repellendus veritatis molestias iusto magni nesciunt atque animi
78 repudiandae ex sapiente. Adipisci praesentium error dolorem placeat
79 architecto deserunt! Reprehenderit error atque facilis sequi fugit eius
80 maxime quisquam doloremque, sint dignissimos itaque eaque explicabo
81 possimus nisi corporis aut ullam perferendis temporibus velit, enim
82 cumque incidunt dicta nostrum. At incidunt nihil exercitationem sed sint
83 iste debitis architecto ducimus vitae. Culpa non blanditiis officia sint
84 provident facilis vitae nisi perspiciatis perferendis? In veniam
85 expedita, blanditiis amet laudantium, nisi eveniet dolor voluptates et
86 reiciendis, necessitatibus assumenda impedit accusamus iusto dolores?
87 Natus iste, necessitatibus molestiae quas quo sint debitis facilis
88 dolorum inventore iusto similique adipisci ea voluptatum recusandae,
89 assumenda aperiam nostrum est? Fugiat ipsa ad porro quod consequuntur
90 nobis a repellendus dolorem dolorum recusandae molestiae earum
91 exercitationem necessitatibus quidem voluptate magni expedita odit, sed
92 vero dicta. Nesciunt, laudantium et eos unde obcaecati inventore rerum
93 quaerat ullam corporis eaque minima id temporibus quidem, dolor
94 reiciendis. Ducimus recusandae aliquam, assumenda illum natus eaque
95 dolor voluptatem quas placeat. Earum, neque eum quasi, adipisci ea qui
96 deleniti magni distinctio, dicta voluptate odio aut corrupti commodi
97 possimus autem. Velit sapiente, beatae recusandae provident esse eveniet
98 sed eos, iste ipsam atque optio id consequuntur quos ullam tempore
99 aliquam ratione obcaecati quidem praesentium debitis, fugit et. Possimus
100 laudantium provident ab praesentium illum doloremque est cumque eius
101 temporibus sint vero nemo reprehenderit tenetur deserunt dolor,
102 exercitationem in! Ut impedit deserunt illum distinctio illo tenetur
103 laborum, deleniti fugit voluptas maiores, soluta architecto nulla optio
104 cumque, magnam eveniet temporibus! Quaerat rerum aliquid repellendus
105 labore natus facilis? Ad non impedit ullam beatae molestiae officia,
106 iste dicta iure dolorem vero placeat culpa. Tempora adipisci cumque,
107 nisi voluptas eligendi reiciendis et praesentium totam dolore soluta
108 corporis, quos ad deleniti iste ullam aut unde harum minus laboriosam at
109 eaque aliquid aperiam? Porro distinctio labore aperiam adipisci earum
110 dolorem quisquam est facere soluta, vitae commodi voluptate ipsum
111 corrupti, natus sunt maxime necessitatibus tempora tenetur! Esse
112 consequuntur, laudantium nihil asperiores ut modi facilis omnis odio
113 illo accusantium, ab excepturi non. Ea ipsum porro corporis velit sint
114 itaque fugiat enim, tempore consequatur sit similique deleniti quas
115 saepe numquam fuga incidunt eaque maxime dignissimos nisi voluptates
116 quod tempora. Hic iure quidem ipsa a dicta recusandae id, dignissimos
117 excepturi eum. Enim dolore inventore quo repellendus aut, distinctio
118 doloremque eum dignissimos suscipit, a ratione minus vitae dolorem?
119 Inventore dolorum est recusandae vel natus. Dolor suscipit excepturi,
120 optio cum consectetur voluptatem cumque aliquam cupiditate. Dolorem eum
121 error eveniet, esse atque quas odit reprehenderit necessitatibus, enim
122 ex optio est, praesentium numquam laudantium minus perspiciatis natus.
123 Quam esse perferendis id? Illum error aut qui alias, rerum voluptatem,
124 suscipit ipsam cupiditate in debitis totam veritatis necessitatibus
125 sapiente accusantium? Doloribus tempore quam, culpa aut, quas accusamus
126 ut labore blanditiis cum temporibus possimus hic maiores nostrum nulla,
127 eum fugiat magni nemo ratione ullam doloremque. Minima quos numquam
128 placeat. Deleniti architecto fugit, expedita sit animi esse nihil
129 accusamus dolorum itaque perferendis culpa ullam numquam iure harum
130 voluptatum non quisquam impedit ipsam sapiente officia quidem aliquam
131 quasi voluptate? Quasi non, dolor ratione nulla rem dolores numquam
132 quidem assumenda tempora ipsam voluptatum dolorum molestias tenetur
133 minima id perspiciatis maiores iste nemo ducimus earum provident
134 praesentium cupiditate libero vitae? Quos, quas. Praesentium quaerat
135 officia hic, adipisci eveniet perferendis explicabo odio totam unde aut
136 maxime tempora earum possimus! Eaque, vitae quis! Praesentium, assumenda
137 mollitia.
138 </p>
139 <div class="container">
140 <img
141 src="https://res.cloudinary.com/chris101/image/upload/v1647634707/delta.jpg"
142 alt=""
143 class="img-fluid"
144 loading="lazy"
145 />
146 </div>
147 </main>
148 </body>
149</html>

Click the link below to access the live version of the code:

https://o53mq0.csb.app/

We will load the URL on our browser and open up developer inspection tools: (shift+ctrl+I on Google Chrome). In the developer tools, go to the Network tab and select Img under it.

Once we are there, we hard refresh the page and notice that only the top image is loaded first:

Once we start scrolling down, the second image begins loading:

A short video demonstrating the test done:

https://youtu.be/S3rCexKbfvY

Conclusion

This article covers implementing lazy loading images in plain HTML and testing how it works in practice.

Resources

  1. Lazy Loading
  2. Image Attributes
  3. Tips for Authoring fast loading HTML pages

Chris Achinga

Technical Writer