1. Tech

Your suggestion is on its way!

An email with a link to:


was emailed to:

Thanks for sharing About.com with others!

CSS Made Easy - CSS-I
Part 1 - Create striking image effects that conserve network bandwidth
An Article by your Guide Bradley Mitchell
More of this Feature
Part 2: Sample CSS-I Effects

Join the Discussion
"I have recently gone from Windows 98 to Windows NT Server, and for some reason, whenever I am surfing the Net and click on any page with graphics, my processor utilization exceeds 100% and I am disconnected. I've been forced to surf the web with no graphics... ."

Related Resources
Intranet Resources
Network Programming Resources
Web Server Resources

Tastefully incorporating graphics to a Web page dramatically improves its visual appeal. Too much imagery can drown an audience, but too little imagery (or none at all) renders a page dull, flat, and visually uninteresting.

Imagery and Networks

Large or detailed graphics considerably increase the load time of Web pages in many cases. Home networks with dial-up Internet connections are especially sensitive to the use of images.

Business networks, on the other hand, tend to offer high-speed connections and relatively few hops between segments. Compared to home networks, intranets offer great opportunities to make use of graphics. Many employees sport high-resolution monitors on their desktops or laptops. Many organizations also standardize on a single, current-generation browser that provide uniform HTML and scripting capabilities to content authors. Yet, in spite of these luxuries, intranet sites also tend to lack truly compelling visuals.

The CSS Approach

Those skilled in computer-aided graphic design traditionally have used powerful (and sometimes expensive) professional image production tools as part of Web content creation. This process can lead to visually interesting sites, but it requires a serious investment of time and talent that some are unwilling or unable to justify.

Alternatively, intranet and other Web developers may try using CSS to improve their visual content. The term CSS stands for Cascading Style Sheets, a Web technology that can prove extremely useful in better organizing and optimizing Web pages. CSS has received some criticism in the general press because historically not all browsers support it in a complete or standard way. However, CSS incorporates several very useful features including the one described below.

CSS Image Filters

CSS image filters are applied to an image after it is retrieved from the Web server. The browser internally performs the given image transformation before rendering. This technique conserves network bandwidth by not requiring that image effects be built into the images files on the server side.

Recall that CSS styles may be placed directly in the HTML file using the STYLE tag, or they may be placed in a separate file using the LINK tag; e.g.,

&ltlink rel="stylesheet" type="text/css" href="...&gt

Some of the more useful examples of filters appear on the next page using the following sample image.

CSS filters example image
To apply these example filters, simply include the code in a separate style file and embed the class name within the IMG tag of the containing HTML page; e.g.,
&ltimg class=... src=...&gt

Next page > Sample CSS Image Effects > Page 1, 2

©2015 About.com. All rights reserved.