http://shawncalvert.com/webdesign-1Web Design 1 Columbia College Chicago

1. Using Images on the Web
22-3375 Web Design I // Columbia College Chicago

2. Quiz
You can use your notes.

3. Project 1: Group Crits
Is there a clear visual hierarcy?
Does the wireframe match the user goals (from last week)
Did the designer think through and represent the different
user tasks (defined last week)?
Is the navigation clear; are the labels easily understood? Can
the structure be further simplified?
Does the designer present a clear vision for how this site will
be an improvement over the current version — in visual
design, content, and overall message?

4. Images can be integrated into your site
as html <img> elements or pulled in
from your css.
Images on the Web
How are images being
used in the following sites?

5. Images can be integrated into your site
as html <img> elements or pulled in
from your css.
How are images being
used in the following sites?

25. Rules for using web images

26. 1 Save images in the right format
2 Save images at the right size
3 Measure images in pixels

27. What is the “right size”?
With the growing use of responsive design
techniques and faster connections, it is
becoming less crucial for designers to have
their images perfectly sized to their box.
The basic guideline is to have (just) enough
pixels for your images to look great, however
you are using them.

28. Image Formats

29. Screen image formats
Print image formats

30. jpg
jpgs are for images, like photographs, that have a lot of colors
and gradations. It uses “lossy” compression, meaning that you
can reduce the size of the image by reducing the quality of the
image detail.
colors transparency?
24-bit:
no
millions

31. What is image detail?
Image quality is detail; the quality of the original capture can be
accessed by how much actual live detail was recorded, pixel-by-
pixel. The more you compress your jpgs, the more of these pixel-
by-pixel details you making the same (blowing out). The result of
too much compression is jpg artifacts and posterization.

34. GIGO

35. Exercise
Use Save for Web to save out a jpg

36. png-24
There are two kinds of png images: 24-bit (png-24) and 8-bit
(png-8). png-24 is a great format because it supports alpha
transparency, which allows you to have images with transparent
shadows, anti-aliasing, etc, and color underneath will show
through.
There is no support for png-24 in ie6 (there is a workaround).
colors transparency?
24-bit: yes
millions (alpha transparency)

37. png-24: alpha transparency

38. png-8
png-8 is an 8-bit image format, meaning that it supports up to 256
colors. It supports binary transparency, meaning that pixels are
either on or off – they have no transparency. This translates to
jaggy edges (which you have to then plan for and work around).
You can reduce the color index (aka color table) to contain only
the colors you need, resulting in very small image sizes. gif files
are saved in “index” color mode.
colors transparency?
8-bit: yes
256 colors (binary transparency)

40. Should I use png or jpg?
For photos, you almost always go with jpg,
because pngs will usually be much larger.
For icons, backgrounds, tiles, etc, that need
transparency, use png-24.

42. Exercise
Use Save for Web to save out a png 24

43. gif
gif if the workhorse for icons and vector graphics (like logos) that
don’t need alpha transparency. Like png-8, it uses binary
transparency. You can reduce the color index (aka color table) to
contain only the colors you need, resulting in very small image
sizes. gif files are saved in “index” color mode.
colors transparency?
8-bit: yes
256 colors (binary transparency)

45. Exercise
Use Save for Web to save out a gif

46. Exercise
1 Fixed-width centered page
2 Fixed-height header with logo
3 Two Column layout, floated
4 Absolute Positioning