Squoosh: an image optimization tool for your website

?Index

1. Introduction
2. What is Squoosh?
3. Lazy loading
4. References
5. Conclusions

---

1. Introduction

The web is generally characterized by the use of images. Have you ever visited a website that doesn't have images? I assure you that is not the case. Images are the multimedia content par excellence of the web, so learning to manage them is important to provide an optimal website with a good user experience.

2. What is Squoosh?

Squoosh is a secure and easy-to-use open source tool created and maintained by the Google Chrome development team to optimize images by reducing their weight but without losing presentation quality for the end user.

We can access its official website where you can upload your images and depending on the use case you have, play with their weight and quality.

For example, we load an image in .png format that weighs 1.62Mb and after the optimization process we can obtain the same image with a weight of 154Kb, an optimization of 90% just by using the tool:

We can see the demo of the example to check it.

3. Lazy loading

Another simple way to manage image optimization is to use lazy loading on images that are not immediately loaded in the user's viewport, this means saving the client's bandwidth by avoiding requesting images that are probably not need to use.

Let's look at a simple example:

The last image in the example will not be loaded by default since it has the attribute loading="lazy", this will only load it when the user scrolls, which will indicate to the browser that the user needs the image, so the burden.

As you see, it is a very simple way to save bandwidth and natively with pure HTML.

4. References

The official Squoosh repository is as follows:

GoogleChromeLabs / squoosh

Make images smaller using best-in-class codecs, right in the browser.

Squoosh!

Squoosh is an image compression web app that reduces image sizes through numerous formats.

Privacy

Squoosh does not send your image to a server. All image compression processes locally.

However, Squoosh utilizes Google Analytics to collect the following:

• Basic visitor data.
• The before and after image size value.
• If Squoosh PWA, the type of Squoosh installation.
• If Squoosh PWA, the installation time and date.

Developing

To develop for Squoosh:

1. Clone the repository
2. To install node packages, run:

   npm install
3. Then build the app by running:

   npm run build
4. After building, start the development server by running:

   npm run dev

Contributing

Squoosh is an open-source project that appreciates all community involvement. To contribute to the project, follow the contribute guide.

View on GitHub

5. Conclusions

Using open source tools to optimize a website's images is very important to improve its performance, which combined with native HTML features such as lazy loading leads to a significant and extremely simple improvement in performance.

---

Other posts of my authorship that may interest you:

Exclusive native accordions in HTML5?

Cristian Fernando ・ Jan 10

#webdev #html #css #frontend

Quick Guide: Tips for making good commit messages in Git?

Cristian Fernando ・Dec 20 '24

#git #github #gitlab #spanish

How to create an SSH key and connect it to Github on Windows? ?

Cristian Fernando ・Dec 13 '24

#github #git #spanish #gitlab

The above is the detailed content of Squoosh: an image optimization tool for your website. For more information, please follow other related articles on the PHP Chinese website!