How to Properly Format and Compress Your Images for the Web

We upload a lot of images to the web, and sometimes we don’t pay enough attention to how we are formatting them.

The file format we choose is crucial. It will determine the file size and the image quality.

Today I’m going to show you a couple of tools and rules I use to improve the result of the images I upload to the web.

Choose the Proper Format

There are dozens of different image file formats, but we could say that there are three major image categories for the web: PNG, JPG and GIF.

• PNG: Flat illustrations and social networks
  If you create flat illustrations with a few colors, as I do, use PNG. You will get the lightest files and the best quality of image. Also use it for Facebook and other social networks since they compress the JPG files very poorly. With PNG, your image will always look good.
• JPG: Photos and complex images
  For all other kinds of images, use JPG. It works better than PNG on complex images with a lot of colors. Don’t use it for social networks. Use PNG instead; see the previous point.
• GIF: Only for animated gifs
  Don’t use GIF for anything else.

What is Lossy Image Compression and Why Should You Use It?

Using lossy image compression correctly allows you to minimize the file size of any image without losing any noticeable quality. Minimizing the file size means a faster and more effective website in terms of usability and SEO.

Depending on the kind of image, you can expect something between 10% and 40% size reduction.

Compressing your images properly will ensure your images look good anywhere you upload them.

I use a couple of free apps to compress the images that perform better than any other software I’ve tried.

ImageAlpha

It only works for PNG files and has several options but the defaults do a marvelous job.

Open the image you want to convert and save the new version as a new file.
ImageAlpha is free and is only available for Mac.

ImageOptim

I use it for all image file formats other than PNG and also when I want to compress multiple images.

Drag or open the images to ImageOptim and it will automatically replace your original image with the lossy compressed one. Works like magic. ImageOptim is free and is only available for Mac.

UPDATE: Clara pointed out two new options that work even better: Tinypng and Tinyjpg. They work online, so you don’t need to install any additional software (but they also have Photoshop plugins available). Thank you Clara!

Conclusions

Using the proper format and compressing the images we upload to the web is very important to optimize their performance.

This is especially important when uploading them into our portfolio or publishing them on Facebook, Instagram, or other social networks.