How to load images not to impact loading speed of my website without reducing image quality

Question

In my website i have several images but the size of the images is quite big, while all of the website is loaded but images which make it wait until the images are loaded which takes take too much time making overall response time too big.

now one thing i have too make it's size small, it will reduce image quality but i don't want to loose image quality.

i have used file optimizer to optimize my images but was not of much help. is there a good technique to achieve this. any suggestion would be appreciated Thank you.

Answer 1

you should try lazy loading for loading your images.

Lazy loading lets you serve up an image heavy website without having to suffer with all the prefetching and loading of images that may never be seen by the user. This is especially helpful for single page websites that are highly visual. here is an example of lazy loading https://appelsiini.net/projects/lazyload/enabled/

https://responsivedesign.is/resources/javascript-jquery/lazy-load-jquery/ lazy load a jquery plugin that lets do lazy loading easilly

i personally load images using jquery as

<img class="comp-logo" src="https://via.placeholder.com/300x300.png" data-image="images/company_logo.png" alt="image">

here in img tag i used placeholder holder instead of my logo image which load faster.

now using jquery i load images like so

$(document).ready(function () {
    $(".comp-logo").each(function (index, element) {
        var self = $(this);
        if (self.is(":visible")) {
            var imgSrc = self.data("image");
            self.attr("src", imgSrc);
        }
    });
});

Here is a great detail about lazy loading. https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/