2. Unit G - Images

3. The great questions of life?
How does an airplane stay up? Where does the tooth fairy get her money? Why is the sky blue? How does Santa deliver all those toys in one night? And the really big one…

4. If web pages are only text files, then how can a web page show pictures?

5. img tag
Images can be added to a Web page by linking to a separate file using the img element
One-sided element
Must include two attributes:
src: path and filename to the image file
alt: text to display if image is unavailable
Inline element by default
Can be wrapped in block element for alignment purposes
Within text, aligned to text baseline

6. Height and width are in pixels and are optional.
<h2>Dog Information</h2> <p>At T.A.S.K. we care about all the pets that we provide a comfortable kennel experience and take care of through our medical and obedience classes. </p> <img src="CuteDogs.jpg" height="131" width="175" alt="Two dogs face to face touching noses - very cute">
Height and width are in pixels and are optional.

7. Why have quotes around alt text?
If you had alt=Two dogs face to face - very cute> The result would be: Two Quotes are needed because when the browser parses the code it interprets the first space it encounters as the end of the alt text. So lets talk about images (aka graphics, pictures)

8. Let’s talk about resolution

9. Resolution High resolution = more detail, large file size.
How close together the dots (pixels – picture elements) should be in the output.
Measured in dots per inch (dpi).
High resolution = more detail, large file size.

10. The world of images is divided into two parts

11. Image file types Bitmap image Vector graphic
Represented as grid of dots of specified colors
e.g., JPG, GIF, and PNG
Vector graphic
Encoded as geometric shapes
e.g., SVG

12. What image file formats should be used with web pages?
JPG
GIF
PNG
SVG

13. What about good old BMP – Bitmap?
Very large files Do not scale well BMP files should NOT be used for web pages!! Browsers will not display BMP files.

14. JPG – Joint Picture Expert Group
Optimized for many colors - at least 24 bits of memory to each pixel 16.8 million colors
Good for photographs
Lossy - they retain all color information, but compress file size by selectively discarding data—and that compression can result in a loss of quality. If you choose the maximum quality option, your image will most likely be indistinguishable from your original photograph, but will have a larger file size

15. JPEGs PROS CONS 24-bit color w/ up to 16M colors Great for photographs
Great for images w/ more than 256 colors
Great for making smaller file sizes (usually)
Discard a lot of data - “Lossy”
Cannot be animated
Doesn’t support transparency
Not good for text images
Not good for images with sharp edges

16. GIF – Graphic Interface Format
Displays indexed-color graphics
Will only display a maximum of 256 colors
Not usually used as a format for digital photography. Digital photographers use image file formats capable of reproducing a greater range of colors, such as TIFF, RAW or JPEG
Can be animated

17. GIFs PROS CONS Supports transparency Can be animated
Great for images with limited colors
Great for line drawings & clip art
Great for text images
“Lossless”
Only supports 256 colors
File sizes can be quite large
Not good for photographs
Not good for images w/ more than 256 colors

18. PNG – Portable Network Graphics
Full range of color depths
Support for sophisticated image transparency
Better interlacing, and automatic corrections for display monitor
PNG images can also hold a short text description of the image’s content, which allows Internet search engines to search for images based on these embedded text descriptions.

19. PNGs PROS CONS “Lossless” Smaller file sizes
Great transparency support
Capable of producing background images without jagged edges
Great for text images
Great for logos
Not great for large images (large file sizes compared to JPEG)
Cannot be animated
Not supported by all web browsers
Typically have larger file sizes than JPEGs since they use lossless compression

20. SVG – Scalable Vector Graphics
Store two-dimensional graphics. The SVG file format is based on the XML markup language. This means that even though the file contains an image, the file itself is actually stored in a text-based file format.
The SVG file format was created by the World Wide Web Consortium as a standard way to display vector graphics on the Internet. 
Files with the .svg extension are often created in Adobe Creative Suite applications, but are not solely reserved for the Adobe programs. 
SVG files can be compressed, but once compressed the files will contain the .svgz extension.
We will not be using svg files in this course or on web pages at present.
For more information:

21. So what do you really need to know about graphic files when it comes to writing web pages?
The file formats you should use are jpg, gif and png
If your graphics have a lot of colors (such as a photo), choose JPG
If your graphics have few colors, choose GIF
Pay attention to the file type dog.jpg dog.gif
Do NOT use bmp, tiff or psd

22. The draft dilemma Bob Bill Who should your draft – Bob or Bill?
Height: 5’ 7”
Excellent on defense
Outstanding shooter
Great play maker
Bill
Height: 7’ 1”
Good on defense
Outstanding shot blocker
Below average free throw shooter.
You can’t make a short person taller, but you can teach a tall person to be better at shooting free throws.
Don’t make an image that is small in dimensions larger.
Who should your draft – Bob or Bill?

23. Figure Element
Used to mark images that add information to a Web page - semantic element. The <figure> tag provides a container for content that is equivalent to a figure or diagram in a book. It can be used to group a caption with one or more images, a block of code or other content. CSS float attribute enables Web page elements to flow around figure.

24. Since image is listed first, it is displayed before the paragraphs.
<p><figure><img src="CuteDogs.jpg" height="131" width="175" alt="Two dogs - very cute"></figure> <p>At T.A.S.K. we care about all the pets that we provide a comfortable kennel experience and take care of through our medical and obedience classes.</p> <p>We hope that you will consider us when looking for any of these services. Our office are located in many convenient locations throughout the Phoenix valley.</p>
Since image is listed first, it is displayed before the paragraphs.

25. The float property enables Web page elements to flow around figure.
figure { display: block; float: right; margin: 0; padding: 0; }
The float property enables Web page elements to flow around figure.
Left and right values align figure.

26. Controlling Page Flow
CSS float property not always sufficient for desired page layout. CSS clear property: prevents floated elements from being displayed to the side of another element. Allows more precise control of Web page flow.

27. Also, notice the footer structure element.
Clear property causes footer element to be displayed without floating elements to its right.
footer {
display: block;
background: #B8944D;
padding: 0.25em;
margin: 0;
clear: right; }
Also, notice the footer structure element.

28. Adding a Caption figcaption
Marks text as a caption for associated image
Nested within figure element for the image
Provide context, explanation or credit
<figure>
<img src="sunset.jpg" alt="Beautiful sunset">
<figcaption>An Arizona sunset</figcaption>
</figure>

29. If before img tag then caption above image
If before img tag then caption above image. If below img tag then caption below image.
<figure>
<figcaption>"Two very cute dogs"</figcaption>
<img src="CuteDogs-1.jpg" alt="Two dogs face to face touching noses">
</figure>
<img src="kittens-1.jpg" alt="Two kittens">
<figcaption>"Two very cute kittens"</figcaption>

30. Caption with multiple images
<figure>
<img src="bird1.jpg" alt="Parakeet">
<img src="bird2.jpg" alt="Parrot">
<figcaption>"Two of the most common pet birds - they also need vet care."</figcaption>
</figure>

31. Associating Images with Related Text
title attribute
Used to specify additional image information
Browsers display as floating text during mouse-over
When not specified, some browsers display alt text
<img src="phone-99.jpg" alt="Newest phone model 99" title="The model 99 phone has special security features">

32. <img src="CuteDogs.jpg" height="131" width="175" alt="Two dogs - very cute" title="Very cute dogs - face to face touching noses">
The title information displays when mouse goes over the image.

33. Using Images as Links
<a href="gcc.html" ><img src="glendale.jpg"></a>
<a href=" /><img src="gaucho.jpg"></a>
Images can be used as links - the img element is the clickable item
Browsers typically add border around linked image to display link state
Use pseudo-classes to modify link state colors
Use CSS border property to remove the border

34. Inserting a Background Image
Image can be background of Web page or element
Specify path and filename as value for background property
Important to maintain contrast between background and text
Specify background color in case image not available
Tiling - displaying images repeatedly
Used by browser to fill screen space

35. Inserting a Background Image and Color
Syntax of background property:
background: url("url goes here")
Background: color_indicator
When property-value pairs conflict the one that occurs later in the rule takes precedence.

36. body { padding: 0; margin: 0; font-family: tahoma, arial, helvetica, sans-serif; background: white; background: url("images/brick.jpg"); }

37. Create an Image Map
An image map is HTML code associated with an image that specifies one or more shapes using sets of coordinates and provides a link target for each shape
Each linked shape is known as a hotspot
Shape values can be rect, poly, or circle
rect coordinates based on top-left corner and bottom-right corner of shape
poly coordinates based on each vertices in the shape
circle coordinates based on center point and radius of the circle

38. Coordinates are measured from the top-left corner
Use third-party software to generate the coordinates
Code for rect shape in an image map

40. Favicon
Small image (icon) that is associated with Web page in the address bar and on bookmarks
16 x 16 pixels
.ico format
<head> :
<link rel="shortcut icon" href=“sp-wren.ico">
</head>

41. Why does my Favicon not work?
It must be an ico format and in the correct location.
The favicon may not show when you test this feature with your page on the local storage.
Most browsers do not show the favicon unless the page is published and you access it with a web address that starts with (Most versions of Firefox will show the favicon off your local storage.)

42. Now I can make a web page showing pictures of my puppies doing cute things.
I wonder if I can include a picture of Lassie on my web page?