Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Choosing the best image formats

Sunday, January 19th, 2014 by Servage

GIF compression
GIF compression is “lossless,” which means that no image information is sacrificed in order to compress the indexed image (although some image information may be lost when the RGB image is converted to a limited color palette). It uses a compression scheme (called “LZW” for Lempel-Ziv-Welch) that takes advantage of repetition in data. When it encounters a string of pixels of identical color, it can compress that into one data description. This is why images with large areas of flat color condense better than images with textures.

To use an extremely simplified example, when the compression scheme encounters a row of 14 identical blue pixels, it makes up a shorthand notation that means “14 blue pixels.” The next time it encounters 14 blue pixels, it uses only the code shorthand. By contrast, when it encounters a row that has a gentle gradation from blue to aqua to green, it needs to store a description for every pixel along the way, requiring more data. What actually happens in technical terms is more complicated, of course, but this example is a good mental model to keep in mind when designing GIF images for maximum compression.
Transparency
You can make parts of GIF images transparent so that the background image or color shows through. Although all bitmapped graphics are rectangular by nature, with transparency, you can create the illusion that your image has a more interesting shape. Transparency is discussed in detail later in this article.
Interlacing
Interlacing makes a GIF display in a series of passes. Each pass is clearer than the pass before, until the image is fully rendered in the browser window. Without interlacing, some browsers may wait until the entire image is downloaded before displaying the image. Others may display the image a few rows at a time, from top to bottom, until the entire picture is complete.

Over a fast connection, these effects (interlacing or image delays) may not even be perceptible. However, over slow connections (modem or mobile carrier network), interlacing large images may be a way to provide a hint of the image to come while the entire image downloads. Whether you interlace or not is your design decision. I never do, but if you have a large image and an audience with a significant percentage of slow connections, interlacing may be worthwhile.
Animation
Another feature built into the GIF file format is the ability to display simple animations. Many of the spinning, blinking, fading, or otherwise moving ad banners you see are animated GIFs (although Flash movies have also been popular for web advertising).

Animated GIFs contain a number of animation frames, which are separate images that, when viewed together quickly, give the illusion of motion or change over time, kind of like a flip-book. All of the frames are stored within a single GIF file, along with settings that describe how they should be

played. Settings include whether and how many times the sequence repeats, how long each frame stays visible (frame delay), the manner in which one frame replaces another (disposal method), whether the image is transparent, and whether it is interlaced.

Adobe Fireworks and Photoshop have interfaces for creating animated GIFs. In Photoshop CS5 and earlier, use the Animation window. In CS6, use the Timeline window and select “Create Frame Animation.” A web search will turn up many dedicated animated GIF tools, many of them free.

Choosing the best image formats , 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.