DEV Community

Trishul for Itsopensource

Posted on • Edited on • Originally published at itsopensource.com

1 2

Lazyload images the browser way

One of the biggest performance wins for image-extensive webpages is lazy loading. Normally, the browser fetches all the required resources from the server as soon as possible. When the website has lots of images this goes against the speed and performance of the website. Consider a page loading 100s of dog images, there will be 100 asynchronous http requests. The more the http requests, the slower the website.

All images are required for the functionality of the website, but they might NOT be required on the FIRST load. Here Lazy loading does the magic— images will be fetched only when they are required for the content in the current view port. So for a long image-extensive page, the images which are required by the top part of a website will be initially fetched on the first load and as the website is scrolled down, the respective images are fetched.

This has been practiced for a while and various Javascript libraries are built to achieve this.

The list goes on. But the good news is the specification for native image lazyloading has been merged into the HTML standards. Check HTML standard repo.

Official specs - https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes

With this we don't need any lazy loading libraries anymore and all we need to do is the following:

<img loading="lazy" src="https://placedog.net/400/400/random" alt="doggo">
Enter fullscreen mode Exit fullscreen mode

Notice the loading attribute, this is the magic keyword. It accepts 3 values auto, lazy, eager

  • auto - this is equivalent to not including the loading attribute. This sets the default browser behavior for images.
  • lazy - fetches images only when the element is in/near the viewport.
  • eager - fetches the images immediately.

Lazyload will soon be supported in all major browsers by default. But if you want to test it, you can turn on the browser's experimental flags:

Firefox (>=75):

  1. Goto about:config
  2. Set dom.image-lazy-loading.enabled to true

Chrome (>=76):

  1. Goto chrome://flags
  2. Set Enable lazy image loading to Enabled

Demo: https://itsopensource.com/demos/lazyload/

Lazyload in action

Lazyload in action

Image of AssemblyAI tool

Transforming Interviews into Publishable Stories with AssemblyAI

Insightview is a modern web application that streamlines the interview workflow for journalists. By leveraging AssemblyAI's LeMUR and Universal-2 technology, it transforms raw interview recordings into structured, actionable content, dramatically reducing the time from recording to publication.

Key Features:
🎥 Audio/video file upload with real-time preview
🗣️ Advanced transcription with speaker identification
⭐ Automatic highlight extraction of key moments
✍️ AI-powered article draft generation
📤 Export interview's subtitles in VTT format

Read full post

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay