Best way to load image

[andriiradkevych]

I see that fresh doesn't have any solution on image loading process. From existing solutions which I've found I see that I can use lazy loading , described here https://web.dev/articles/lazy-loading-images

         document.addEventListener('DOMContentLoaded', () => {
            var lazyImages = [].slice.call(
              document.querySelectorAll('img[data-lazy]')
            );
          
            if ('IntersectionObserver' in window) {
              let lazyImageObserver = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                  if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src || '';
                    lazyImageObserver.unobserve(lazyImage);
                  }
                });
              });

              lazyImages.forEach((lazyImage) => {
                lazyImageObserver.observe(lazyImage);
              });
            }
          })

but for this approach I need some kind of compressor, for making image which I want to load with bad quality , and then when it is visible , load image with good one. Is there any solution , which you can share ? Or I just have to make some compression , and that's it ?

[marvinhagemeister]

That web.dev article from 2019 about lazy loading images is not up to date in terms of what the platform offers. Since it was written all browser added support for the loading attribute which adds lazy loading natively to the web without any additional code.

<img loading="lazy" src="image.jpg" alt="..." />

To show a blurry low resolution preview before the image is loaded the typical solution is to set it via CSS as a background image.

The loading attribute even works on <iframe> elements. There is a good article about lazy loading on the web on MDN: https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading