{"id":188111,"date":"2025-04-16T14:20:12","date_gmt":"2025-04-16T14:20:12","guid":{"rendered":"https:\/\/peraltafinancing.com\/business\/internet-business\/optimize-images-with-squoosh-app\/"},"modified":"2025-04-16T14:20:12","modified_gmt":"2025-04-16T14:20:12","slug":"optimize-images-with-squoosh-app","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=188111","title":{"rendered":"Optimize Images With Squoosh App"},"content":{"rendered":"


\n<\/p>\n

\n

You probably know about image optimization already.<\/p>\n

It\u2019s meant to compress photos on your site, so pages don\u2019t load at a glacial speed.<\/p>\n

So far, you\u2019ve kinda ignored the whole idea. Fair play \u2014 it doesn\u2019t make a huge difference until your site is fully formed.<\/p>\n

But now, the time has come to do something. Your arch nemesis\u2026um, we mean\u2026your nearest competitor is absolutely trouncing your site in the performance wars. It\u2019s time to fight back.<\/p>\n

Squoosh is one of the best tools at your disposal. It\u2019s free, open source, and easy to use.<\/p>\n

<\/svg> DreamHost Glossary<\/span> <\/svg> <\/a> <\/p>\n

Open Source<\/h3>\n

In software development, open source projects are free for anyone to download, use, modify, and distribute. WordPress is one great example of open source software, although it\u2019s far from the only one.<\/p>\n

Read More <\/a> <\/div>\n

In this guide, we\u2019re going to look at how to use Squoosh to compress images and reduce your load times. Let\u2019s get going!<\/p>\n

How To Optimize Images With Squoosh in 30 Seconds<\/h2>\n

Let\u2019s get straight to business.<\/p>\n

You can start optimizing images for your site very quickly.<\/p>\n

Head over to https:\/\/squoosh.app<\/a>.<\/p>\n

Click on the big pink blob at the top of the page, and select the image you want to compress.<\/p>\n

\"Interface<\/figure>\n

You\u2019ll then enter a preview screen, with a settings panel in the bottom right.<\/p>\n

Here, you can choose to resize your image<\/a>, reduce the color palette, change the quality, and select your preferred output file type.<\/p>\n

Below that, a counter tells you how much smaller your new file will be.<\/p>\n

\"Image<\/figure>\n

As you select different options, you can move the slider in the middle of your screen to see the effect on image quality. On the left is a zoomed-in view of your original image; on the right is a preview of your compressed version.<\/p>\n

Looking good? Download your compressed image by tapping the blue blob in the bottom right. This is ready to add to your website.<\/p>\n

Boom, done.<\/p>\n

\"Image<\/figure>\n

Pro Tip:<\/strong> Want to speed things up for the next image? Tap the little \u201ccog\u201d icon in the control panel. This will save your current settings as a preset, which you can load later by tapping the other cog icon.<\/p>\n

Getting To Know Squoosh a Little Better<\/h2>\n

That\u2019s the short version, but there\u2019s a whole lot more to Squoosh<\/a>.<\/p>\n

This open-source image compression tool was actually developed by the folks at Google. It\u2019s available both as a web app and a browser add-on for Chrome.<\/p>\n

If you\u2019re feeling techy, you can also download Squoosh from GitHub<\/a> and run it offline via the command line.<\/p>\n

Squoosh supports PNG, JPG, TIFF, GIF, and many more formats. Every version is free to use, and the app handles compression locally. That\u2019s good news for privacy, because images never leave your machine.<\/p>\n

\n

Get Content Delivered Straight to Your Inbox<\/h2>\n

Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p>\n<\/div>\n

Learning How To Use Squoosh Like a Pro<\/h2>\n

The other great thing about Squoosh is that it offers loads of control. You just need to know how to navigate the control panel.<\/p>\n

Let\u2019s take a quick tour.<\/p>\n

When you first load an image into Squoosh, you\u2019ll see just four options on the control panel:<\/p>\n

Resize<\/h3>\n

If you\u2019re planning to use an image for a thumbnail, you don\u2019t need full resolution. You can flick this toggle to change the image size.<\/p>\n

\"Image<\/figure>\n

Put in the pixel count you want, but leave the default options selected unless you have a good reason. Make sure \u201cMaintain Aspect Ratio\u201d is selected to avoid warping!<\/p>\n

Reduce Palette<\/h3>\n

Many images don\u2019t actually contain that many colors. This option lets you throw away hues to reduce file size.<\/p>\n

\"Image<\/figure>\n

That \u201cDithering\u201d slider? It essentially creates a noise pattern to disguise the reduced color palette.<\/p>\n

\"Explanation<\/figure>\n

Note:<\/strong> This technique is best used on designs rather than photos, since photos can end up looking like bad photocopies.<\/p>\n

Format<\/h3>\n

Under the \u201cCompress\u201d<\/strong> label, you can select an output format for your image. The options fall into two main categories.<\/p>\n