Graphic Design

Section 1: Introduction

Graphic design is the art or profession of visual communication that combines images, words, and ideas to convey information to an audience, especially to produce a specific effect. - Dictionary.com

Graphic design is important because we perceive information on many levels, both verbally and non-verbally.

• Graphic design conveys a sense of your organization in a visual and non-verbal way, and can enhance the readability of your materials by laying them out in a way that guides the reader's eye through the messages.

The main purpose of this topic is to teach you how to use graphics effectively, and to give you an introduction to the principles of graphic design.

• The discussion will also cover the major formats for web images and how to best use each type.

Section 2: Image Compression

Before discussing each of the major image formats, it's important to know something about image compression.

• Most images you'll run into on the web make use of some kind of compression.
• Image compression is a method of using algorithms to decrease file size.
• There are two types of compression algorithms: lossy and lossless:
  • Lossy compression algorithms take advantage of the inherent limitations of the human eye and discard information that cannot be seen.
    • Most lossy compression algorithms allow for variable levels of compression and as these levels are increased, file size is reduced.
    • At the highest compression levels, image deterioration becomes noticeable.
    • Lossy is better for instances where some quality loss is acceptable in exchange for a much smaller image size.
  • Lossless compression algorithms reduce file size with no loss in image quality, though hey usually do not compress to as small a file as a lossy method does.
    • When image quality is valued above file size, lossless algorithms are typically chosen.
    • Lossless is the preferred method for created works such as logos or comics, text, or data files.
    • Data integrity is maintained regardless of how many times the file is compressed and decompressed.

Section 3: Image Optimization

Images are very important because they will make your web pages look nicer and more attractive.

However, high quality and beautiful images are always huge in file size, and consequentially make your pages load slower and consume more bandwidth.

Look at any webpage, and you will see that most of its load time comes from images. Your website will be needlessly slow if you don't decrease the sizes of these images.

Image Optimization Tools

Image optimization tools are designed to reduce the file size of the images, and indirectly reduce the load time as well as the bandwidth, while not compromising image quality.

It is not uncommon to reduce the weight of a picture by up to 70% with no noticeable decrease in quality (especially if the image is in .jpg format.)

There are several tools that accomplish this automatically.

• See this link for list of tools.
• This can also be done using free on-line image optimization tools like Image Optimizer, which lets you upload your picture, they process it, and almost instantaneously they will give you several optimized versions of your graphic for you to choose.
  • You pick the image that takes the fewest bytes while still retaining an acceptable quality level.

Summary

When you optimize an image and cut down its file size, you might think the difference in download speed will be negligible and you shouldn't bother.

But think about this: if you cut 40% off the file size of every image you optimize, you have cut almost 40% off the combined size of your entire page for every reader. That's a lot of extra speed.

Notes from Optimizing Images.

Section 4: Image Formats

File types

JPEG or JPG was named for the committee that created the standard, the Joint Photographic Experts Group.

• Is one of the most common image compression methods, especially for web usage
• Degrees of compression can be adjusted
• Uses a lossy compression method
• Best for photographs and realistic paintings with smooth variations of tone and color
• Avoid with line drawings and other textual graphics or icons

GIF stands for Graphics Interchange Format

• Supports up to 8 bits per pixel (256 colors)
• Because of color limitations is a poor choice for reproducing images with continuous color
• Good for simpler images with solid areas of color
• Is a lossless compression method

PNG stands for Portable Network Graphics – pronounced "ping" or spelled out P-N-G

• Uses a lossless compression format
• Created to improve upon and replace GIF
• Supports 24-bit RGB colors and greyscale
• Does not support other color spaces than RGB

BMP

• Pronounced bitmap
• Used commonly by GUIs, especially by Microsoft Windows
• Is an uncompressed format – means typically larger file sizes
• Supports anywhere from 1 to 32 bits per pixel

SVG stands for Scalable Vector Graphic.

• XML-based, open standard created and developed by the World Wide Web Consortium to address the need for a versatile, scriptable, and all-purpose vector format for the web.
• Can be resized to fit the computer screen or zoomed into without becoming blocky and losing sharpness.

Choose the right file type.

• JPEGs
  • JPEGs should be used for photographs and blurry background images where little of the intended look will be lost by the JPEG's compression.
  • If a graphic needs to be accurate or sharp, stay away from JPEGs. Most people would rather have a slightly bigger download than a messy graphic, so try not to sacrifice too much quality.
  • Sometimes a nice effect can be had from compressing an image as a JPEG – mess around and see what you can get.
  • For big images use the progressive option (like interlacing, but better) when saving the image for the apparent speed boost it causes.
• GIFs
  • GIFs should be used for the bulk of your images: simple line drawings, shapes, small icons, nothing too complex.
  • You won't lose any detail because GIFs are lossless, but you can decrease the palette to cut a GIF down to size.
  • If your image is going to be big no matter what you do (like most images with big dimensions), save the GIF as interlaced.
    • This serves a blurry version of the graphic first, and gradually paints over with the finished image.
    • This increases the filesize by a bit, but causes the perception of faster downloading.
    • Explanation
    • Example
• BMPs
  • Never use bitmaps for anything.
• To see what special things the different graphics formats can do, read this image formats profile.

Section 5: Image Tips

Eliminate Pointless Images

Some of images on a site can be dumped without much loss:

• Fancy animations generally add nothing to the page and only serve to distract.
• Avoid image rollovers unless absolutely necessary.
• Big heading images for a page can be dumped in favor of large text headings with an appropriate font face and color.
• Avoid GIF text.
  • This is when you use a special font and put it in an image, just in case the reader may not have that font and be deprived of your wondrous design.
  • Never put text in GIFs (or do it as little as possible).
  • Very rarely does it benefit a page to require have a certain font; usually a fancy font can be replaced by a more common font and it will look just as good.
  • Here is a gif text generator!

Cropping and Thumbnails

Use the crop tool in your image editor to cut out everything but the essential parts of the image.

• As a bonus, these essential parts of the images take up less space on your page, and your readers will be thankful that they didn't have to see any rubbish.

Another way of achieving smaller image size is to use thumbnail images.

• Thumbnails are miniature versions of a picture that load quickly and can be hyperlinked to the full size image.
• This means you make a smaller (in physical size and file size) image, and link it to the full version, which gives the user the choice whether to view the full graphic if they like the look of it.

State the height and width

You should always, always include both the height and width attributes in your graphics.

• It means the browser knows what size the image is going to be, so it can reserve that area and continue loading the rest of the page without having to worry about the graphic suddenly loading and pushing everything else around.
• The page will look far more developed if everything is laid out correctly at the beginning, increasing the apparent speed of the page.
• It also means that if a reader is in the middle of reading something, the text won't suddenly shift down when a graphic above begins loading, as the browser will have given it all the space it needs.
• Read this height and width tutorial.
• Another bonus is that anyone with images switched off will still get the same layout as people who have them on, avoiding the possibility of the page looking messed up without images.

Oh, and never use size attributes to make an image appear smaller, or else your readers will be downloading massive pictures when they only need small ones. That's just crazy…

• If you want a smaller image, resize it in your graphics program. A smaller- looking image will not be any smaller in file size.

Save as many of your graphics as possible as interlaced.

• This will make them download a rough version first, and then add detail later.
• This is great because a page with a pile of half-loaded graphics looks a lot more alive than a page with one or two finished images.
• This option is more useful for big graphics.

Section 6: Resources

Google offers JPEG alternative for faster Web

Graphic Design on the Web – Section from the Wikipedia article on graphic design; kind of dry but worth reading

Digital Leaf – good layout of basic graphic design concepts set of a mini-classes

Image Optimization Tools – 12 useful tools

Optimizing Images – image optimization without tools