DF2254 Fundamentals of Web Design :: Art Institute

Week 7: Web Graphics

Student Showcase

We will take a look at any of your new work which is ready to share.

For the Color Project assignment, we will discuss the following aspects:

  • Overall strength of the design
  • Degree to which the following meet the project requirements:
    • site structure
    • content
    • HTML code
    • CSS code

GIF vs. JPG vs. PNG

Characteristics GIF JPEG PNG
Acronym for... Graphics Interchange Format Joint Photographic Experts Group Portable Network Graphics
Basic Image Format Bitmap Bitmap Bitmap
Color Support

8 bits per pixel (not 8 bits per channel), so only 256 possible colors for a given file

Allows 16.8 million colors per file

PNG-8 allows 256 colors per file
PNG-24 allows 16.8 million colors per file

Compression Lossless (no artifacting) Lossy (artifacting) Lossless (no artifacting)
Ideal for... Images with simple, solid areas of color, such as logos Photographs and images with variations of tone and color PNG-8: simple graphics
PNG-24: photographs and complex graphics
Not ideal for... Photographs Simple graphics such as logos N/A
Transparency Support Yes, but any given pixel can either be 100% transparent or 100% opaque; designer must consider Matte color No Yes, allows variable transparency in PNG-24; designer need not consider Matte color
Animation Support Yes No No, unless you use the APNG format (which is supported by only a few browsers and not supported by Photoshop)
Browser Support All All Was not supported by earlier browsers, but now supported by modern browsers (including IE 7 and above)
File Extension .gif .jpg or .jpeg .png
Sample Ideal Images



Any          

 

Sample of Artifacting

Logo saved as a JPG:
OH logo
OH logo

Same logo saved as a GIF:

logo
OH logo

Finally, saved as a PNG-24:

logo

Save for Web

The two big factors in web imagery are quality and file size. Image quality affects user experience. File size affects download time. Ideally, you will use only great-looking, small-file-size images for the majority of your web work. The process of balancing these two factors to create a web-ready image is called optimization .

Using Photoshop, you have a fairly easy way to save images for the web. If you take a moment, and use your knowledge of GIFs, JPGs, and PNGs, your result can be a highly-quality image at a reasonable file size.

To access Photoshop's web image capability, go to File > Save for Web and Devices .

  • In the Save for Web and Devices window, you can:
  • Zoom in or out to see various details in your image.
  • Compare up to 3 versions of the optimized image against the original.
  • Resize the image.
  • Control the quality and/or color palette of the optimized image.
  • View the resulting file size.
  • Set the Matte color to match a destination background color for images with transparency.
  • Experiment with various file types and qualities.

Matting

When working with transparency, it's important to consider the background color upon which the image will sit. On edges which are not perfectly straight up or down, Photoshop smooths out the jagged look of whole-pixel colors by using dithering. Dithering is a way of blending one color into another by using a small band of pixels between the two which provide a gentle transition.
dithering

 

Photoshop defaults to a Matte color of white. However, if you leave the Matte color as white but your background will be another color, the results look pretty bad. Make sure to find out what the background color will be, then dial it in for the Matte swatch in Save for Web and Devices.
matte

Save for Web Exercise

Click on each of the three images below to download the source files to your desktop (or right-click and select Save Target As.../Saved Linked File As...) Then try to get the highest quality web image while keeping it within the restraints indicated.

Image Download Desired Width Maximum File Size Additional Requirements
lemur-sm 400px 50KB  
stewie-sm 200px 10KB Maintain transparent background.
Destination background color: match the blue highlight on his laser gun
tv-sm 150px 12KB White background

When you are finished, ZIP the three optimized image files, and renamed the ZIP file saveforweb.zip.

CSS Images

CSS has two basic ways of incorporating images: as backgrounds and as bullets.

Here are two example CSS rules:

Background

body {
background-image: url(images/background.gif);
}

Bullet

ul li {
list-style-image: url(bullet.gif);
}

Dropbox go to eCompanion

Upload the following by midnight of our next class day:

Week Assignment File Name
7 Web-Optimized Images images.zip

Assignment Details

Web-Optimized Images

Complete the Save for Web Exercise tutorial on the left as directed in class.