Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Exercise: Web Images

DES300 Web Design I

Exercise: Web Images

Assignment

Convert the image files provided to Web approriate formats, color spaces and sizes, and then embed them on a Web page.

Procedure

1. Get copies of the provided image files from me (the instructor).
2. Open each in Photoshop.
3. Resize each image (Image > Image size). Although there is no specific "correct" size for Web images, but you don't want them to be too big. The average Web page is 800 pixels wide so your images should be at least that small. Typical Web images range fromm 200–400 pixels in size, but that can vary depending on their use. For this exercise, resize each image to 300 pixels along the longer edge.

Important! Before you resize an indexed-color image (GIF or PNG-8) you must convert the color mode to RGB in Photoshop! (Image > Mode) Then resize it, and resave it. Otherwise the image will scale badly.

4. Convert the image color space. The World Wide Web uses the sRGB color space. You can convert an image by choosing Edit > Convert to profile. Or, you could skip this step and make the conversion in the "save for Web" dialog box (below).
5. Choose File > Save for Web & Devices. A dialog box will appear with all sorts of options. First, choose a file format (jpeg, gif or png). Which one you use depends on the images:
• JPEGs (Joint Photographic Experts Group) were designed for photographic/continuous tone images (paintings, fine art). Jpegs can be compressed a lot, making for very small files (smaller than pngs; see below).
• GIFs (Graphics Interchange Format) are used for flat, graphic images (logos, cartoons, comic art with minimal or no shading). Gifs can also contain (simple) transparency and animation.
• PNG-8s (Portable Network Graphic) are like gifs, used for flat graphics with or without transparency. They tend to be of higher quality and smaller size than gifs. But they can not contain animation. Also, older versions of IE (6 and below) sometimes have a hard time displaying pings, and can even cause crashes in IE 4.
• PNG-24s have a bit depth of 24 (8 bits per channel) like TIFFS so they are well suited for photos; they can also contain transparent and semi-transparent pixels. As a result, png images are a higher quality than jpegs, but also much larger. In addition, older versions of IE (6 and below) don't display png transparency and can have other issues with the format (see above). You may use them for this exercise—just be wary of their size.
6. Choose a quality setting (for jpegs) or number of colors (for gifs and png-8s). The goal is to use as few colors as possible, or reduce the quality as much as possible, and still have the image look decent. Obviously there will be a certain amout of tradeoff. Keep your eye on the file size (lower-left corner of the screen); for purposes of this exercise, the sum of the 9 images should not exceed 300k total.
7. If the image contains transparency, make sure that you chosse a format that supports it, and that you check that option.
8. If you skipped step 4 above, make sure the "Convert to sRGB" box is checked.
9. Choose "Save." Give this file a different name (or location) so that it does not overwrite the original. Make sure you include the file extension in the name (.jpg, .gif, or .png).
10. Repeat for the remainder of the provided images.
11. Create a root folder for this exercise called "yourName_webImages," and place the photos you saved for the Web inside.
12. Create a new xhtml file. Save it in the exercise root folder as "yourName_images.html."
13. Use the <img> tag to place all of the imges onto the Web page.
14. Test it in a browser.
15. Give me the root folder via jump drive. Make sure you give me the root folder with the converted images AND the html file!

Deliverables

Place all of your converted images (not the originals) in a folder. name the folder yourName_imageEx and give it to me via jump drive.

Deadline

Week 4: Due, beginning of class.

Class schedule

Syllabus

Student resource index