10/23/2015Images on the Web1 Images Spring, 2008 Modified by Linda Kenney 3/26/08

04/20/23 Images on the Web 1

Images

Spring, 2008

Modified by Linda Kenney3/26/08


Overview of images on the WebAs we’ve discussed, XHTML files are text files.

Since computer images are not stored as text, they cannot be stored in XHTML files.

Instead, images are stored in separate files and Web authors use XHTML elements to tell the browser which image file to retrieve from the server and where to include it in the rendered page.


Overview of images on the Web (cont.)

In order to understand images on the Web, we need to examine several concepts.

We’ll need to examine how images are stored in files, so we can store images appropriate for use on the Web.

We’ll need to explore how images are obtained and organized and learn the basics of copyright laws, so we can manage our images without getting into trouble.

And we’ll need to learn the XHTML element that is used to insert images into Web pages, so we can actually use our images to enhance our pages.


Computer imagesAll computer images are made up of tiny dots called picture elements (or pixels) arranged in a rectangular grid.

Because the pixels are so small, however, our eyes don’t perceive them as separate dots.

Instead, our eyes blend the dots together to form a coherent image.


Color imagesEach pixel in an image can be displayed in a range of colors.

The image below contain 128 different colors. Note how similar the vast majority of the colors are in this image.

Subtle combinations of similarly colored pixels can contribute to the realism of an image by adding shading and other features.


Storing an image – part 1To store an image, we need to record the color of each pixel the image contains.

Because pixels are so small, images typically contain lots of them.

The small sample image below contains 75 rows and 77 columns.

75 rows of 77 pixels each is a total of 5,775 pixels.

Since all the pixels on a computer screen are the same size, a taller image would contain more rows and a wider image would contain more columns.

In other words, bigger images contain more pixels than smaller ones.

Since each pixel requires the same amount of memory, larger images with more pixels require more memory for storage.


Storing an image – part 2Since computers must represent everything as numbers, the color of each pixel is stored as a number.

You can think of a file that stores an image as a type of “paint-by-numbers” for the computer.

To display the stored image, the computer simply reads the numbers that represent the pixels in each row and displays each pixel in that row using whatever color its number specifies.

Computers use more memory to store larger numbers.

So images with a wider range of colors require more storage.


Color depth Because computers use the binary number

system the ranges are a bit different than we would expect, but the idea is the same. The binary number system is a base 2 number

system, which effectively means it uses only two digits.

In the binary number system, each digit is referred to as a binary digit. In computer science “binary digit” is generally

shortened to “bit”. A single bit can represent only two possible

values: 0 or 1. 0 and 1 are the only two digits available in the binary

number system. Everything the computer stores and manipulates

is represented in the binary number system and therefore consists of bits


Color depth (cont.) The more bits we are willing to allocate to storing a

numeric value, the wider the range of possible values.

If we stored each color as a single bit, we’d only have 2 colors to use.

If we stored each color using eight bits, we’d have 256 colors.

If we stored each color using sixteen bits, we’d have 65,536 colors.

If we stored each color using twenty-four bits, we’d have 16,777,216 colors.

On the Web, 256 colors are generally accepted as the minimum useful.

Since humans cannot distinguish more than 16.7 million colors, 16,777,216 colors are generally accepted as the maximum useful.

Because it covers all the visible colors, 24-bit color is often referred to as true color.

The number of bits used to store each color determines an image’s color depth.


Image sizeSince each image on a Web page is stored in a separate file and retrieved from a Web server, the size of those files is a major concern. Larger image files take longer to retrieve

from the server, and that adds to the time it takes a page to render. Most Web users don’t like to wait a long time for

pages to appear. So Web authors are very interested in minimizing

the size of image files to speed up their pages. The most important tool available for reducing file

size without significantly decreasing image quality is a technology known as compression


CompressionStated simply, compression is the process of storing data with fewer bits than it would normally require. In general, this can be accomplished in two

ways.

Lossless compression

Lossy compression

Compression is an essential part of storing images for use on the Web as a means of reducing the time needed to retrieve them from Web servers.


Compression (cont.) Lossless compression reduces the

amount of storage required for data by using more efficient representations.

None of the data is lost due to the compression process.

So the resulting image is identical to the original.

This can be especially important for certain types of images where any loss of data would have a noticeably detrimental impact on the quality of the image.


Compression (cont.) Lossy compression reduces the amount of

storage required for data by actually eliminating some of it.

The least useful portions of the data are simply thrown away during the compression process.

In this case, the resulting image is only an approximation of the original.

Some types of images, such as photos, are remarkably tolerant of data loss.


Image file formatsBy now, it should be evident that there are a variety of factors involved in deciding how to save an image in a file. Software designers make the decisions

about how to save an image and publish their conclusions as image file formats.

By following the specifications in a published image file format, a software designer can develop software that can store and display any image that uses that format.

Over the years, dozens of image file formats have been published, each optimized for one or more specific uses.


Image file formats (cont.) The Web requires a balance of image

quality against file size.

This limits the range of image file formats available for Web authors.

We are only interested in image file formats that browsers can display.

And browsers, in general, can only display three different image file formats:

JPEG, GIF and (sometimes) PNG.


GIF Images

Graphics Interchange FormatBest used for line art and logosMaximum of 256 colorsOne color can be configured as transparentCan be animatedUses lossless compressionCan be interlacedAll major graphical browsers support GIF images.

When you have a non-photographic image to use on the Web, chances are you want it stored as a GIF file.

GIF files must have names ending in .gif


JPEG

Joint Photographic Experts GroupBest used for photographsUp to 16.7 million colorsUse lossy compressionCannot be animatedCannot be made transparentAll major graphical browsers support JPEG images.

When you have a photo that you wish to use on a Web page, you generally want that photo stored in a JPEG file.

JPEG files must have names ending in .jpeg (or .jpg).


PNG for the future

Portable Network GraphicSupport millions of colorsSupport multiple levels of transparencySupport interlacingUse lossless compressionCombines the best of GIF & JPEGBrowser support is growing


Image file formats compared – part 1

Extension

Compress

Colors

Animate

Transparent

Browser

Support Used for

JPEG.jpeg.jpg

LossyTrue color

No NoUniversa

lPhotos

GIF .gif LosslessUp to 256

Yes YesUniversa

lNon-

photos

PNG .png

Lossless(20% more

efficient than GIF)

Up to True color

NoYes, 256

levelsGood Any image



BMP 90K TIFF 103K

JPEG 9K

GIF 21K PNG 19K



BMP 106K TIFF 11K

JPEG 10K

GIF 4K PNG 4K


Obtaining imagesThere are a variety of ways through which images are obtained for use on the Web. Many Web authors create their own images.

Hand drawn images can be created from scratch using programs called image editors.

There are many image editors available, but some common ones include Adobe Photoshop, Jasc PaintShop Pro, and Macromedia Fireworks.

Photos can be taken with digital cameras or scanned in with an image scanner.


Obtaining images (cont.) It’s also fairly common to use images created

by others.

Many image archives exist on the Web as resources for downloading images.

Image archives are also available on CD. Some offer free images, some sell the right to use their

images.

For high-budget Web projects, a Web author might hire a graphic designer to create the images they need.

As a student, you might ask an artistic friend to create your images as a favor.

When using images created by others, it’s important to ensure that you have permission from the owner of the image.


Understanding copyrightEvery original creation is automatically copyrighted upon creation.

Unless that copyright is specifically transferred in writing to another individual or organization, the copyright is automatically held by the creator.

This means that somebody holds the copyright for virtually everything you see on the Web – text, images, sounds, video and so on.

Holding the copyright on something means that you get to decide how that thing can be used and by whom.

If you wish to use a copyrighted image in your Web pages, it’s your responsibility to get permission to do so from the copyright holder for that image.

Many people mistakenly believe that any image they see on the Web is free for the taking.

Using a copyrighted image without permission leaves you open to legal action.


Understanding copyright (cont.) Some copyright holders choose to establish

fairly lenient terms of use for everyone at once or large classes of users (such as students or non-profit sites).

This will often be the case with images obtained from image archives.

When visiting an image archive you typically start by locating and reading their terms of use.

You need to make sure you understand and accept those terms of use before using one of the images.

If you don’t accept their terms of use, look elsewhere for your images.


Understanding copyright (cont.) Others view their copyrighted materials as

financially valuable goods and either refuse any request to utilize those materials or negotiate limited terms of use on a case-by-case basis. This situation also typically involves some sort of

payment for the limited rights to use the image. This is their prerogative as the copyright holder, and

it’s your responsibility to respect their decision.

If you find an image on the Web and wish to use it, try asking the page’s owner for permission. If you explain how you intend to use the image and

ask politely for permission, you’ll often get it. The worst they can do is say “no” or ignore your

request. Just be reasonably sure you’re dealing with the

rightful owner!


Grabbing images from the WebIt’s very easy to grab a local copy of any image you see on a Web page.

Simply click the image with the right-hand mouse button and look for a command that will save the image in the shortcut menu that appears.

In the dialog box that appears, choose the local folder where you wish to store your copy of the image and enter an appropriate name for the image file.

When specifying the file name, be sure to keep the same type of extension, or you will confuse both the server and browsers.

It is best to use only lowercase letters and avoid spaces in your image file names.

It is acceptable to change the case of the extension or to replace a .jpg extension with a .jpeg extension.

But you should never replace a .gif extension with a .jpeg extension, for example.

If you wish to have your version of the image stored in a different image file format, use a conversion program of some sort.


Grabbing images from the Web (cont.)

Grabbing images from the Web is easy because it is perfectly acceptable to do so for your own private use.

Using those images in your pages, however, requires permission.

Simply being able to grab your own copy of an image off the Web does not imply that you have permission to use it legally.

It is still your responsibility to ensure you have the necessary permission from the copyright holder to use the image.


Organizing imagesOn average, each Web page contains several images.

Storing all the image files in the same place as your XHTML files can get confusing and hard to manage.

So most experienced Web authors store their images in one or more separate folders.

Since the pubpages server only looks in your public_html folder, any image folders you create should be inside your public_html folder.

To make your life easier, make your image folder inside your cs403 folder.


Using images in Web pagesTo insert an image into your Web page, use the <img /> element. <img /> is an empty element, so it must

end with a slash. <img /> is also a replaced element, so the

browser replaces it with the image it specifies. To specify which image the browser should use as

a replacement, each <img /> element must contain a src attribute.

The value of this src attribute should be the URL of the desired image file.


Local resources vs. remote resources

It’s important to understand the distinction between local resources and remote resources.

Local resources are pages and images that are part of your presentation and under your control.

All of the pages you write and images you use are likely to be local resources.

Remote resources are pages and images that are part of somebody else’s presentation and/or under somebody else’s control.

When you access someone else’s home page you are accessing a remote resource.


Accessing remote resourcesIn order to access a remote resource you must use an absolute URL.

Absolute URLs are the URLs we’ve discussed previously.

They include all the info a browser needs in order to retrieve the specified resource.

Give an example

However, images are almost never accessed as remote resources.


Avoiding remote imagesIt is extremely rare for an image on the Web to be accessed as a remote resource.

When your pages access images as remote resources on someone else’s server host, you are utilizing their storage and bandwidth without allowing them to derive any benefit.

This situation is often referred to as bandwidth theft, since you are deriving benefits at someone else’s expense.

Many server administrators get very angry when they discover bandwidth theft and may threaten you with legal action.

Avoiding remote images (cont.) Note that this applies only to using images

as remote resources; linking to someone else’s page should always link to that page as a remote resource.

Since images are almost never accessed as remote resources for this reason, you should almost never use an absolute URL as the value of an <img /> element’s src attribute.

Instead, store your images on your own server space and use relative URLs.



XHTML <img> tag

The image tag

Used to place graphics on a web pagesrc Attribute

used to indicate the file name of the graphic.

alt Attribute Used to configure a text description .

height Attribute Used to configure the height of the image in pixels.

width Attribute Used to configure the width of the image in pixels.

<img src=“cake.gif” alt=“birthday cake” height=“100” width=“100” />


Images and accessibilityAs we’ve discussed, accessibility refers to the ease with which users with various disabilities are able to utilize our pages.Images present a special challenge for blind and low-vision users of the Web. Such users typically browse the Web using

screen readers that read the content of the pages aloud. Screen readers are only able to read text. So, every <img /> element is required to have an alt

attribute as well as a src attribute. The src attribute tells a visual browser where to go in

order to retrieve the image to be displayed.

The alt attribute gives a screen reader some text to read in place of the image.

Provide alternative text descriptions for all mages.


Specifying height and width of images

If a visual browser knows the height and width of an image, it can reserve space for that image without delaying the rendering process.

Once the image is retrieved from the server it can be rendered in the reserved space .

This can decrease the perceived load time of a page.

If it does not know the dimensions of an image, the browser must wait until it has retrieved an image from the server to find out how much space it will occupy.

This can cause delays or adjustments in rendering and increase the perceived load time.

Use the <img /> element’s height and width attributes to specify the height and width of an image.

Most often, these values will be set to the actual pixel dimensions of an image.

They can be set to different dimensions, and the browser will scale the image to the specified dimensions.

However, browsers are not image editors, and they often do a poor job of scaling images. Use an image editor to scale an image then specify the actual dimensions of the edited image in the XHTML.


Tips for using images effectivelyThere are several “rules of thumb” you may wish to consider when deciding how to use images in your Web pages.

Have a good reason for every image you use.

Unnecessary images increase load times and distract the user.

This is especially true for animated images!


Tips for using images effectively (cont.)

Use the smallest image that will do the job.

Keep the file size of each image as far below 100KB as possible.

Ideally, the cumulative size of a page (XHTML and images combined) should not exceed 100KB, but I’ll use 100KB per image as the maximum size for grading purposes.

Choosing the right image file format is only the first step.

For JPEG images experiment to find the best balance of file size and image quality.

For GIF and PNG images, try to use the fewest colors needed to produce an acceptable image.

Keeping the dimensions of each image as small as possible reduces file size and increases the range of environments that can display your pages as you intend.


Tips for using images effectively (cont.)

Provide alt, height and width attributes for each image to enhance accessibility and decrease perceived load times.

Reuse images from page to page whenever possible to maximize the benefits of the browser’s cache.

Make local copies of all images and reference them with relative URLs. This will lead to more portable presentations and

avoid bandwidth theft.


Image Links

To create an image link use an anchor tag to contain an image tag

Home

<a href="index.htm"><img src="home.gif" height="19" width="85" alt="Home" /></a>

04/20/23 CS403 Cascading Style Sheets 42

The background-image propertyThe background-image property allows you to set a background image to be used for an element. It takes as its value either the URL of the

image to use or the word none (which is the default). URLs in CSS are specified using functional

notation.

Note the lowercase url followed by the actual URL enclosed in parentheses.

In external style sheets, use absolute URLs even for local resources.

body {background-image:url(images/texture.jpeg);}


The background-image property (cont.)

Choose images that are relatively homogeneous and tile nicely for background images.

A relatively homogeneous image will contain mostly similar colors, making it easier to choose foreground colors that remain uniformly visible against it.

An image tiles nicely when it can be placed adjacent to a copy of itself without any visible seam.

When setting a background image, always set foreground and background colors as well.

Set foreground colors that will contrast well against the background image so text remains easy to see and read.

Set a background color that approximates the effect of the background image. The background image will be shown over the background color whenever possible.

body {background-color: #FFFF66; background-image: url(images/texture.jpeg); color: #000066;}


The background-repeat propertyIf you don’t specify otherwise, a browser will repeat a background image in as many rows and columns as needed to fill the background area of the element.

This process is commonly referred to a tiling, since it is similar to covering a wall with ceramic tiles.

The background-repeat property lets you specify exactly how the background image should be repeated.

Using a value of repeat instructs the browser to use as many rows and columns as it needs to fill the background area.

Using a value of no-repeat instructs the browser to simply show the background image once.

Using a value of repeat-x instructs the browser to use as many copies of the image as needed to span across the background area but only in a single row.

Using a value of repeat-y instructs the browser to use as many copies of the images as needed to span down the background area but only in a single column.

If no background image has been specified, this property has no effect.

body {background-color: #FFFF66; background-image: url(images/texture.jpeg); background-repeat: repeat-x; color: #000066;}


The background-attachment property

Unless you specify otherwise, a background image scrolls along with the page on which it is displayed.

But you can use the background-attachment property to control whether the background image scrolls with the page or remains in a fixed position.

Use a value of scroll to instruct the browser to scroll the background with the page.

Use a value of fixed to instruct the browser to leave the background in its original position and allow the page to scroll “over” it.

If no background image has been specified, this property has no effect.body {background-color: #FFFF66;

background-image: url(images/texture.jpeg); background-repeat: repeat-x; background-attachment: fixed; color: #000066;}


The background-position propertyBy default, the first copy of a background image is displayed with its upper left corner at the upper left corner of the background area of the element to which it’s applied.

The background-position property can be used to control precisely where the first copy of the background image gets displayed.

Any tiling needed then proceeds from that initial copy towards the right and/or bottom.

This property can accept a variety of value types, but there are typically two values separated by a space.

The first value represents the horizontal position desired. The second value represents the vertical position desired. It’s fairly common for the values to be percentages. Commonly used percentages have keywords associated with

them. And absolute length units are also acceptable .


Background positioning by percentage

When using the background-position property, percentages are relative to the background area which the image will be used to fill.

They are also relative to the dimensions of the background image itself The example below positions the upper left corner of the initial background image

in the upper left corner of the background area

This example positions the lower right corner of the initial background image in the lower right corner of the background area

This example positions the center of the initial background image in the center of the background area

And this last example positions the point 23% of the way across and 38% of the way down the initial background image 23% of the way across and 38% of the way down the background area

body {color: #000066; background-color: #FFFF66; background-image: url(images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: 0% 0%;}





Background positioning by keyword

It’s also possible to use keywords instead of commonly used percentages as values of the background-position property.

The keywords left, center and right are equivalent to horizontal positions of 0%, 50% and 100%, respectively

The keywords top, center and bottom are equivalent to vertical positions of 0%, 50% and 100%, respectively

The keywords may be used in any combination with one another

But keywords cannot be combined with percentages or length units

body {color: #000066; background-color: #FFFF66; background-image: url(images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: left center;}

body {color: #000066; background-color: #FFFF66; background-image: url(images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: center top;}


The background propertySince it’s common to use several of these background related properties together, there is a single background property that lets you specify several values at once.

Such properties are often referred to as shorthand properties.

The background property can accept a value comprised of any combination of legal values for the other background related properties.

The example above is equivalent to the example below

If there are not explicit values for every background related property provided, the background property sets those values left unspecified to their defaults

The example above is equivalent to the example below

body {color: #000066; background-color: #FFFF66; background-image: url(images/watermark.jpeg); background-repeat: no-repeat; background-attachment: fixed; background-position: center center;}

body {color: #000066; background-color: #FFFF66; background-image: url(images/watermark.jpeg); background-repeat: repeat; background-attachment: scroll; background-position: 0% 0%;}

body {color: #000066; background: #FFFF66 url(images/watermark.jpeg) no-repeat fixed center center;}

body {color: #000066; background: #FFFF66 url( images/watermark.jpeg);}


See examples:http://pubpages.unh.edu/~ltv6/cis599/samples/chapter5/

Documents

10/23/2015Images on the Web1 Images Spring, 2008 Modified by Linda Kenney 3/26/08