4

How to Compress Images Without Losing Their Quality

happy-kitten

It is very important to make sure that your website or blog loads fast. Fast page loading means a smaller bounce rate, better search engine positions and thus higher traffic. One thing that contributes to better page load times is image compression or otherwise known as image optimization. If your blog contains lots of images, this is a must-do task.

What File Format to Use

The first thing to consider when uploading an image to your blog is what image format to use.

The three most widespread formats are JPG, GIF and PNG. Below you will find a short guide to these formats with emphasis on the cases where they achieve the best image quality with the smallest file size.

JPG

JPG or JPEG stands for Joint Photographic Experts Group.

It is probably the most widely used and supported image format. It is ideal for photographic images.

It is best to edit such an image once in your image editor and then publish it. Since JPG uses lossy compression of image data, changing and re-saving a JPG image multiple times results in reduced image quality.

JPG does not preserve transparency.

GIF

GIF stands for Graphics Interchange Format. It is great for website bullets, buttons or charts, as well as for images with a small number of colors and with blocks of colors.

GIF creates a lossless bitmap, which preserves transparency and supports animations.

PNG

PNG stands for Portable Network Graphics or, unofficially, PNG’s Not GIF. This is because PNG was designed to replace GIF after the patent holders for GIF decided back in 1995 that they would begin requiring royalties.

PNG comes in two versions: PNG-8 and PNG-24. PNG-8 creates up to 8 bits of data per pixel, meaning that it can reference up to 256 colors in a color palette — the same as GIF.

PNG-24 creates 24 bits of data per pixel, meaning that it doesn’t have to reference a color palette but instead it encodes the specific colors contained in the image. Therefore PNG-24 is especially useful for images with effects used in them.

PNG is excellent for drawings, graphics with text, icons, etc. It also preserves transparency but does not support animations.

Adobe Photoshop Elements

Sometimes, using an image format incorrectly (i.e. not according to the above guidelines) may also produce interesting results. Therefore, a bit of thinking and comparing results in various scenarios can be very useful and eye opening.

To save an image in any one of the above mentioned formats, your best bet is Photoshop Elements.

However, Photoshop as well as Photoshop Elements is not big on image compression. There are two ways to reduce the file size of images created with Photoshop Elements.

Downloadable Programs

To compress the size of your images, you can try the following software utilities:

For JPG images — use JPEGmini. It is free to use for compressing up to 20 images per day.

For GIF images — use GIF Optimizer. It is free software.

For PNG images — use PNG Optimizer. It is free software.

Online Programs

In case you don’t want to install any software, you can use some very helpful online services. All of them are completely free.

Smush It by Yahoo enables you to upload multiple files and compress them. Or you can copy-paste your image URLs into a box and “smush” them there.

Image Optimizer comes both as an online tool and as a piece of downloadable free software.

PNG Crush, JPG Optimiser, and Image Optimizer from Dynamic Drive all do the same thing, namely compress images, but do so only one image at a time.

Final Thoughts

I hope that this post cleared up the confusion around image formats and how to best deploy them online to both improve image quality and reduce file size at the same time.

Liked this post?

Subscribe to our newsletter to receive early notification of new posts and deals:

Next Post »« Previous Post

Comments 4

    1. Peter Post
      Author

      True, it is possible to create PNG animations.

      But it is not that useful mentioning in this post since it is not supported by major image editors (such as Photoshop) and also by major browsers (Chrome, Internet Explorer, Opera).

      Sure, power users will know what plugins and workarounds to apply. But that is a topic for a brand new article.

    1. Peter Post
      Author

Leave a Reply

Your email address will not be published. Required fields are marked *