Web Graphics Design

Web Image Basics

It's hard to imagine the web without visuals; in fact, I strongly feel that the web became so popular because images could be embedded inside web pages. We'll start by understanding basics of web images and also look briefly at the popular image formats on the web, the differences between these formats and how we can add images to web pages.

JPG Image Format

After a brief on the JPG file format we learn how the JPG compression algorithm works on plain and Progressive JPGs. Articles on images of high color and how they are best suited as JPGs build a foundation for articles on optimizing JPGs and JPG usage. Lastly, we will learn the best way to scan photographs and how to optimally save them as JPGs.

Gif Image Format

Articles in this section provide a deeper understanding of the most popular image format on the web - GIF file format. Topics of other articles in this section include GIF compression algorithm, Interlacing and Transparency features, Anti-aliasing, Dithering, Gif Optimization to decrease the file sizes, an introduction to Animated Gifs and more.

Animated Gif Images

Animated Gifs are be found all over the web. We will first take a detailed look at them and learn how we can create a simple animated Gif and a more complex animated Gif banner using popular programs and software. Programs such as Jasc Animation Shop, Ulead Cool 3D and Xara 3D have built in animation special effects that we can apply to our images by simple drag and drop or selection interfaces.

Favicons and web sites

A favicon is a small image usually acting as a web site identifier as its saved along with the URL in the Bookmarks/Favorites folder and also displayed in the Location Bar and Tabs in Mozilla and Netscape browsers. In this section you will learn how to create a favicon for your web site using popular favicon creation programs available on the web and how and where to put it on your web site.

Web Image Usage

All web designers at the start of their careers ask this question - When do I use a Gif and when should I employ a JPG?. I know this because I too had faced this predicament. So I've put a detailed discussion on the usage of Gifs and JPGs. The article on Using Gif and JPG in one image is for an advanced web designer and I would suggest that you first go through other articles before you read this.

Using images from the web
A discussion on using images from the web - copyright and ownership issues. Can you still use an image if you've modified it sufficiently?

Image Editing Programs

There are tons of image editing programs available in the market. They differ in features and, thus, their price. Here is a little piece of advice: take a good look at the features offered by an image editor and understand if it suits your requirements. For example, if your work mainly involves touch up to photographs, a vector based image editor will be of little use (if at all). Graphics tools from the following companies are briefly evaluated: