Animated Images, Transparencies and Backgrounds

Web sites use a variety of image types - both raster and vector formats. This provides developers many options, but raises the question of which format is best for which use case?

Let's review common image use cases, and present some recommendations and considerations for each of these.

Animations

An animated graphic is any picture that has more than one frame and manages to depict movement of some form or another.

Multiple formats support animation (GIF, PNG, and WebP), but due to its comprehensive browser support, most sites use GIF (note—it’s limited to 256 colors with 1-bit transparency).

Transparencies

Transparent images are useful when you are not certain of the background color on which your image will be displayed. With binary transparency, one color from the indexed color palette is marked as the transparent color. More advanced is alpha transparency—the transparency information is stored in a separate channel, the Alpha channel.

Simple transparency requirements can be addressed with GIF and its binary transparency. PNG, WebP, JPEG 2000 and JPEG XR provide enhanced capabilities through the use of alpha channels.

Background Gradients

Just as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Gradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen.

Using gradients declared in CSS, rather using an actual image file, is better for control and performance.

Logos

Logos are either purely graphic (symbols/icons) or are composed of the name of the organization (a logotype or wordmark).

Vector formats (e.g. SVG) will provide the best quality for logos (smooth edges, resize with no loss of quality, small file size), but you can use a raster image format (typically PNG) with high resolution.

Clip Art

Clip art collections of pictures or images can be imported into a document or another program. The images may be either raster graphics or vector graphics.

GIF is well suited for solid colored images (as in cartoons or clip art). GIF images can also be placed on a web page with a clear background, so you can layer them.

Mezzanine Images

Mezzanine images typically have a minimum resolution of 300 dpi (dots per inch) and are most commonly associated with photographs.

Hi-Res JPEG has become quite popular for web-based mezzanines (originals) as it still balances quality and size via lossy compression. Consider PNG if you want the top quality with lossless compression. To best enable image use across multiple mediums (e.g. web and print), TIFF (Tagged Image File Format) is your best bet for originals. Remember you’ll need to convert from TIFF to web-friendly formats.

Responsive

A responsive image is an image that adapts in response to different environmental conditions: adaptations can include, but are not limited to, changing the dimensions, crop, or even the source of an image. The use of responsive images can contribute to improvements in web performance by sending smaller files to mobile users with slower connections.

JPEG is well suited when designing for cross-browser compatibility. When displaying images on compatible browsers, WebP (Chrome and Opera), JPEG 2000 (Safari), and JPEG XR (Internet Explorer and Edge) are excellent choices.

Sprites

Sprites are used in web design as a way to improve performance by combining numerous small images or icons into a larger image called a sprite sheet or tile set.

Sprites are also used for icons, where GIF/PNG may be best, but we occasionally see JPEGs.

Cascading Style Sheets (CSS) are often used to help display the images, however the sprites themselves are normally PNG or JPEG.

Icons

Icons can be used as buttons or visual indicators on a website. Similar to sprites (above) it is often the case the icon sets are grouped together. There are many options for this type of image depending on use, however SVG’s provide the best performance, icon fonts could also be used if managed well when loading the page. Outside of this normal formats such as GIF and PNG can also be used. If loading an icon set (either as a font or a sprite) be sure to measure the cost of loading the icons you do not use.

Rounded corners or Layout pieces

Using images to help fix styles, heights or widths on screen or to use effects like rounded corners is unfortunately still commonplace on a lot of web sites. In short, do not use images for this, instead use CSS.

Rounded corners is pretty well supported in all browsers and allows for some more advanced settings as seen below.

Summary

Choosing the optimal format for your use case is essential to maximizing the impact of your images. Remember that each format has its advantages and disadvantages - your final decision will likely need to balance these considerations.

Learn more about managing multiple online image use cases with Akamai Image Manager.