HTML and CSS Reference
In-Depth Information
Grayscale on Internet Explorer
One interesting note in working through i le sizes is the use of a special CSS property recog-
nized only by Internet Explorer. Some designers use grayscale settings to reduce the size of
their graphics or for the ef ect of grayscale. If you want an interesting option using Microsot
Internet Explorer, you can write a little CSS code to convert color i les to grayscale. Use the
following snippet in a style dei nition:
<
style type
=
”text/css”
>
img
{
filter
:
gray
;
}
</
style
>
Figure 9-11 shows a color i gure (Figure 9-8) that is turned into a grayscale using CSS only.
188
Figure 9-11: Using Internet Explorer CSS grayscale fi lter.
Using this technique is a quick way to see how the i gure looks in a grayscale before rendering
it in a grayscale mode. If you're updating a site, and you want to view the images on the page
in grayscale, you can add the CSS and test it on Internet Explorer i rst. If you want to keep the
i le size down and the quality up, a JPEG image in grayscale instead of color will cut the i le
size in half.
