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.
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.
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.
The official Squoosh repository is as follows:
Squoosh is an image compression web app that reduces image sizes through numerous formats.
Squoosh does not send your image to a server. All image compression processes locally.
However, Squoosh utilizes Google Analytics to collect the following:
To develop for Squoosh:
npm install
npm run build
npm run dev
Squoosh is an open-source project that appreciates all community involvement. To contribute to the project, follow the contribute guide.
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:
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
