yensdesign – Tutorials, Web Design and Coding

It’s the turn of the GIFs images in our optimization image process of Speeding Up Your Website series.

We are going to learn how to reduce the file size of our GIFs images without losing quality, converting to PNG and optimizing GIF animations.

We are going to use ImageMagick and GIFsicle to achieve it.

Actually we have published these articles:

• Minimize HTTP Requests
• Selecting the Right Format for your Images
• Optimizing JPEG images
• Optimizing PNGs images
• Optimizing GIFs images

So let’s dive into the tutorial guys!

Converting from GIF to PNG

What’s the best way to optimize and reduce the file size of our GIFs images? Convert to PNG format.

If you take a look at one of our published tutorials about optimization titled Selecting the Right Format for your Images we have concluded that we must use PNG in all cases that we don’t need to display animations(GIF) and photos (JPG).

In most of cases converting a GIF image to PNG image will be smaller size, but in some cases it won’t be, so make sure you have checked it after the conversion.

We will use the ImageMagick convert command to achieve it:

[code language="php"]
> convert original_image.gif final_image.png
[/code]

ImageMagick will apply the recommended PNG format automatically but we can force the conversion to PNG8 if needed:

[code language="php"]
> convert original_image.gif PNG8:final.png
[/code]

Easy right?

ImageMagick it’s a great tool for webdevelopers and if I am not wrong, Facebook uses it to optimize their images before saving them.

Let’s continue the tutorial we will learn how to optimize our GIFs animations!

Optimizing our GIFs animations

Some time ago GIFs animations were very used to improve the user’s experience by making sites a little more “dynamically, accesible and “rich”, used in navigation bars, headers and so on… Actually GIFs animations are used in most of cases to display a “loading” status when we are using AJAX.

As we know GIFs animations are a serie of single frames displayed one by one so we can reduce our GIFs animations by removing those frames that don’t change in the animation.

How? As we said at the beginning of this tutorial we will make use of GIFsicle tool. Here you have an example:

[code language="php"]

> gifsicle -O2 original.gif > final.gif

[/code]
Why we don't convert our GIFs animations to PNG to save file size? We cann't. It's important to remember that only GIFs images can display animations, JPG and PNG formats cann't!

And that's all guys! I hope you find it useful and use this tutorial to improve your sites  

Thanks for all guys one more time!

Don’t forget follow us on twitter and visit our forums!