Lesson 6 - Images

Let’s talk about resolution

ResolutionHow 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.

The world of images is divided into two parts

Image file typesBitmap image

Represented as grid of dots of specified colors

e.g., JPG, GIF, and PNG

Vector graphic Encoded as geometric shapes

e.g., SVG

What image file formats should be used with web pages?

JPG GIF PNG

SVG

What about good old BMP – Bitmap?Very large files

Do not scale wellBMP files should NOT be used for web pages!!Browsers will not display BMP files.

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

PROS

• 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)

CONS

• 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

JPEGs

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

GIFs

PROS

• Supports transparency• Can be animated• Great for images with limited

colors• Great for line drawings & clip art• Great for text images• “Lossless”

CONS

• Only supports 256 colors• File sizes can be quite large• Not good for photographs• Not good for images w/ more

than 256 colors

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.

PNGs

PROS

• “Lossless”• Smaller file sizes• Great transparency support• Capable of producing

background images without jagged edges

• Great for text images• Great for logos

CONS

• 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

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:http://www.w3schools.com/HTML/html5_svg.asp

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

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…

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

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

img tag

<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.

If you had alt=Two dogs face to face - very cute />

The result would be:Two

Need quotes because browser interprets the first space it sees as the end of the alt text.

Why have quotes around alt text?

The draft dilemma

BobHeight: 5’ 7”Excellent on defenseOutstanding shooterGreat play maker

BillHeight: 7’ 1”Good on defenseOutstanding shot blockerBelow 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.

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.

Figure Element

<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.

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.

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.

Controlling Page Flow

Also, notice the footer structure element.

Clear property causes footer element to be displayed without floating elements to its right.

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>

<figure><figcaption>"Two very cute dogs"</figcaption><img src="CuteDogs-1.jpg" alt="Two dogs face to face touching noses" /></figure><figure><img src="kittens-1.jpg" alt="Two kittens" /><figcaption>"Two very cute kittens"</figcaption></figure>

If before img tag then caption above image.If below img tag then caption below image.

<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>

Caption with multiple images

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" />

<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.

Using Images as Links

• 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

Example: http://web.gccaz.edu/~timgo00001/cis133/06-sample/link.html

<a href="gcc.html" ><img src="glendale.jpg" /></a>

<a href="http://www.gccaz.edu" /><img src="gaucho.jpg" /></a>

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

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

body {

padding: 0; margin: 0;

font-family: tahoma, arial, helvetica, sans-serif;

background: white;

background: url("images/brick.jpg"); }

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>

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 http://. (Most versions of Firefox will show the favicon off your local storage.)

Why does my Favicon not work?

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?