Preparing Images for the Web

Preparing Images for the Web

LiliO Inc.
July 31, 2014

 Introduction

This document contain the most essential information you need to know to prepare graphic images for use on the Web.

 

 Overview of a website image editing workflow

 

  1. Project setup

     

    1. Gather the original images in the highest resolution possible and group them into a project folder.
    2. For easier project management and hypertext linking, establish a clear and simple file naming standard, and rename all files to match.
    3. Document the project’s color palette.
  2. Image editing

     

    1. Crop to focus on the relevant details.
    2. Set the resolution to 72 dpi.
    3. Resize to the final dimension.
    4. Adjust colors.
    5. Save images in a web-ready file format.
  3. Testing and approval

     

    1. Ensure that all images in whatever file formats used display colors consistently.
    2. Check files sizes to ensure adequate load times.

 

 Adjusting colors

Color choice is key to creating a unified design and attracting attention. Because the Web reaches a vast audience, it is impossible to know the type of equipment that will eventually display an image. Furthermore, images can display very differently on various computer monitors, even from the same manufacturer. Therefore, you cannot accurately predict what your image will look like. The challenge is insuring that the color that you intend to display is what most visitors ultimately see.

For whom do you design then? The answer is to determine, as best you can, what devices your primary audience uses and prepare your images accordingly.

 

 Web-safe colors

Although it will never be possible to predict exactly what colors viewers will see on each device, you can take reasonable steps to ensure they see approximately the same thing. Web-safe colors can help. The advantage of using web-safe colors is that all major browsers display them without dithering. One major shortcoming of the web-safe palette is its limited selection of lighter colors, which are often needed for backgrounds.

In Photoshop, you can apply the web-safe palette to an image by converting it to Indexed Colors and then displaying it in RGB Mode.

  1. From the Image menu, choose Indexed Color.
  2. Once the Indexed Color dialog box appears, choose “Web” from the Palette pop-up menu.
  3. Click OK, and the image will be reduced to 216 browser-safe colors.

The following charts displays all the web-safe colors as well as their HEX and RGB values.

 


Figure 0.1: Web-safe colors

 


 File formats

Selecting a file format is important both in terms of file size and appearance. The three file formats most often seen on the web are GIF (Graphic Interchange Format). JPEG/JPG (Joint Photographic Experts Group) and PNG (Portable Network Graphic).

 







Type

Extension

Best for

Compression Transparency










Graphic Interchange Format

.gif

line art with few colors

LZW 1 Yes





Joint Photographic Experts Group

.jpg or .jpeg

photographs and scanned images

Lossy No





Portable Network Graphic

.png

logos, charts, illustrations, and icons

DEFLATE Lossless Yes





 
Table 0.1: Image file formats

 GIF format

The GIF format uses LZW (Lempel-Ziv-Welch) compression, which looks at patterns of data and searches for changes along a horizontal axis. LZW compression is a lossless compression scheme, meaning no information is thrown away during compression. When saving a GIF file, the LZW algorithm checks for color changes along a horizontal axis. When a new color is found, the file size is increased.

For example, an original image, consisting of a black background and several horizontal white lines, was saved as a 6.7K GIF file. The image was then rotated 90 degrees and again creating a series of vertical lines. The resulting file size increases to 11.5K—nearly double the size of the original file. The file consumed 56K when noise was added to the same image using Photoshop.

The point to remember is that the GIF format is most efficient at compressing artwork containing horizontal patterns and large areas of flat colors.

Bit depth is another important consideration when using the GIF format. Bit depth refers to how many colors an image can contain. When saving a graphic in the GIF format using Photoshop, you are given a choice of bit depths from eight-bits to one-bit.

In our tests the same color image was saved using bit depths of eight, five, and one. The eight-bit image contained 256 (28) colors and had a file size of 41.9K. The five-bit image contained only 32 colors and had a file size of 21.5K. The one-bit image, containing only two colors, had a file size of 7.1K.

Which bit-depth should you choose? If you rely on file size alone, the immediate choice would be the 1-bit graphic. However, the poor quality of the image—caused by an insufficient number of colors— makes that choice unacceptable for most photographs. To choose the best bit depth, you must balance the file size with how the image should appear on the screen.

Even the highest available bit depth (eight-bit color) when saved as a GIF file, can contain no more than 256 different colors. Most computer monitors can display at least 65,536 colors, color film can record tens of millions of colors, and the human eye can distinguish over 100 million colors. To simulate missing colors, eight-bit GIF images rely on substitute colors, called dithered colors. Images that contain dithered colors often look noisy or spotted. Because of dithering, the GIF file format is best used when saving images that contain few colors—such as line art illustrations—and is not appropriate for most photographs.

 

 JPEG format

The JPEG format is used mainly for photographs because it offers 24-bit color (17.6 million colors).

JPEG images do not contain dithered colors because the format provides enough colors to match most of the colors in original images.

JPEG is known as a lossy compression format. This means that information is removed from the image every time an image is compressed. When information is deleted, a loss in quality occurs. Photoshop allows you to save JPEGs at four levels of quality: low, medium, high, and maximum quality. Maximum quality images are compressed the least, while low quality images are compressed the most.

For example, a particular color photograph saved using the maximum quality level had a file size of 16.3K, while the same photograph saved using medium quality had a file size of 6.1K.

When viewing photographs on web pages, most people cannot tell the difference between medium, high, and maximum quality JPEG images. Because of this, you can generally save JPEG images for use on web pages using the medium quality setting and take advantage of the smaller resulting file size.

While JPEG images are widely used and are quite suitable for web pages, it is important to note that the loss of data that occurs when images are compressed make JPEG images inappropriate for print media.

 

 PNG format

PNG (pronounced "ping"), is a raster graphics file format that supports lossless data compression. PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF) at a time when copyright controversies prevented legal and free use of GIF images. PNG has become the most used lossless image compression format on the Internet.

PNG supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colors), grayscale images (with or without alpha channel), and full-color non-palette-based RGB[A] images (with or without alpha channel). PNG was designed for transferring images on the Internet, not for professional-quality print graphics, and therefore does not support non-RGB color spaces such as CMYK.

 

 File size

An important goal while creating web graphics is to reduce their small file size so they will download quickly as quickly as possible. Tactics for reducing file size include the following:

  1. Limit the final image resolution to 72 dots per inch (DPI). Most computer monitors display at this resolution. Digital photographs and scanned images are usually set at a much higher resolution. They must be converted to a smaller size for the web.
  2. The dimensions of images prepared for the web should be limited to the maximum width display dimensions of the web page or column in which they will be shown. For example, if the width of a web page is 960 pixels (960px), the width of all images prepared for that page should also be 960px or less.
  3. Image height is less critical as web pages usually have no theoretical height limit. A reasonable image height would typically not extend far beyond a device’s field of view.
  4. For faster page loading, keep the total file size of an image below 25K.

 

 Popular image editing applications

 






Application

Description

License

OS









GIMP

The free software alternative to Adobe Photoshop. Not quite as intuitive as Photoshop, but full featured and free.

GPL

OSX, UNIX, GNU/Linux





Adobe Photoshop

By far the most popular image editing program.

Proprietary

OSX, Windows





Adobe Fireworks

Has unique features for preparing images for the web. Is often used in combination with Adobe Photoshop by web professionals.

Proprietary

OSX, Windows





Irfanview

A powerful and free image image processor. One key benefit is the ability to quickly optimize a large number of images at once.

Free

Windows





 
Table 0.2: Image editing applications

 

AttachmentSize
working-with-graphics-on-the-web.pdf375.96 KB