performance issues because a lot of image in website - web-performance

Question

I have a lot of images on my website and that makes my website load too slowly. should I create a small image with low quality and small size and make a blur effect on it and make the real images load slowly (lazy load) after all page files are downloaded or what should I do

Answer 1

That's a very interesting issue. I love the answers posted here (very detailed and informative), but - I think that the crux of your problem is the coupling between your page resources and your page load. Thus I think that de-coupling those 2 will make a HUGE difference
The problem
You page is loading with all of it's resources. this results in a slow and leggy page load that reminds us of old-fashion web sites. We want a more modern approach that loads the page in a more elegant way
The Solution
Load your page with light-weight content (such as text)
Present the partially-loaded page to the user with placeholders for the rest of content
in the background - lazy-load heavy page resources (such as images)
let the page populate itself while the user has full access to it
How To Implement
Let's focus on the problem you mentioned - images. You may think they are loading slowly because of their size. But, videos (which are heavier than images) are usually loaded with no problem - because modern video players are loading them in chunks and have a really good strategy to give the user a great experience. So, for now, we will NOT focus on the weight of your resources but instead focus on how to load them properly. It goes without saying (but I'll say it anyway) - AFTER you are getting the results your expected - it is advise to properly handle the size of your images as noted in the other answers
A very simple and effective demo for this:
<style>
img.loader {
display: none;
}
img.loader.active {
display: block;
}
</style>
<script>
function loadImage(target, url) {
const imgElement = target.querySelector('img.target')
const imgLoaderElement = document.createElement('img')
const loaderElement = target.querySelector('img.loader')
imgLoaderElement.onload = event => {
// nice to have - the actual size of the requested image
console.log(imgLoaderElement.width, imgLoaderElement.height)
loaderElement.classList.remove('active')
imgElement.src = url
}
imgLoaderElement.src = url
}
</script>
<div id="image-loader-1">
<img class="active loader" src="https://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif" alt="" width="48" height="48">
<img class="target" />
</div>
<button onclick="loadImage(document.querySelector('#image-loader-1'), 'https://picsum.photos/600/400')">
Load Image
</button>
Let's break this down
Your image container is now a div element constructed of 2 elements
a pre-loader - to have a nice effect of loading something
the image element - this will contain the actual image
The function loadImage asks you to specify the target image container (in our example image-loader-1) and the image url (your site or 3rd0party sites - no difference here). It will then create a new image element (without populating it to the dom) and load the image there (while still playing the pre-loader in the background). Only after the image is full loaded (and the url is cached in the browser) - you may attach this url to your real image element (and then - make the pre-loader disappear).
This way, you will always have the benefit to use a loader until the image is ready for view - making your users experience better
Does this looks good? Right now - no, not really. I cleaned all the styling properties from it in order to make this solution as clear as possible.
Can it be better? yes. Just put some styling efforts into it and you are ready
to go
Note: because this is a general question which does not rely on a specific modern framework, I posted a very generic solution using vanilla JS. Hope it is clear enough for future users to understand and implement in their own projects.

Answer 2

There are several things that can be done.
is definitely make the size of images smaller. if they are not taking a lot of website space then it is better to make them smaller because if they are not shown in the resolution the image belongs to you are just wasting a lot of bandwidth and then downscale the image anyway. There are many online image compressor that you can use or you can directly decrease the size from your image viewer most of them have a resize option.
instead of using jpg/jpeg/png use webp. webp is a better format for images since it provides further compression of data and also have a lossless compression 25% better then png. The biggest pro of webp is faster load time and less storage. BUT this might not be supported by all browsers, so before implementing this just check if anyone is still running netscape or not. Last i checked all browser that are used support it.(https://en.wikipedia.org/wiki/WebP#Support)
If you need more optimization there is also a browser addon called lighthouse created by google. just install it, goto your website and click "generate report". It will tell you all the places you can actually optimize your website.
(Chrome- https://developer.chrome.com/docs/lighthouse/overview/
Firefox- https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/)

Answer 3

Why does it get slow?
Images are too large
Images are not optimized according to the device
Images have unspecified dimensions
You use heavy formats
The browser starts loading images all at once
Your cache doesn’t store images
Solution:
Resize and compress images
Lossy = a filter that eliminates some of the data. The quality of the image is impacted.
Lossless = a filter that compresses the data without touching the quality of the image.
Use
Imagify
Ewww Image Optimizer
Optimole (Image optimization & Lazy Load by Optimole)
ShortPixel Image Optimizer
reSmush.it
Set image dimensions
Serve images optimized for each device
Lazy load your images
Implementing Lazy Loading using a WordPress plugin.
Lazy Loading by WP Rocket is a free plugin that implements the lazy
load script on the images.
Check this interesting guide if you want to compare the best lazy
load plugins available on the market.
Implementing Lazy Loading manually: follow this guide from CodeInWP
that explains the two ways to implement lazy loading manually (not so
easy to follow for beginners, though).
Convert your images to WebP
Credit:https://imagify.io/blog/reasons-images-slow-websites/

Answer 4

just in simple language....
Sites that use too many images, or have images that are too large, have longer loading times. This can slow down your entire page, irritating visitors and actually hurting your site's ranking in online search results.