How To Optimize Images For The Web

After publishing our guide to speeding up your website load time, we received a few questions from people asking more about how to optimize images.  So, I thought it would be good to put together a quick post to help.

Images can be pretty big files, which can ultimately slow down a site pretty significantly, especially when you have a lot of them on a page.  That is why it is always important to spend time optimizing images properly for your site.

Let’s take a look at some of the things you can do.

Crop Any Excess White Space

If you have an image with a lot of white space on it, you can crop it out.  This saves a lot of unneeded information being saved.

When you add it to a post/page and want to add the white space back in, you can simply add extra padding or a white border around your image.  This will improve the loading time of that image, as there is less information needed to be downloaded in order for it to be displayed.

Admittedly, there won’t be that much load time saved on individual images (though that depends on the image), but add up all the images on your site and you can start to see significant savings.  Always try to think of the bigger picture… if you know what I mean. 

Use Photoshop’s ‘Save For Web’ Function

Photoshop is an excellent software program that enables you to edit images.  I’m sure you have all heard of it.

Within Photoshop is a feature ‘Save for Web…’ that enables you to save your images in an optimized format.  This is great for websites, as it removes as much unnecessary information as possible, cutting file sizes significantly.  The smaller the file size, the quicker it is to load online.

The great thing about this feature is that you can play around with the features so that you are cutting down the file size as much as possible, without compromising on quality.

So here in the above image, the original file is 192k, whereas the PNG-8 version that I have selected is only 2.789k, which is a HUGE 98.5% saving!

Save In The Right File Format

One mistake that many people often make in regards to images (and I have been guilt y of this in the past), is that they save them in the wrong file format.  I think most people save all their images as JPEGs, as that is often the default file option and they don’t know when to use other file formats.

There are 3 formats that you generally want to be using for your images.  These are JPEGs, GIFs and PNGs.

JPEGs (Joint Photographic Experts Group) are meant for photos and anything that uses a true colour pallet.  These are usually high quality images that you want to include on your site.

GIFs (Graphics Interchange Format) are meant for flat colour images.  GIFs were introduced for the internet as they have a much smaller file size than other formats.  Whereas JPEGs support images that feature millions of different colours (true colour), GIFs only support a maximum of 256 colours.  You can also use GIFs for animated images.

PNGs (Portable Network Graphics) were also invented for the web and can be found in two different versions (PNG-8 and PNG24).  I won’t get too technical here, but generally PNG-8 files are like GIFs and PNG-24 files are like JPEGs, but are of better quality.  You can also include transparent layers in PNGs, which can be useful in certain situations for web design.

So, to summarize;

• JPEGs – Photos
• GIFs – Flat colour images, logos, text based images, buttons, etc.
• PNGs – Photos, flat colour images, logos, text based images, buttons, transparent layers, etc.

Whilst that might sound like PNGs are much better than JPEGs and GIFs, that’s not always the case, especially when it comes to site speed.  Check out this excellent guide to image formats to learn more.

Take the above 100×98 pixel image.

• Original Size = 38.3k
• JPEG (50% quality) = 3.476k
• GIF (8-bit colour) = 1.141k
• PNG-8 (8-bit colour) = 1.023k
• PNG-24 =5.943k

In this case, the PNG-8 version is the best to use, but if we look at a different example;

This image is 150×100 pixels.

• Original Size = 43.9k
• JPEG (50% quality) = 3.957k
• GIF (64-bit colour) = 6.44k
• PNG-8 (64-bit colour) = 5.728k
• PNG-24 =25.49k

Here the JPEG version is the best to use.  I have to use larger bit-rate colour samples for GIF and PNG-8 so as to avoid degrading the image quality too much.  Remember this is a photo.

Try to save your images in the smallest file size that you can.  If you aren’t sure, test out each to find the best format for your images before uploading to your site.

Alternatives To Photoshop To Optimize Images

I talked about using Photoshop to optimize your images as that is what most professional web designers use, but what if you don’t own a copy?  Well there are plenty of alternatives that you can use.  Here are some FREE alternatives that I have found that will let you optimize your images;

Web Photo Resizer

TinyPNG

Smush.it

Got any other questions about how to optimize images for your site? What do you use to optimize your images? Please let us know by leaving a comment below!

Image by ‘Matteo Angelino’ [Source]