Image compression is one of the main causes of slow websites. Images that are not previously compressed and resized, and are placed on the site, usually take up 15 times more than is actually needed. I'll show you how to compress images in a few steps.
Let’s start with that, what is image compression?
Image compression is a process in which we reduce the weight of an image with as little loss of image quality as possible. Simply put, why should you have a picture that is 10 mb if you can upload the same picture with the same quality to the site, and it takes up 100 kb?Imagine, only 100 times less image weight 🙂
Image compression has multiple benefits for your site. In this way, you will facilitate the site and speed up the loading of web pages, which will directly affect SEO, since site speed is an important item and signal for site optimization.
The math is simple, you create a page with 5 images, each image takes up 10mb, that’s 50mb per page just from the images. After this article, you compress those same images and they occupy 5x100kb, which is 500kb on that image page.
Everything is great here, but let’s see if it’s really so, let’s go to a great application…
Squoosh.app image compression application
Squoosh.app is a free image compression application that doesn’t need to be installed on your computer because everything happens directly on the site itself. So, if you don’t use or don’t know how to use Photoshop, you can use this tool to compress the image in a few seconds and then upload it to the site.
You can do the following on the squoosh.app application:
- you change the image format
- you change the image dimensions
- you change the image quality
- both you and your site visitors enjoy a faster site.
This is what squoosh.app looks like where I compress images, and below I will show you with a video how you can do everything in 10 seconds.
Don’t post a billboard on the site…
The size of the images themselves is also very important. We’ll think again: Why put a picture on the site that can fit on a billboard?
Huge images will still be heavy after compression, so it is important that the images are properly sized because the visitor will definitely not see the image in the size you set, but as much as the device they are using allows.
Let’s say the logo on the site occupies a space of 150px x 50px, putting a logo that is 3000 x 1000px has no purpose, and besides, it will be much more difficult. If we consider that it is also located at the very beginning of the site and that it will be loaded among the first things. That’s already slowing down the site at the very beginning.
Balance between the dimensions and the required image quality!
The best way to determine what image size your site needs is to look at where the image will fit and what its purpose is. If it is an image that will be used as a background for the site or a part of the site, then its width can be 1920 pixels. It’s no coincidence that there are so many pixels, it’s just that most laptops use exactly that resolution, so you get the maximum, but not too much.
This is the case when we talk about the desktop version, of course for the mobile version you need to place another image because it is unnecessary for the 1920px wide image to be on the mobile version which is 400-500px wide. It can of course, but it is unnecessary and will make the site load slower.
If you are going to post a picture for a product on the online store, then that picture is on one side of the screen, but this picture is often clicked to view it enlarged. That’s why it’s great that this image is 1080px x 1080px. In this way, the image will be large enough to see everything nicely even when it is enlarged, and on the other hand, not too large to additionally burden the site.
If we place icons on the site, depending on where we need them, it is best to place those icons in svg format and size 50Ă—50, 100Ă—100 and sometimes even smaller. This is a story about the dimensions of the paintings that I had to touch on, which we will talk more about and devote ourselves to the smallest details in future articles. Because this is one of the most common problems on websites, and it is related to image optimization.
Reduce image weight in a few steps on Squoosh.app
There is no great philosophy (more :D). We get down to work and in a few steps we compress the image, which will have the same quality, and the weight will drop from 1.41mb to 97kb.
- Uploading an image to squoosh.app
- Selecting the image size
- Selecting the image format (jpeg, png, webp, …)
- Determining the quality of the new image
- Comparing the original and new image
- JOB DONE!
Magical nutritionist for pictures…
Let me know the results after compressing the images with this super tool and send me new site loading speed results. Enjoy 🙂
Nice share!