|
Art
444 Lecture Notes
Optimizing
Web Graphics
To view images
in a browser we need to optimize them for web viewing. All images destined
for the Web must be in Grayscale or RGB mode (NO CMYK!) and should be
saved at 72 dpi (screen resolution). Make sure you're viewing your image
at 100% so you will see the actual size it will appear on the monitor.
To optimize
an image for web viewing you need to save it in a jpeg, gif, or in the
PNG file format. Because PNGs are NOT supported by all browsers at this
time, we will only save files as jpegs or gifs. File size of your graphic
is directly related to the download time of image in the browser.
The larger the file size the longer it takes to DOWNLOAD!
Image
Extensions:
gif, interlaced gif, transparent gif, animated gif: .gif
JPEG, progressive JPEG: .jpg
JPEGS
are compressed 24-bit graphics (millions of colors) -use for continuous
tone photographic images, or art with gradations & blends
GIFS are
8-bit or lower graphics (256 colors or less) -use for flat areas of
color, vector graphics
Using
Hexadecimal colors in your image editing program:
When creating irregularly shaped web graphics is it is important to use
hexadecimal colors in your image
editor so the background of your graphic to blend cleanly into the browser
background. Write down the hexadecimal code (#990000 etc.) of the color
you specified in the body tag or from Page Properties (Dreamweaver), and
type the color code in the Color Picker by clicking on either the
foreground or background color chip. Photoshop 5.5+ also has a Snap
to Web option within the Color Picker, which allows you to only use
browser safe colors while editing.
Saving
an image as a JPEG:
A jpeg is a lossy compression scheme. You can think of a jpeg as a piece
of paper that you crumple up into a very small ball. When you uncrumple
it to its full size, it is analogous to opening the jpeg file up to view.
When working with continuous tone or photographic imagery usually the
best way to optimize the image for web viewing is to save it as a jpeg.
Use the Save for Web (File>Save for Web) feature in Photoshop
5.5+. Make sure JPEG setting is selected. Set the Quality setting
to specify the amount of compression. Use medium compression or start
at a quality setting of 50 to 30. The idea is to get the smallest file
size without sacrificing too much image quality. On lower settings you
will often see pixel artifacts, which can be smoothed out slightly with
the Blur option - but be careful as this is easy to overdo! Uncheck
the progressive option if you don't want your image to download
in multiple passes. You can now save and name your graphic (8 characters
or less and in lowercase). Photoshop will add the .jpg extension automatically.
Saving
an image as a GIF:
Saving a 24-bit graphic (millions of colors) as a Gif reduces the image
to colors 256 colors or less. Vector graphics or "flat" graphics
with broad areas of a single color work best with this format. Use the
Save for Web (File>Save for Web) feature in Photoshop 5.5+.
Make sure Gif setting is selected and select the Adaptive
color reduction algorithm. Choose the least amount of colors that will
give you the smallest file size and without noticeable degradation to
the image. Use the arrows to drop or add one color at a time. You can
also select and delete colors on the color table if they seem redundant.
Use one of the Dither options (diffusion, pattern or noise) to help blend
colors better with the Dither slider option. The Web Snap option
allows you to conform colors in your image to 216-color web palette based
on tolerance. Control the amount with the slider. Uncheck the Interlace
option if you don't want your image to download in multiple passes.
You now can save and name your graphic (8 characters or less and lowercase).
Photoshop will add the .gif extension automatically.
Saving
an image as a Transparent GIF:
Using layers and the Save for Web feature in Photoshop
5.5+ you can create graphics with transparent backgrounds. These can be
used on top of a tiling background image so an image appears to be floating.
Otherwise, you would see a square or rectangular box filled with a solid
color around the image.
Steps
for creating a Transparent GIF in PS 5.5+:
Make sure your image is on a layer (not flattened). Select it and delete
the background. You should now see the transparent grid showing through.
Go to File>Save for Web and follow the steps above for creating
a gif. Check the Transparency option box and click the Matte
option box to select a matte color to blend the edge pixels of the
image into the background color designated in the browser. Selecting the
right matte color will keep your graphic from having a "cutout"
appearance. For matte colors you will have the choice of None, White,
Black, Eyedropper Color or Other which brings up the Color Picker.
Save
the transparent gif as in the steps above.
HTML
to insert a graphic into a web page:
<IMG SRC="image.gif" WIDTH="100" HEIGHT="200">
Always include the Height & Width of your image in pixel dimensions.
Although your image will still display properly without the width/height
tags, it is important to do so as the browser will reload the page after
loading text to make room for the images. With width & height specified,
the browser will first load HTML text, etc. adding a correctly sized placement
box where the image will later load into. To find the pixel dimensions
of your image open it in Photoshop: Image>Image Size or open or
drag & drop it into the browser window. You will see then see the
pixel dimensions displayed on the browser's title bar.
To
link an image to another image or web page:
<A HREF="newpage.html"><IMG SRC="image.gif" WIDTH="100"
HEIGHT="200" BORDER=0></A> Use BORDER=0 to
get rid of the colored box around your image links. Remember external
site links are absolute and start with http://...
Border
Tag: For a colored border around your image use BORDER="1"
or specify the size in pixels of the border you prefer. The color of the
border will be the text color specified in the page's body tag. If the
image is a link, then the border color use the specified LINK, ALINK and
VLINK colors.
Alt Tag:
If you use
the Alt tag, text will be placed inside the bounding box of a graphic
before it downloads. Only works then height & width are specified
for an image.
|