1

IMAGES: A Picture Is Worth a Thousands Words,

Image FormatsChoosing an Image FormatImage SizesBits Per PixelGraphic TipsImage Tag AttributesLine BreaksCentering ImagesImage BordersImage MarginsImages As BulletsImage LinksTwo HTML Coding Tricks (lowsrc, nobr)

2

OBJECTIVES

• Recognize applications for common image formats

• Insert an image into an HTML document and control its height and width.

• Create text-based alternative to an inline image

• Float an image within a Web page in such a way that text flows around it.

• Place a border around an image

• Center an image within screen display

• Use an image as a hyperlink

• Create unordered lists that use image bullets

3

GIF (Graphics Interface Format)

GIF is the format commonly used to save simple images that require

only a small number of colors (buttons, icons, cartoons, logos).

- Supports up to 256 colors (8 bits)

- You can interlace GIF files (first appear with poor resolution and then improve in resolution until the entire image arrives)

-Transparent backgroud is possible

-Animated images are possible

-GIF compression is “lossless”.

. accounts for all data bits in the image

. image quality does’not change during compress/uncompress

. best suited for line art that contains larger areas of the same color

4

JPEG (Joints Photographic Experts Group)

JPEG is used to store complex images that involve a large number of

colors, such as photographs and artwork.

- Supports 16.7 million different colors (8 bits and 24 bits,Full-

color hardware is necessary in order to view all colors in such images.)

- Smaller than GIF; uses a higher compression ratio

- When repeadedly saving; lossy compression to store the image (some of pixels are discarded).

- Image Editors offer to save as Progressive image file (layer) But slower to load (one layer at a time).

- JPGs do not have GIF’s advantages

5

PNG (Portable Network Graphics) -new

- Supports 16.7 million different colors (8 bits and 24 bits)

- Lossless compression algoritm

- Open standard; everyone free to use it (is still developing)

- Some of the most up-to-date browsers support

- A large and groving group is trying to establish PNG as the Web Standard

6

CHOOSING AN IMAGE FORMAT

Try to resist Exotic image formats (installing a plug-in)

Don’t shy away from the PNG image format (popular browser recognize it)

It may be best to use only GIF and JPEG

Image editors allow to use in different formats

Use them to convert exotic images

7

IMAGE SIZESHow an image can become a large, slow, troublesome to your users?

500 X 300 (150,000 pixel)

If file format is 8 bits per pixel 1,200,000 bits

If user modem 56.6 –kilobits-per-second (kbps)

1,200,000 /56,600 21 seconds

If this is the only image and 56,6 kilobits modem

Many user uses 28.8 kbps and takes 42 seconds to download!

If you have 10 – 12 images like that!!!

If you are using 24 bits of image

8

BITS PER PIXEL (BPP)

Each file format supports a specific range of bits per pixel (bpp).

1 bpp 2 colors

4 bpp 16 colors

8 bpp 256 colors

16 bpp 32,768 colors

24 bpp 16,777,216 colors

9

GRAPHIC TIPS

Followings are some techniques for reducing download time:

Simplify your graphics;

building an image keep the image simple

Use the fewest color

Save as GIF of JPEG

Avoid dittering (reduces

compressibility, all systems don’t

ditter in same way)

Large areas of a single color are

best for compression

10

GRAPHIC TIPS

Followings are some techniques for reducing download time:

Divide up large pages;

Keep images under a 50 kilobyte.

Keep large graphics on their own page;

- Put it on a page itself and provide a link (external image)

<A HREF =“image.gif”>Full size of the image</A>

- Thumbnail image as the link

- How large that full-size file, give an idea (1,024x768x24 bpp)

11

GRAPHIC TIPS

Followings are some techniques for reducing download time:

Reuse the images on your page;

Browser can take it from the local cache.

Preload images if you are going to use them in rollovers;

- small images that load or change when the mouse pointer

moves over.

Use image-reduction software or Web site to decrease the

size of images;

- They clean up images by removing unused colors form the

palette (GifCruncher www.spinwave.com)

12

INSERTING IMAGES TO A WEB PAGE

<img>Description: inserts graphics, photograph, line art, or other image

into screen display

Type: Empty

Attributes: align, alt, border, height, hspace, src, vspace, ...

- nongraphical browsers display alt value

- some browsers force the images into specific size and color

- Some users use turn off “automatic image loading”

13

IMAGE TAG ATTRIBUTES

SrcWhere to find the inserted image

Minimize the home server’s load :(

<img src = “http://bilkent.graph.edu.tr/images/fire.gif>

---

Put everthing in the same directory :(

<img src = “fire.gif”>

---

A place for everything and everything in its place :)

<img src = “images/fire.gif”>

14

IMAGE TAG ATTRIBUTES

altProvides text based description of the image;

- if browsers are text or sound based browsers

- if browser can not display the actual image

- if user has turned off image loading

- max. 1,024 bytes long

- It can serve as a substitute for icons

<H2>See the birdie <img src = “hotnew.gif” alt =“**NEW**”></H2>

15

IMAGE TAG ATTRIBUTES

Height AND WIDTH

image dimensions;

<img src = “butterfly.gif” height =“150” width = “200”>

Align;

A- Horizontal Alignment; left , right

<img src = “butterfly.gif” align =“left”>

<img src = “butterfly.gif” align =“right”>

16

IMAGE TAG ATTRIBUTES

B- Vertical Alignment

Top: aligns the top of the image with the top of the tallest itrm

in the current text line

Middle:aligns the middle of the image with the bottom, or

baseline of the text

bottom: aligns the bottom of the image with the bottom, or

baseline

<img src = “butterfly.gif” align =“top”>

<img src = “butterfly.gif” align =“middle”>

<img src = “butterfly.gif” align =“bottom”>

17

LINE BREAKS

Clear

It is used to stop the flow of the text around the image

<br clear = “left”>

<br clear = “right”>

<br clear = “all”>

18

CENTERING IMAGES

<CENTER>Centering Objects</CENTER>

Description: Centers object within screen display

Type: container

Attributes: None

There is no <img ...... align =“center”> element!

Centering a Paragraph: <p align = “center”>...</p>

left, right, and justify are possible with P tag.

19

IMAGE BORDERS

border-style: dotted|dashed|solid|double|grove|ridge|inset|outset|hidden|

none

<img src =“gold.jpg” alt=“altın” style = “border-style:solid;”>

border-width: thin|medium|thick|absolute|inherit

<img src =“gold.jpg” alt=“altın” style = “border-width:10px;”>

border-color: color#|transparent|inherit

<img src =“gold.jpg” alt=“altın” style = “border-color:”#FF0000”>

20

IMAGE MARGINS

margin: margin-width | inherit

<img src =“gold.jpg” margin: 15px;”>

Establishes a 15 pixel margin around the image

vspace AND hspace

<img src =“gold.jpg” hspace = “20” vspace = “20”>

Establishes a 20 pixel horizontal and vertical space around the image

21

IMAGES AS BULLETS

The custom bullets are nice, as long as the images aren’t too big!

list-style-image: url | none | inherit

<ul style = “list-style-image:url(pepper.gif)”>

22

IMAGE LINKS

Clickable images...

<a href = “index.htm”><img src = “home.gif”><A>

TWO HTML CODING TRICKS

lowsrc: low resolution loaded before loading the original image

(They must be in same size)

<img src = “butterfly.gif” lowsrc =“bfl.gif”>

<nobr>no line break</nobr>

Description: overrides browser’s ability to wrap text to the

next line (type:container) long text, url, a line of computer code