demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Bitmap Images for the Web: Formats and Optimisation Options

html / images

Estimated reading time: 4 minutes, 6 seconds

GIF (Graphics Interchange Format)

NASA
The NASA logo, a good example of the correct use of the GIF format
Mnemonic:

GIF is for Graphics.”

Color depth:

8-bit (256 color)

Used for:

Graphical art (any image that consists mostly of flat areas or lines of contiguous color: most logos, diagrams, drawings, maps, cartoons, arrows, etc). Text that must be turned into bitmap images is usually saved in GIF format. may be considered as an alternative format in some circumstances.

Compression:

Uses LZW compression algorithm in run-length encoding. Lossless, assuming that colors in the original image are the same as the target palette of the GIF.

Optimal settings:
  • Optimal GIF SettingsMinimise the number of colors (you can type in and experiment with the number of colors used; it does not have to be what or any other image editor suggests).

  • Try using the “Restrictive” palette first. “Perceptual”, “adaptive”, “selective” or “greyscale” may also be options.
  • Try to keep “Web Snap” at or near 100%.
  • Try to keep “Dither” off.
  • Do not attach metadata unless you are actively using it as a means of captioning the image with PHP or part of a sitemap
  • “Transparency” may or may not reduce file size. Experiment with removing the background to the image and turning “transparency” on and off.
  • “Matte” only matters if “transparency” is on. If it is, “matte” should be set to the predominant background color the image will be set against.
  • Finally, experiment with interlacing. If turning it on reduces file size, leave it on.
Transparency:

One color only may be specified as transparent. (Tends to produce “halo” effects when used against colors that are different from its assumed background color.)

Other features:

Can be animated.

JPEG (Joint Photographers Experts Group)

Christine Adams
A photograph of Christine Adams, saved as a JPEG
Mnemonic:

“JPEG is for Photographs.”

Color depth:

24-bit (16,777,216 colors)

Used for:

Photographs.

Compression:

Uses lossy compression. Technically: 8 × 8 pixel blocks are transformed via a discrete cosine function into a quantized matrix of coefficients. Less technically: JPEGs can appear “blocky” at higher compression ratios.

Optimal settings:
  • Optimal JPEG SettingsIgnore “Low”, “Medium”, “High” pre-settings.
  • Start the “quality” slider as low as possible. 20 is a good start, but you may be able to go as low as 10 to 15 in some cases.
  • Don't think of the slider as “quality”, but as compression, with high compression to the left, low to the right.
  • Judge the visual quality of the image at normal resolution (i.e. no zoom). If the quality is acceptable, leave the slider position where it is (or even move it down a notch). Otherwise, work the slider up in small increments (steps of 5 or 10) until the quality becomes acceptable.
  • Do not attach metadata unless you are actively using it as a means of captioning the image with PHP or part of a sitemap.
  • Ensure that you convert the image to sRGB.
  • Turn “progressive” on for images greater than 10K in size: it will usually be smaller a smaller file size, and the image will feel like “loads faster” while looking better on high-density displays such as Retina-based Apple devices.
  • “Blur” is not usually required, but may be useful if the image was already blurred to begin with. Higher levels of blur will allow the JPEG compression algorithm to further decrease file size.

PNG (Portable Network Graphic)

Google Maps icon
Google Maps icon, a good example of the PNG format
Mnemonic:

GIF and JPEG met, married, and had a baby named PNG

(Meaning: PNG combines many of the best features from both formats, as a child can inherit the best qualities of both parents).

Color depth:

8, 16, 24, or 32-bit

Used for:

Lossless compression of graphics or photographs. Images for which an alpha mask is required. Can, in theory, be animated, via the APNG format. Often a smaller file size than GIF, and therefore often a better alternative ( is another possibility).

Compression:

Uses a lossless compression algorithm. Tends therefore to have large file sizes.

Optimal settings:

8-bit PNGs follow the optimization guidelines for GIFs. 24-bit PNGs follow the applicable optimization values for JPEGs.

Transparency:

8-bit alpha mask (256 levels of grey, the same as PhotoShop). Not supported well by Internet Explorer before IE8.

Once you have stepped through the workflow we have discussed: creating the original image in as high a resolution and color depth as possible; saved it in an originals folder in your site; reducing the image size, eliminating excess pixels; and saving the image as a GIF, JPEG or PNG, with optimized settings, you are ready to add the final web-ready image to your page. (You don’t need PhotoShop to optimize images: online resources such as Kraken can also do a good job of compressing your files.)

“What About Format X?”

Occasionally other web image formats are proposed, such as JPEG 2000 and, more recently, WebP. None of these have yet gained a substantive foothold. While WebP is promising, it has its detractors, and is not yet supported by PhotoShop or the majority of browsers. Until that situation changes, I'll leave coverage of other formats as a side note.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.