How To Optimize Images For The Web

Share

Optimize Images

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

Optimize Images

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.

Optimize Images

Optimize Images

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.

Optimize Images

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.

Optimize Images

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;

Optimize Images

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

Optimize Images

TinyPNG

Optimize Images

Smush.it

Optimize Images

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]

About Matt Smith

Matt Smith is the founder and editor of OnlineIncomeTeacher. He is a Professional Blogger, SEO Consultant & Web Developer, running a number of sites from the UK. Connect with him on Twitter, Facebook, Google+ and LinkedIn.

  • Andi the Minion

    Another excellent post Matt, very informative, not used Photoshop myself. I generally used paint.net. I once had it but it was on a tired and old computer so when I tried to open it everything froze. It didn’t have the power and eventually died on me taking with it our photos of Thailand. :-( I didn’t learn how to use Photoshop but I did learn to back up!

    A lot of people and myself included are never sure on what format to use when creating images. Again you have delivered a very useful post with plenty of great resources that can help a lot of new bloggers and that deserves a series of shares.

    • http://onlineincometeacher.com/ Matt Smith

      Hi Andi,

      Yeah, I had a similar experience with an old computer of mine, though I unfortunately wasn’t smart enough to back up all my files :( I learnt my lesson though!

      Though I should include some alternatives to Photoshop as I know not everyone uses it. They all works on the same principle though, just need to know what file to save them as.

  • http://WWW.EXTRA-CASH-ONLINE.COM/ Robert Connor

    So much to learn so little time – thanks for the useful info Matt!

    • http://onlineincometeacher.com/ Matt Smith

      Haha, so true Robert! :)

  • Clair Trebes

    Save for Web is an absolute MUST …. I like this post, I know a little bit about the subject matter so this made a lot of sense to me :)

    That said, it’s pitched perfectly for those who don’t really understand file sizes and types – Infact ….. I’m going to have to share this not only with my network but that of The Print Centre Romford too – as it’s really relevant to that too!

    Great image sizer alternatives too Matt – Adobe Photoshop is almost a mortgage in itself!!!
    :)