ONLINE MONEY PLANET

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!

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 – PhotosGIFs – 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.3kJPEG (50% quality) = 3.476kGIF (8-bit colour) = 1.141kPNG-8 (8-bit colour) = 1.023kPNG-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.9kJPEG (50% quality) = 3.957kGIF (64-bit colour) = 6.44kPNG-8 (64-bit colour) = 5.728kPNG-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.

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;

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.

This post was made using the Auto Blogging Software from WebMagnates.org This line will not appear when posts are made after activating the software to full version.