Hide
No website would be complete without stunning visuals. These visuals may be in the form of photographs, diagrams, drawings, designs etc. Graphics are an effective communication tool. They can help convey your message vividly, should you find it to difficult to express in words.
Source for graphics related to your site content. Further narrow down your selection to only the most relevant graphics. Below is a list of website which you may obtain free graphics from:
Bear in mind however, that though the graphics are free of charge, you may be required to acknowledge the site, due to copyright infringements. Alternatively, you may consider purchasing images from other websites if you have the financial ability.
If you have ample time, you may consider creating your own graphics. Taking your own photographs gives you the opportunity to determine how your photo should be: the composition, lighting etc. As an added advantage, your site is kept 100% original.
TOP
Hide
Let's take a look at some commonly used graphic file formats.
Comparison between different graphic file formats
| Category |
GIF |
JPEG |
PNG |
| Full Name |
Graphic Interchange Format |
Joint Photographic Experts Group |
Portable Network Graphics |
| Compression Method |
LZW |
Lossy |
Lossless, Deflation |
| Color Depth |
1 to 8 |
8-bit, 12-bit, 24-bit |
1,2,4,8,...,64 |
| Quality |
256 colors |
Depends on level of compression |
Usually high |
| Animation |
Yes |
No |
No |
| Transparency |
Yes |
No |
Yes |
From the comparison, we can see that PNG format is actually the best format for web graphics, and it is endorsed by W3C. It has the full range of color depth and support transparency, while size is kept small. However, the shortcoming is that only modern browsers support PNG transparency properly. Read more in the explore deeper section.
Explore Deeper
Hide
PNG Transparency across browsers
It is important to note that the latest browsers now support PNG transparency properly. They include I.E7, FireFox2, Opera9.1, Safari1.2 and other commonly used browsers in their latest version. However, there are still quite a number of people around the world using browsers like I.E6, which does not support PNG transparency properly. This would mean that if we want nice graphics with beautiful curves overlapping other content on our web page, we will be restricted to the GIF format, which support only 256 colors.
There are ways to 'hack' the browser in order for the PNG image to display properly. Do note that this piece of content will be obsolete in the years to come (when everyone around the world is using the latest browsers already) as technology moves at great pace.
For I.E6 (currently one of the most common browsers around), apply these attribute values to the div containing the img tag:
<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');" >
</div>
This method does not work with background images defined by external style sheets. The real solution will still be to wait for the people to upgrade their browsers.
TOP
Hide
GIF
GIFs are most suited for diagrams and drawings, as they will produce sharp, crisp lines. Also, being one of the industry’s first formats, you can be assured that it would be supported by most browsers.
JPEG
JPEGs are best suited for color photographs and complex images, due to their support for full color (24 bit) images. In addition, images are displayed quickly due to the high compression ratio.
PNG
At present, you should avoid using PNG files, as viewers may not be able to view graphics correctly. However, this format will gradually replace the GIF format in the future. Future readers of our website should consider using PNG instead of GIF format.
Most of the time, before any image can be put on your website, they might need some editing, like resizing, changing the brightness and compressing it. There are popular programs like the Adobe Photoshop, Adobe Fireworks and Paintshop Pro which can do the job. However, these are commercial programs which may be costly to purchase. GIMP is an open source image editing program which is free-of-charge and can be downloaded from GIMP.
Finally, avoid overcrowding your webpage with too many images. Though pretty to look at, too many images may be distracting for your viewers. There is also the need to consider the viewers of your website who may not have high speed internet connections. Images will take a longer time to download, thus affecting their willingness to view your web page.