Chapter 8: Graphics and Color

Find a good balance between images and colors so that you do not overwhelm your visitors with the visuals and/or make them wait for your image to load while they are casually browsing. Use a good color combination (color palette) that can communicate to your readers, give them the kind of emotional response you want, and guide them throughout your site. Test your colors on a variety of browsers and test your download speeds so that you know your images do not discourage your readers.

Understanding Graphic File Formats

GIF: Graphics Interchange Format – designed for online graphics. It uses a “lossless” comprehension technique and will not lose your colors when the image is compressed. GIFs use no more than 256 colors, and the less color you have, the more the image can be compressed. Because of this, a GIF is a good format to use for simple graphics and line art. It is not a good choice for photographs. One special property for GIFs (and one I’m sure I’ll be using frequently) is the GIF transparency. You can choose one color in the GIF to be transparent, for instance, the white color background bordering an image. A second special GIF property is its capacity to store multiple still images and display them in succession – GIF animation. When you create the animation, you can determine the time it takes between shots and how many times to replay it.

JPG or JPEG: Joint Photographic Experts Group – Who in the world names this?? I’m glad we can just call this the j-peg format. This format was designed for photos. It stores 24-bit information, allowing millions of different colors. Unlike the GIF, though, any compression to your file will result in the loss of color on the image. This is a “lossy” compression routine. JPEGs have relatively quick download times, so at least there is that to make up for the color loss. In Adobe Photoshop, when you choose to save as a JPEG, it will show you the approximate download time based on the file size.

A word of advice: remember to save your GIF and JPEG files as a renamed file or a duplicate of the original. These formats compress the original image, and once you save it as a GIF or JPEG, you cannot return to the original quality.

PNG: Portable Networks Graphics – specially designed for the web. It is a lossless 8-bit format and is also able to compress images to sizes smaller than the GIF. PNG supports transparencies and interlacing (the gradual display of a graphic in a series of passes as it comes to your browser) but it does not support animations.

SVG: Scalable Vector Graphics – this format is a language for describing two-dimensional graphics using XML. SVGs sound like they are used commonly in HTML, XML, JavaScrip and CSS. It saves lines and curves, images, text, animation and interactive events. The key point about SVGs is that they are scalable and fit for web browsing. SVG graphics can be viewed bigger or smaller than their originals, making them responsive and cross-platform compatible.

Vector graphics display images as geometric formulas while raster graphics display images pixel by pixel. Most computer displays are of the raster type. There are also interlacing and progressive displays. Interlacing and progressive formats go through different passes as the graphic is displayed on your screen. As more data is gathered from the server, the clearer your graphic image will become.

Using the Image <img> Element

The image element <img> is by definition a replacement element. The browser replaces the element with an image in its place. The browser will treat the image as it treats a character; the normal image placement is the same alignment as the rest of your text and is at the baseline. In addition to the mandatory source attribute (src), it is good practice to also include a title and alternative text in the <img> element. The title is the text that shows up when your cursor is hovered over the image. The alternative text is what shows up if the browser cannot load the image for some reason. Your site should still be navigable even if the images are not showing. Here is an example:

<img src=”image.jpeg” width=”258” height=”130” alt=”Company Logo Graphic” title=”Click the logo to view the company home page”>

When you create image and convert to a hypertext image, that is, the image is now clickable and will redirect your page to a new location, the browser will default to displaying a blue border around the Image. After you click the image and return to the original page, there will be a purple border around it. Most of the time, we’ll go, “Why is there such an unnecessary feature?” The border will not match our design and we can figure out that the image is clickable when we hover over it. To get rid of the border, simply add this to your html code where the <img> shows up: <style=”border: none;”>


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s