Web Graphics – Overview
On this page:
“A picture is worth a thousand words” – we all have heard this old saying. This is usually true, even in the field of web design. The main purpose of hosting a website on the Internet is providing informative content, and this is the reason that the Internet has become the richest source of information. Text based content is the best way to provide information. However, in some cases, only text cannot help. Graphics are more helpful in this context. The reason - an appropriate graphic can express exactly that which only text cannot do.
Before using graphics for your website, make sure that the graphics you are going to use, match your site’s topic and content. For example, if your site is about computer hardware, it is of no use to provide graphics of buildings or office premises, which have no link with your site topic. Graphics enable a reader to know what he/she is going to get from that particular web page. So, you can see how powerful graphics are.
How to get graphics
There are a number of ways to acquire graphics for your website. You can create them yourself or can import from an outside source. For photographs, you can scan them, save them in your computer and use them. You can also import images directly from your digital camera (no need of printing and scanning).
Buying commercial clip art is another potential source of images. You can also copy graphics from other web pages, provided the graphics are not protected by copyright laws. To use any image from the web, you must get permission from the original owner.
Graphics Software
Once you have your graphics ready, you can open the files and edit them using any graphic editing software - ranging from the humble MS Paint to the big daddy of design Adobe Photoshop.
Traditionally, the big distinction in graphics programs is between bitmap-based (Photoshop, PaintshopPro, painter) and vector based (CorelDraw, Illustrator) system. Bitmap-based programs let you work with photographs and create graphics by specifying the color value for each pixel. Vector based programs let you draw stuff using lines, geometric shape etc.
Note: A pixel (one little dot) is the smallest unit of graphic information.
Let us see how you can edit an image using Photoshop. For example, we have imported an image of a flower like this:
Resizing:
This imported image may not have the exact size you need for your website. So, you need to resize the image. To resize image, using Photoshop, click on Image menu and then click on Image Size. The Image Size dialog box will open like this:
Now, change the height and width of the image (Pixel Dimensions) and click on OK. The size of the image will be changed.
Color change:
This is the thing you love to do with your web graphics. Just click on Image > Adjustment > Hue/Saturation and change the hue, saturation and brightness. It can enrich even the most washed out photos. The color of the flower can be changed like this:
Cropping:
You can easily remove the portion of an image that is not required – the Rectangular Marquee Tool can help you in this regard. Click on the Rectangular Marquee Tool and select the section of the image you want to keep. Now, go to Select > Inverse and press Delete key of your keyboard. The portion that you don’t want will be removed from the image.
This is how we can make changes in the previous flower image.
Graphics and color
It often happens that one image looks different in different browsers and operating systems. Therefore, make sure you are using the web safe palette of 216 colors.
Visit http://www.lynda.com/hex.html to know about web safe color palettes. You can also visit http://www.oreilly.com/catalog/wdnut/excerpt/web_palette.html to view the chart containing 216 non-dithering colors of the Web Palette.
It normally takes 24 bits of data (8 bits each for red, green and blue) to describe the color of each pixel on the screen. This can give each of these colors (RGB) a brightness level between 0 and 255 and by mixing them 16,777,216 colors are possible. Most of the monitors can display these colors but some computers cannot accommodate all these colors. So all these colors are really not required for every work you do.
For example, if you work with chart and diagram, 16 colors are enough, so you will only require 4 bits of computer video memory per pixel.
Want to know more about graphics and colors? Go to http://www.wpdfd.com/wpdgraph.htm
Once you have set the basic design, you can experiment with different enhancing features like fills, strokes and effects.
Supported Graphics File Formats
Graphics are the most memorable elements of a web page. However, in order to use graphics on your page, you must understand the file formats and limitations dictated by the web.
The web graphics file formats, commonly supported by most browsers, are – GIF and JPEG (these files have .jpg or .jpeg extension). These file formats are compressed file formats, designed to load fairly quickly in the bandwidth-deprived world of the web. However, both these formats have some drawbacks. So, new standards like PNG (an open standard and promises to replace GIF) and FIF are also appearing in this field to give these common formats a tough competition.
To create GIF or JPEG graphics, you only need to save the image in desired format. All the graphics software support these formats but you need to have. JPEG is a better option for inserting photographs while GIF is better for other type of graphics.
GIF
The GIF or Graphics Interchange Format was developed to store multiple bitmap images into a single file for easy exchange over computer networks like the Internet. It is also the oldest graphics file format on the web, and almost all browsers support it (except Lynx). GIF graphics support up to 8 bits per pixel (means 256 colors), 4 pass interlacing, and transparency and uses a variant of the Lempel-Ziv Welch compression algorithm.
There are two types of GIF file formats:
- GIF87a – supports interlacing and storage multiple files.
- GIF89a – extends the GIF87a specification, adds transparency, text comments, and animation of text and graphics.
JPEG
JPEG images work well on continuous tone images like photographs or natural artwork. But it is not so well for sharp-edged or flat color art like lettering, simple cartoons or line drawings. JPEG files support 24-bits of color depth or 16.7 million colors.
However, try avoiding editing and saving the same JPEG file over and over again, as the images will lose quality.
How to Insert Graphics into a Web Page
Graphics are inserted in a web page by means of the image tag or IMG tag. The simple HTML code will look like this:
<img src=”image/flower.gif” width=128 height=140>
Here, src is the source attribute that specifies the name of the image file to be displayed. This src statement must specify the appropriate path to the image file – the path can be absolute or relative. An absolute path specifies the complete URL of the image file while the relative path specifies only the path of the folder from which the image tag finds the image file. In the example given above, the file flower.gif is located inside the image directory.
Avoid Using Large Images
While inserting graphics to your website, make sure that you are not inserting huge image file, since the larger the image, the longer it takes to load the page. And the longer it takes to load the page, the more likely your visitor will go somewhere else.
Try avoiding using graphics that are larger than 30 KB. Also, try to limit the size of image files of one web page to less than 40 KB. If graphics are small in size, web browsers will automatically display them fast. So, don’t make your visitors wait too long to see them.
Concentrate on load time
The load time of your graphics is of critical importance. Here are some tips that you can follow to keep your load times reasonable.
- Consider breaking large image up into several smaller ones and arrange them together with the help of a table.
- Optimize your graphic files – discard information about colors that are not used in the image, the file size can sometimes be greatly reduced, with no loss in quality.
- Use the interlaced GIF format. The images will load gradually; you will get a blurry image that becomes sharper and sharper until it is fully loaded. Though it doesn’t load faster, but it seems that it is loading faster. And it’s more convenient for the user, because they can get the idea of what the image is without waiting for the whole thing.
Importance of Graphics
Matching graphics to written text increases the importance of your site and makes it more noticeable. Readers spend more time on your site and learn about what is on your site, no matter if you are selling something or simply providing information to your visitors. For example, people will spend more time inside your online store if the store has attractive product catalogs designed with interesting graphics – that will interest the readers on what you are offering.
Graphics, with proper color and style, establish the mood and style of your website much more readily than words or charts. Graphics help to convey web navigational message. For example, words highlighted with a darker shade than the background is likely to be links; place the mouse over it to confirm that it is a link, as the highlighting changes.
Modern web graphics, now more than ever before, are able to go beyond words. They can inform as well as entertain, and are also the basis of a networked experience like a game, a conference, or a learning experience. But the most important of all, the websites with wonderful web graphics are exciting and memorable.
back to top
