Slow loading times can be very annoying! When a website just won’t load, it’s better to move to another website that contains the same information. The problem comes when we need the specific information in the system, but it just. Won’t. Load.
Google Chrome Labs recently made things easier for web developers to shorten loading times. Google’s Squoosh is designed primarily to optimize your images. It’s a web app, which means you can use it as long as you have a browser on. Yes, that means any browser you want: Safari, Chrome, Firefox, to name a few.
So if you have an image that is too large, simply squoosh it down to meet its proper requirements.
How Do I Squoosh Down an Image?
1. Open https://squoosh.app using your desktop browser or mobile phone
2. As it says in the interface, you can either drag and drop or use “select an image” to choose what image you want to squoosh.
3. You can only squoosh one image at a time. If you want to squoosh two, open squoosh on another tab.
4. See the interface on the bottom? You can test drive Squoosh using the images at the bottom and see how it works for different types of pictures.
5. Also, Squoosh is open source, you can look at the code at the bottom of the screen.
This is what the interface will look like:
Let’s get through it one by one:
1. That is the back button, it lets you go back to the main screen
2. The slider lets you see the “before” and “after” pictures
3. Box on the left lets you see the “before” image or “original” image. You can edit this, though.
4. Box on the right lets you see the “after” image, after it has been squooshed and/or edited to how you want it. There’s a blue button on the lower right corner for you to download the edited image.
5. Zoom button. Alternatively you can use the mouse button to do the same thing.
Different Compression Types:
- OptiPNG is a compressor that optimizes your PNG image. It makes your file size smaller without losing any information.
- MozJpeg makes your JPEG files smaller while keeping quality. It is compatible with most decoders.
- WebP is an image format developed by Google. It uses both lossy and lossless compressions.
Several tips we have found while working with Squoosh
It seems like a simple interface, but squoosh goes deeper
This is the simpler version of the editing box without going to the advanced settings.
1. If you tick the resize box, it will show you that you can resize while keeping the aspect ratio
2. If you choose to not keep the aspect ratio, you can either stretch or “contain” (it means crop) the image.
3. You can also reduce the color, the less the number, the less colors, the less file size you will have.
4. Dithering is the reducing of noise, the lower it is, the higher the file size.
5. You can reduce the quality of it, with 1 being generally a unrecognizable palette of pixels and colors.
What we would recommend for everyone is to try it out and find the balance between image quality and file size. Make sure you know the file size you need and how to keep the image as crisp as possible!
In general, Squoosh is an easy-to-use web app that can help you easily edit images. It doesn’t take a long time to learn and it processes images relatively quickly.