Compressing images for your website

Sometimes, we have to deal with large size images in our website that cause the loading time longer. We need to manage that issue by compressing the images to a smaller without affecting largely the image resolution on the other hand.

Furthermore, we can use lazy loading to load our images on the website apart from compressing images. Firstly I will guide to some websites which provide multiple images’ compression and talk about lazy loading.

Jpeg Compression

As for the jpg and jpeg images compression, you can go to this website which allows only jpg formats images for compression that is available up to 20 images per time. After compression work, there will be a zip file of your compressed images.

Jpg & Png Compression

You have png files instead of jpg, you can use this website which allows not only jpg but also png for compression. The limitation is 20 like above one and there is one more limitation of image size 5MB. After compression work, there will also be a zip file of your compressed images.

Lazy Loading

Image lazy loading means loading images to websites asynchronously, that is, after the content in the top half of the page is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll all the way down, the images at the bottom of the page won’t even load.

There are many types of lazy loading but I will talk about native browser lazy loading but you can also use other third parties JavaScript libraries.

<img loading = lazy> is compatible with the most popular Chromium-powered browsers (Chrome, Edge, Opera) and Firefox. WebKit (Safari) implementation is in progress. caniuse.com has detailed information on cross-browser compatibility. Browsers that don’t support the loading attribute just ignore it with no side effects.

As I said above, you are welcome to use other libraries like Lozad.js or Intersection_Observer_API also.

Yuuma

Tweet