Animate Your Icon into GIF

More Than a GIF Maker

loading.io's animated image builder helps you quickly make simple animations from your own images, logos or PNG files with animation like bouncing or spinning of your choices info formats such as WebP animation, SVG animation, APNG, WebM,or MP4. It's a simplified version of our upcoming animation editor, which allows you to do layered animation and export animated SVG format.

Here is a list of sample animated bounce icons made with this animation maker, in GIF, APNG, SVG, WebP, MP4 and WebM formats. To emphasize their transparency (except MP4), you can click the buttons below to toggle different backgrounds:

GIF

85KB

APNG

217KB

SVG

4KB

WebP

55KB

MP4

115KB

WebM

34KB

Ripple Lines

Solid Dark

Solid White

Pattern Tiles

* Ripple Lines are available in its background generator page; pattern tiles are available in its pattern generator page.

Why GIF?

For now, GIF is the format with the best compatibility across browsers.

CSS animation is widely supported in various browsers nowaday, yet some older browsers still don't support CSS animation. Furhtermore, CSS-based animation usually needs special care for both its CSS and HTML/SVG part.

However, image quality of GIF usually isn't as good as SVG. Newer formats such as APNG, WebM and animated SVG provide better image quality, but none of them are supported by older browsers.

Why GIF from my images are blurry?

Uploaded images are resized by the size you specified in the editor, which makes the generated GIF blurry. Try using SVG instead of PNG or JPG for better result. Turning on "smoothing" option may also help.

There are jaggy strokes around GIF?

GIF by its nature can't do well with both transparency and curve edges. It's because GIF doesn't support alpha channel - like opacity with gradient - thus every pixel in GIF is either opaque or completely transparent.

Following are the same bulb file in GIF format with two different background color, you can see while the left bulb looks perfect, the right bulb is totally not acceptable in quality.

Meanwhile, PNG format image as below supports alpha channel transparency so they blend smoothly in the edge. In following example, both bulbs look perfect and no jagged edges around images:

Unfortunately, PNG doesn't support animation. APNG adds animation support to PNG, but some browsers (like IE) don't support APNG. Latest version Edge already supports APNG so in the long run it will be a good format to choose.

If you have to use GIF file, here are some tips to make it look better:

• Turn on "smoothing" option - This might make the result image looks pixelated but it usually gives better result in the edges.
• Setup Mat Color - Config its background to the background color where you are going to use this GIF in your project. It will make the GIF better blended into the place where you use it. Following are two different bulbs in GIF format, with different background color, now they look better now:

But I need SVG output.

We now support SVG generation with this upload generator for uploaded SVG files, so simply upload a SVG file will do.

SVG animation is layer-based, just like our online animation editor for our icon library, with animation options available in the advanced panel. For more sophisticated animation editing, we also provide Advanced Animation Editor for multi-layer editing and image composition.

More about Image Format

You can also check these articles ( Improving Gif Quality and Format for Animation ) for more information about how the effect of different configurations / format will be like.