Compress and resize photos on my site

Compress and resize photos on my site

Tags: Productivity

Nobody likes slow websites. This can be due to many reasons, but most often the photos on the site are to blame. Photos are the second largest resource on your website that needs to be compressed and optimized. To check which are the largest and heaviest resources on your website, you can use LightHouse in the Chrome browser or Google's PageSpeed Insights. Other tools you can use to check the loading speed of your website are:

Keep in mind that depending on the location of the site and the server that checks the loading speed, you can get significantly different results. For example, for a website that is hosted on a server in Bulgaria and checked by a server in Australia, the rating will not be very good.

The loading speed of your website is also used when ranking results in Google. The slower your website loads, the more likely the user is to leave the site. It's a good practice not to upload very large photos (such as a 4MB photo).

You can optimize your photos when they take up no more space than their size on the page. For example, if you have a slideshow on your site, don't put huge pictures (for example, 4,000 x 3,000 pixels image).

Online photo compression tools

1. Google Squoosh - very easy to use, click the photo icon or drag and drop the photo on the circle.

In the lower right corner are the compression settings. Here you can see that even with the default settings, you will achieve great compression.

You can change the "Quality" for greater compression. For maximum compression, you can select different formats from the drop-down menu (under the heading "Compress").

Resizing images

You can use "Resize" to resize your images. Just click "Resize" slider button and enter your desired width and height. If "Maintain aspect ratio" is checked then it will update other dimension automatic. Disable "Maintain aspect ratio" to resize image width and height without maintaining aspect ratio.

Depending on the image, you can select WebP for photos. For graphics, the GIF format is recommended. For transparent photos, it is good to use PNG. With WebP format and 60% compression, we were able to achieve compression of 71% to 21KB, with the original photo being 77KB. To download the compressed photo after selecting the photo compression settings, press the blue down arrow button at the bottom right.

2. TinyPNG - great for compressing PNG photos. You can compress up to 20 photos at a time and each photo can be a maximum of 5MB. Click or drag photos to the rectangle with a dotted line. When the compression is complete, you will be able to download all the photos at once or save them to DropBox.


3. ShrinkMe - another free online tool for compressing photos with a minimalist design. Click or drag photos to the fenced rectangle with a dotted line. When the compression is completed, click the "Save" button to download your photos.

There are many different tools for compressing photos for different purposes. We provide a few that are the easiest to use.