How to Lossy and Losslessly Compress Images

In order to drastically decrease the loading time of your website, you need to optimize the file size and resolution of your images. Images take up a major chunk of bandwidth relative to the HTML, CSS and JavaScript files needed to fully load your site. If you run a speed test on your site using Google's PageSpeed Insights, chances are it will prompt you to lossy and losslessly compress your images. So what in the world is lossy and losslessly compression? For some reason, I had trouble finding an article that explained this simply for new web developers. In short, lossy and lossless are two methods of compression. When you losslessly compress an image to reduce its file size, all original data prior to compression can be recovered after the image is uncompressed. This is contrary to lossy compression which strips away part of the original data (often redundant information) to reduce file size and cannot be recovered after the image is uncompressed. If this still sounds confusing, just remember these key points:

• Lossless compression preserves all original data of the image. Because of this, you can only reduce file size so much.
• Lossless compression is best applied for images that include text as all data is preserved
• Lossy compression permanently removes part of the original data (often redundant) information.
• With lossy compression you can drastically reduce file size, far more than lossless.
• Lossy compression is often applied to JPG images, audio, and video formats.
• Losslessly compression is often applied to GIF and PNG images

Compressor.IO - Online Image Compressor

Compressor.io is completely free and is perhaps the best image lossy and losslessly compressor tool on the web. The image formats currently supported are JPEG, PNG, SVG and GIF. All you have to do is upload your image to the site and it will be compressed within seconds. Once compression is complete, the site will display the percentage of reduction and a link to download your compressed image. Above the download link, the site displays your image with a slider to view the visual quality difference. This web tool does such a great job at optimizing your images that you often see no difference in visual quality. Just keep in mind that with lossy compression, since parts of data are deleted, the difference in visual quality is sometimes noticeable. I've managed to decrease the file size of my website logo by 59%! Go ahead and try it for yourself and start improving your website speed performance.

Please consider donating any amount to support Stephane Lyver, the developer behind Compressor.IO I am sure it took several months of work and endless hours of coding to develop such an useful and powerful tool. Follow the link below to donate