1. Images and Backgrounds

2. Images

3. Black and White Pictures

4. Pictures are stored as pixels
Monochrome:
BLACK or WHITE

5. What is needed? Different levels of black and white Shades of gray
Percentage of black

6. ASCII Images (picascii.com)
Instead of pixels, use characters

7. Color Pictures

8. Color Pixels How do we represent colors? That’s also a color pixel!
RGB(red,green,blue)
That’s also a color pixel!

9. Formats & Fidelity

10. Many Formats jpeg or jpg, png, tif, gif, …
Different encodings, different sizes but they all will work
Actually different ways to COMPRESS them
Why compression?
1000 red pixels in a row…
That’s why they are different sizes
But you MUST use the correct extension name and capitalization

11. How much fidelity?
Big difference in size is how many pixels were used (dpi)
you WILL run out of space
Don’t use more than you need!
Common dpi: 96, 300, Dimensions in pixels (700, 2000, 4000, …)
Little pictures don’t need that much detail
Don’t always need HD!
Tools to change the fidelity
Use any program
Can do it on the web

12. Tools
Changing
Fidelity
Formats
Cropping
Tools
Programs
Web: Phixr

13. Images in HTML

14. Images on the Web Pictures Page backgrounds
Element backgrounds (list items!)
Link displays (arrows)
List markers

15. Images in HTML Remember that HTML is just text
Need to point to pictures
Use the img tag
<img src=“where” alt=“what”>
alt:
screen reader
REQUIRED for this class and to validate

16. Picture Sources Your own Publicly available
Reduce fidelity!
Publicly available
Flickr and the Creative Commons
Google and labeled for reuse
IMPORTANT TO ASSURE NO COPYRIGHT INFRINGEMENT

17. Formatting and Sizing

18. Formatting img All the box-related characteristics in CSS
Add class in HTML

19. Resizing and Cropping Resize and crop before you put it in the folder
Why?
Size on page
Size of file
More control

20. Sizing Pictures in CSS
HTML permits you to put size on an img, but NOT in this class.
ALWAYS do it in css.
Only size ONE dimension. Deductions for using both: funny house effect
Why not always resize picture to wanted size?
May want to reuse image multiple times
Simpler to make multiple pictures consistent in CSS

21. Adding a caption
<figure> <img …> <figcaption>caption</figcaption> </figure>

22. Images as Background

23. Overall page design Default: window size
Advantage: grows and shrinks easily
Disadvantage: harder to design
Making body fixed width
Advantage: easier to control
Disadvantage: scroll bars and unused space
Using fixed width section in default body
Combines advantage of fixed width without scroll bar
Allows complex backgrounds

24. Background Image Body background Need to assure readability
Simple images (see resources)
For busier images: use overlay
Use div or section or …
Opacity (0 to 1) to let it show through
Background-image: url(“file name”);
Background-size
Background-repeat

25. Opacity (on div) 1 is fully opaque : can’t see through
0 is fully transparent:
background disappears
Biggest issue:
Everything inside inherits the opacity
Figures problematic

26. Gradients Any place that you have a background Lots of different types
Google it!
Not supported consistently on browsers

27. Storing Images

28. Where are pictures stored?
Can be any where on the web
src has full url
<img src=“ us/sittersonsmall.jpg” alt=“Sitterson”>
Problems
Pictures change or disappear
You’re poaching on their resources
NOT PERMITTED FOR THIS CLASS

29. Preferable: IN THE FOLDER
If you only have one or two, just another file
src just needs the file name
<img src=“sittersonsmall.jpg” alt=“Sitterson”>
REMEMBER: case matters
If you have a lot, keep them in their own folder
src needs the path
<img src=“images/sittersonsmall.jpg” alt=“Sitterson”>
Either is specific to this website

30. Same image on ALL your websites
Examples
Company logo
Your picture
Put it in the top level
e.g., onyen for this class
(same place as your course page)
Reference as
<img src=“../sittersonsmall.jpg” alt=“Sitterson”>

31. References Summary (src or href)
In my folder
file.ext
In a subfolder
subfolder/file.ext
In a higher folder
../file.ext
On the web …