{"id":28042,"date":"2022-06-10T07:39:38","date_gmt":"2022-06-10T07:39:38","guid":{"rendered":"http:\/\/how-to-lazyload-images-in-plain-html"},"modified":"2025-09-26T13:52:03","modified_gmt":"2025-09-26T20:52:03","slug":"how-to-lazyload-images-in-plain-html","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/","title":{"rendered":"How to Lazy Load Images in Plain HTML"},"content":{"rendered":"

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.<\/p>\n

Image lazy loading is a method of identifying resources (images) as non-critical until they\u2019re needed. For example, a page wouldn\u2019t load an image if it is not in the user\u2019s 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.<\/p>\n

Demo and source code<\/p>\n

We completed this project in CodeSandbox<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

The source code is available on GitHub<\/a>.<\/p>\n

Lazy loading images in HTML<\/h2>\n
\n

NB:\nNo extra skills or technical requirements are needed!<\/p>\n<\/blockquote>\n

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

<img src="https:\/\/res.cloudinary.com\/chris101\/image\/upload\/v1647634705\/kq.jpg" class="img-fluid" alt="an image with a title" \/>\n<\/code><\/pre>\n
To enable lazyload, we will introduce the loading attribute. Assigning \u201clazy\u201d to the loading<\/code> attribute instructs the browser not to load images that are not on the viewport until a user scrolls near them:<\/p>\n
loading="lazy"<\/code><\/p>\n
\n<img<\/span>\n  src<\/span>=\"https:\/\/res.cloudinary.com\/chris101\/image\/upload\/v1647634707\/delta.jpg\"<\/span>\n  loading<\/span>=\"lazy\"<\/span>\n\/><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n  <head<\/span>><\/span>\n    <meta<\/span> charset<\/span>=\"UTF-8\"<\/span> \/><\/span>\n    <meta<\/span> http-equiv<\/span>=\"X-UA-Compatible\"<\/span> content<\/span>=\"IE=edge\"<\/span> \/><\/span>\n    <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0\"<\/span> \/><\/span>\n    <title<\/span>><\/span>images lazyload<\/title<\/span>><\/span>\n    <!-- CSS only --><\/span>\n    <link<\/span>\n      href<\/span>=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.2.0-beta1\/dist\/css\/bootstrap.min.css\"<\/span>\n      rel<\/span>=\"stylesheet\"<\/span>\n      integrity<\/span>=\"sha384-0evHe\/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor\"<\/span>\n      crossorigin<\/span>=\"anonymous\"<\/span>\n    \/><\/span>\n  <\/head<\/span>><\/span>\n  <body<\/span>><\/span>\n    <main<\/span> class<\/span>=\"container m-3 align-items-center justify-content-center\"<\/span>><\/span>\n      <h1<\/span> class<\/span>=\"text-center\"<\/span>><\/span>Lazy Load HTML<\/h1<\/span>><\/span>\n\n      <img<\/span>\n        src<\/span>=\"https:\/\/res.cloudinary.com\/chris101\/image\/upload\/v1647634705\/kq.jpg\"<\/span>\n        class<\/span>=\"img-fluid\"<\/span>\n        alt<\/span>=\"\"<\/span>\n      \/><\/span>\n\n      <p<\/span> class<\/span>=\"text-center text-mute\"<\/span>><\/span>\n        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor\n        recusandae quibusdam accusamus culpa. Odit sit vero modi temporibus\n        velit perspiciatis ullam tempora quo rerum praesentium, facilis, minus\n        eaque enim illo necessitatibus eligendi ex tenetur, unde porro est eius?\n        Soluta cupiditate possimus hic exercitationem expedita animi repellat\n        debitis, molestiae quo eligendi blanditiis at minima quaerat?\n        Accusantium dolorum necessitatibus, doloremque itaque quos id tempore\n        sed fuga sit aliquam nulla? Officiis iusto consequuntur maxime ab\n        accusamus omnis possimus quo aperiam sapiente quasi impedit accusantium\n        harum necessitatibus deleniti tempore tempora hic molestiae ex\n        consectetur nisi, exercitationem placeat amet eum! Reiciendis\n        perspiciatis commodi qui. Dignissimos autem sint quis alias non, soluta,\n        nam quasi cupiditate nulla hic similique eius culpa tempora, ex qui nemo\n        vero vel atque minus dolores voluptate labore totam quidem! Repellat\n        harum quos amet, nisi ducimus deleniti illum, quas quaerat ipsum\n        incidunt consequuntur earum. Suscipit earum error quo corporis\n        aspernatur, dolores neque libero, maxime totam reiciendis iusto\n        quibusdam maiores. Earum sapiente aut, adipisci quae, eaque quis iure\n        tempora consequatur doloremque facilis esse totam. Consectetur autem\n        incidunt accusantium rerum asperiores quos ipsum iste iure, deserunt\n        magni assumenda minima modi id ipsam tempore, voluptatibus quisquam.\n        Molestiae, quam minus repudiandae quae suscipit iusto praesentium\n        obcaecati sint eligendi ducimus! Animi, suscipit. Pariatur molestiae\n        maiores quia, dolore voluptates obcaecati blanditiis voluptas aliquam\n        quos rerum voluptatem eaque hic architecto soluta totam nisi\n        necessitatibus! Accusantium veniam officiis inventore eaque eligendi\n        molestias ad dolorum alias quisquam iste. Cumque nostrum quidem\n        exercitationem quod nisi repellat laborum sit at recusandae modi\n        accusantium iure dolorem provident, aut facilis hic odit? Suscipit et\n        atque nesciunt. Eaque autem explicabo maiores animi quidem quae,\n        aspernatur exercitationem eius sint ullam reprehenderit ratione officia\n        quos aut atque quia. At, in cum! Unde totam quibusdam sequi dolore eum\n        ipsa ex minima adipisci culpa tempora rem autem voluptatem, provident\n        ducimus error reiciendis atque maxime dolorem quae aliquam dolores ad\n        odit numquam esse? Cumque necessitatibus optio illo asperiores inventore\n        rerum blanditiis voluptatum quasi provident cupiditate eaque eligendi\n        distinctio nemo reprehenderit doloremque totam explicabo, incidunt ullam\n        perferendis facere aperiam a porro voluptates repellendus! Veniam vel\n        quis autem delectus libero ab, assumenda placeat esse nisi non? Esse,\n        corrupti incidunt similique impedit sapiente blanditiis, iure\n        consequuntur voluptate quod, quas dicta laboriosam rem at? Atque\n        necessitatibus veritatis, commodi a reprehenderit tenetur alias nostrum\n        odit quis rerum iusto esse eius nulla tempore voluptatibus nesciunt eos\n        illo! Error a necessitatibus voluptatibus aperiam, sapiente minus fugit\n        voluptas tempora corrupti debitis dolores eum labore quasi. Neque, nam\n        aspernatur aliquam facere asperiores ducimus exercitationem. Cupiditate\n        tempore natus quo neque, aspernatur dignissimos nemo in vero omnis\n        fugiat repellendus non. Tempore, eveniet iste ab beatae recusandae dolor\n        ducimus! Eveniet ex dolore voluptatibus possimus numquam, suscipit\n        assumenda! Earum, error nulla? Minus autem doloremque sunt explicabo\n        quam. Repellendus veritatis molestias iusto magni nesciunt atque animi\n        repudiandae ex sapiente. Adipisci praesentium error dolorem placeat\n        architecto deserunt! Reprehenderit error atque facilis sequi fugit eius\n        maxime quisquam doloremque, sint dignissimos itaque eaque explicabo\n        possimus nisi corporis aut ullam perferendis temporibus velit, enim\n        cumque incidunt dicta nostrum. At incidunt nihil exercitationem sed sint\n        iste debitis architecto ducimus vitae. Culpa non blanditiis officia sint\n        provident facilis vitae nisi perspiciatis perferendis? In veniam\n        expedita, blanditiis amet laudantium, nisi eveniet dolor voluptates et\n        reiciendis, necessitatibus assumenda impedit accusamus iusto dolores?\n        Natus iste, necessitatibus molestiae quas quo sint debitis facilis\n        dolorum inventore iusto similique adipisci ea voluptatum recusandae,\n        assumenda aperiam nostrum est? Fugiat ipsa ad porro quod consequuntur\n        nobis a repellendus dolorem dolorum recusandae molestiae earum\n        exercitationem necessitatibus quidem voluptate magni expedita odit, sed\n        vero dicta. Nesciunt, laudantium et eos unde obcaecati inventore rerum\n        quaerat ullam corporis eaque minima id temporibus quidem, dolor\n        reiciendis. Ducimus recusandae aliquam, assumenda illum natus eaque\n        dolor voluptatem quas placeat. Earum, neque eum quasi, adipisci ea qui\n        deleniti magni distinctio, dicta voluptate odio aut corrupti commodi\n        possimus autem. Velit sapiente, beatae recusandae provident esse eveniet\n        sed eos, iste ipsam atque optio id consequuntur quos ullam tempore\n        aliquam ratione obcaecati quidem praesentium debitis, fugit et. Possimus\n        laudantium provident ab praesentium illum doloremque est cumque eius\n        temporibus sint vero nemo reprehenderit tenetur deserunt dolor,\n        exercitationem in! Ut impedit deserunt illum distinctio illo tenetur\n        laborum, deleniti fugit voluptas maiores, soluta architecto nulla optio\n        cumque, magnam eveniet temporibus! Quaerat rerum aliquid repellendus\n        labore natus facilis? Ad non impedit ullam beatae molestiae officia,\n        iste dicta iure dolorem vero placeat culpa. Tempora adipisci cumque,\n        nisi voluptas eligendi reiciendis et praesentium totam dolore soluta\n        corporis, quos ad deleniti iste ullam aut unde harum minus laboriosam at\n        eaque aliquid aperiam? Porro distinctio labore aperiam adipisci earum\n        dolorem quisquam est facere soluta, vitae commodi voluptate ipsum\n        corrupti, natus sunt maxime necessitatibus tempora tenetur! Esse\n        consequuntur, laudantium nihil asperiores ut modi facilis omnis odio\n        illo accusantium, ab excepturi non. Ea ipsum porro corporis velit sint\n        itaque fugiat enim, tempore consequatur sit similique deleniti quas\n        saepe numquam fuga incidunt eaque maxime dignissimos nisi voluptates\n        quod tempora. Hic iure quidem ipsa a dicta recusandae id, dignissimos\n        excepturi eum. Enim dolore inventore quo repellendus aut, distinctio\n        doloremque eum dignissimos suscipit, a ratione minus vitae dolorem?\n        Inventore dolorum est recusandae vel natus. Dolor suscipit excepturi,\n        optio cum consectetur voluptatem cumque aliquam cupiditate. Dolorem eum\n        error eveniet, esse atque quas odit reprehenderit necessitatibus, enim\n        ex optio est, praesentium numquam laudantium minus perspiciatis natus.\n        Quam esse perferendis id? Illum error aut qui alias, rerum voluptatem,\n        suscipit ipsam cupiditate in debitis totam veritatis necessitatibus\n        sapiente accusantium? Doloribus tempore quam, culpa aut, quas accusamus\n        ut labore blanditiis cum temporibus possimus hic maiores nostrum nulla,\n        eum fugiat magni nemo ratione ullam doloremque. Minima quos numquam\n        placeat. Deleniti architecto fugit, expedita sit animi esse nihil\n        accusamus dolorum itaque perferendis culpa ullam numquam iure harum\n        voluptatum non quisquam impedit ipsam sapiente officia quidem aliquam\n        quasi voluptate? Quasi non, dolor ratione nulla rem dolores numquam\n        quidem assumenda tempora ipsam voluptatum dolorum molestias tenetur\n        minima id perspiciatis maiores iste nemo ducimus earum provident\n        praesentium cupiditate libero vitae? Quos, quas. Praesentium quaerat\n        officia hic, adipisci eveniet perferendis explicabo odio totam unde aut\n        maxime tempora earum possimus! Eaque, vitae quis! Praesentium, assumenda\n        mollitia.\n      <\/p<\/span>><\/span>\n      <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\n        <img<\/span>\n          src<\/span>=\"https:\/\/res.cloudinary.com\/chris101\/image\/upload\/v1647634707\/delta.jpg\"<\/span>\n          alt<\/span>=\"\"<\/span>\n          class<\/span>=\"img-fluid\"<\/span>\n          loading<\/span>=\"lazy\"<\/span>\n        \/><\/span>\n      <\/div<\/span>><\/span>\n    <\/main<\/span>><\/span>\n  <\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Click the link below to access the live version of the code:<\/p>\n
We will load the URL on our browser and open up developer inspection tools: (shift<\/code>+ctrl<\/code>+I<\/code> on Google Chrome). In the developer tools, go to the Network<\/code> tab and select Img<\/code> under it.<\/p>\n
\"\"<\/p>\n
Once we are there, we hard refresh the page and notice that only the top image is loaded first:<\/p>\n
\"\"<\/p>\n
Once we start scrolling down, the second image begins loading:<\/p>\n
\"\"<\/p>\n
A short video demonstrating the test done:<\/p>\n
https:\/\/youtu.be\/S3rCexKbfvY<\/a><\/p>\n
Conclusion<\/h2>\n
This article covers implementing lazy loading images in plain HTML and testing how it works in practice.<\/p>\n
Resources<\/h2>\n
    \n
  1. \nLazy Loading<\/a>\n<\/li>\n
  2. \nImage Attributes<\/a>\n<\/li>\n<\/ol>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28043,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,145,370,371],"class_list":["post-28042","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-html5","tag-image","tag-under-review"],"acf":[],"yoast_head":"\nHow to Lazy Load Images in Plain HTML<\/title>\n<meta name=\"description\" content=\"Image lazy loading is a method of identifying resources (images) as non-critical until they\u2019re needed. For example, a page wouldn\u2019t load an image if it is not in the user\u2019s 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.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Lazy Load Images in Plain HTML\" \/>\n<meta property=\"og:description\" content=\"Image lazy loading is a method of identifying resources (images) as non-critical until they\u2019re needed. For example, a page wouldn\u2019t load an image if it is not in the user\u2019s 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.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-10T07:39:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-26T20:52:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925583\/Web_Assets\/blog\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"How to Lazy Load Images in Plain HTML\",\"datePublished\":\"2022-06-10T07:39:38+00:00\",\"dateModified\":\"2025-09-26T20:52:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925583\/Web_Assets\/blog\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"HTML5\",\"Image\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/\",\"name\":\"How to Lazy Load Images in Plain HTML\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925583\/Web_Assets\/blog\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29.jpg?_i=AA\",\"datePublished\":\"2022-06-10T07:39:38+00:00\",\"dateModified\":\"2025-09-26T20:52:03+00:00\",\"description\":\"Image lazy loading is a method of identifying resources (images) as non-critical until they\u2019re needed. For example, a page wouldn\u2019t load an image if it is not in the user\u2019s 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.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925583\/Web_Assets\/blog\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925583\/Web_Assets\/blog\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29.jpg?_i=AA\",\"width\":640,\"height\":360},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Lazy Load Images in Plain HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Lazy Load Images in Plain HTML","description":"Image lazy loading is a method of identifying resources (images) as non-critical until they\u2019re needed. For example, a page wouldn\u2019t load an image if it is not in the user\u2019s 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.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/","og_locale":"en_US","og_type":"article","og_title":"How to Lazy Load Images in Plain HTML","og_description":"Image lazy loading is a method of identifying resources (images) as non-critical until they\u2019re needed. For example, a page wouldn\u2019t load an image if it is not in the user\u2019s 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.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-10T07:39:38+00:00","article_modified_time":"2025-09-26T20:52:03+00:00","og_image":[{"width":640,"height":360,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925583\/Web_Assets\/blog\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/"},"author":{"name":"","@id":""},"headline":"How to Lazy Load Images in Plain HTML","datePublished":"2022-06-10T07:39:38+00:00","dateModified":"2025-09-26T20:52:03+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925583\/Web_Assets\/blog\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29.jpg?_i=AA","keywords":["Guest Post","HTML5","Image","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/","name":"How to Lazy Load Images in Plain HTML","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925583\/Web_Assets\/blog\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29.jpg?_i=AA","datePublished":"2022-06-10T07:39:38+00:00","dateModified":"2025-09-26T20:52:03+00:00","description":"Image lazy loading is a method of identifying resources (images) as non-critical until they\u2019re needed. For example, a page wouldn\u2019t load an image if it is not in the user\u2019s 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.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925583\/Web_Assets\/blog\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925583\/Web_Assets\/blog\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29.jpg?_i=AA","width":640,"height":360},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-lazyload-images-in-plain-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Lazy Load Images in Plain HTML"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925583\/Web_Assets\/blog\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29\/3bc0350b89dde445438164c6977184fdba1194c2-640x360-1_280432af29.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28042"}],"version-history":[{"count":1,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28042\/revisions"}],"predecessor-version":[{"id":38617,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28042\/revisions\/38617"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28043"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
https:\/\/o53mq0.csb.app\/<\/a><\/p>\n
To test whether the lazyload works as intended, we will use the developer tools provided by popular browsers. We will be using Google Chrome<\/a> for the demo.\nWe will use the demo code below:<\/p>\n