41
115
IMAGES
Images created for the web should be saved at
a resolution of 72 ppi. The higher the resolution
of the image, the larger the size of the file.
Image resolutIon
JPGs, GIFs, and PNGs belong to
a type of image format known
as bitmap. They are made up of
lots of miniature squares. The
resolution of an image is the
number of squares that fit within
a 1 inch x 1 inch square area.
Images appearing on computer
screens are made of tiny squares
called pixels. A small segment
of this photograph has been
magnified to show how it is
made up of pixels. The web
browsers on most desktop
computers display images at a
resolution of 72 pixels per inch
(ppi). Images in print materials
(such as books and magazines)
are made up of tiny circles called
dots. These images are usually
printed at a resolution of 300
dots per inch (dpi).
For this image:
JPEG at 300 dpi = 1,526kb
JPEG at 72 ppi = 368kb
Due to the fact that computer
displays are capped at a
resolution of 72 ppi, using
images on the web with a higher
resolution will not result in better
image quality — only in larger
file sizes, which will increase the
time needed to load them and
therefore slow down viewing of
your web pages.
36
116
IMAGES
When an image is a line drawing
(such as a logo, illustration, or
diagram), designers will often
create it in vector format.
Vector formatted images are
very different to bitmap images.
Vector images are created by
placing points on a grid, and
drawing lines between those
points. A color can then be
added to "fill in" the lines that
have been created.
The advantage of creating line
drawings in vector format is that
you can increase the dimensions
of the image without affecting
the quality of it.
Vector images differ from bitmap images and
are resolution-independent. Vector images are
commonly created in programs such as Adobe
Illustrator.
VeCtor Images
The current method of using
vector images for display on
websites involves saving a
bitmap version of the original
vector image and using that.
Scalable Vector Graphics (SVG)
are a relatively new format used
to display vector images directly
on the web (eliminating the need
to create bitmap versions of
them), however its use is not yet
widespread.
49
117
IMAGES
Below you can see the individual
frames that make up an
animated GIF that shows an
orange dot revolving around
a circle — like the kind of
animation you might see when a
web page is loading.
Some image editing applications
such as Adobe Photoshop allow
you to create animated GIFs.
There are several tutorials about
how to do this on the web. There
are also several websites that
allow you to upload the graphics
for the individual frames and
create the animated GIF for you.
It Is Important to
remember:
Each extra frame of the image
increases the size of the file, and
can therefore add to the time it
takes for an image to download
(and web users do not like
waiting a long time for images to
download).
Because GIFs are not an
ideal format for displaying
photographs, animated GIFs are
really only suitable for simple
illustrations.
Some designers frown on
animated GIFs because they
remember a lot of amateur web
designers overusing them in the
1990's.
Animated GIFs show several frames of an
image in sequence and therefore can be used to
create simple animations.
anImated gIfs
1
2
3
4
5
6
7
8
34
118
IMAGES
Creating an image that is partially transparent
(or "see-through") for the web involves
selecting one of two formats:
transparenCY
png
If the transparent part of the
image has diagonal or rounded
edges or if you want a semi-
opaque transparency or a drop-
shadow, then you will need to
save it as a PNG.
Transparent PNGs are not fully
supported in older browsers,
most notably Internet Explorer 6
(IE6). There is some JavaScript
you can use to get around this
issue. The details of this script
can be found in the tools section
of the website accompanying
this book.
dIagonal
round
semI-opaque
drop-shadoW
straIght
transparent gIf
If the transparent part of the
image has straight edges and
it is 100% transparent (that is,
not semi-opaque), you can save
the image as a GIF (with the
transparency option selected).
38
119
IMAGES
examInIng Images
on the Web
CheCkIng the sIze of Images
If you are updating a website, you might need to check the size of an
existing image before creating a new one to replace it. This can be
achieved by right-clicking on the image and making a selection from
the pop-up menu that appears. (Mac users will need to hold down the
control key and click rather than right-click.)
doWnloadIng Images
If you want to download images from a website, you can do so by
accessing the same pop-up menu. (Please remember however that all
images online are subject to copyright and require explicit permission to
reuse.)
On the left you can see how to
check the size of images and
how to download them using
Safari. Below is a brief overview
of what to select in the pop-up
menu to perform these functions
in various browsers.
Chrome
Size: Open Image in New Tab
Size appears in new tab
Download: Save Image As
fIrefox
Size: View Image Info
Size appears in pop-up window
Download: Save Image As
Internet explorer
Size: Properties
Size appears in pop-up window
Download: save Image
safarI
Size: Open Image in New tab
Size appears in title bar
Download: save Image As
48
artICle
120
IMAGES
120
IMAGES
Result
<figure>
<img src="images/otters.jpg" alt="Photograph of
two sea otters floating in water">
<br />
<figcaption>Sea otters hold hands when they
sleep so they don't drift away from each
other.</figcaption>
</figure>
chapter-05/figure-and-figure-caption.html
HtMl
<figure>
Images often come with
captions. HTML5 has introduced
a new
<figure>
element to
contain images and their caption
so that the two are associated.
You can have more than one
image inside the
<figure>
element as long as they all share
the same caption.
<figcaption>
The
<figcaption>
element has
been added to HTML5 in order
to allow web page authors to add
a caption to an image.
Before these elements were
created there was no way to
associate an
<img>
element with
its caption.
Older browsers that do not
understand HTML5 elements
simply ignore the new elements
and display the content of them.
html5: fIgure and
fIgure CaptIon
30
In this example, the logo is a GIF
because it uses flat colors, while
the photographs are JPEGs. The
main photo is placed inside the
HTML5
<figure>
element and
has its own caption.
The
alt
attribute on each
image provides a description
for those using screen readers
and the
title
attribute provides
additional information. (This is
shown in the tooltip.)
This example does not
use the
height
,
width
, or
align
attributes as these are
being phased out and you
are encouraged to use CSS
properties instead.
121 IMAGES
38
example
Images
122
IMAGES
<html>
<head>
<title>Images</title>
</head>
<body>
<h1>
<img src="images/logo.gif"
alt="From A to Zucchini" />
</h1>
<figure>
<img src="images/chocolate-islands.jpg"
alt="Chocolate Islands"
title="Chocolate Islands Individual Cakes" />
<p>
<figcaption>
This recipe for individual chocolate
cakes is so simple and so delectable!
</figcaption>
</p>
</figure>
<h4>More Recipes:</h4>
<p>
<img src="images/lemon-posset.jpg"
alt="Lemon Posset"
title="Lemon Posset Dessert" />
<img src="images/roasted-brussel-sprouts.jpg"
alt="Roasted Brussel Sprouts"
title="Roasted Brussel Sprouts Side Dish" />
<img src="images/zucchini-cake.jpg"
alt="Zucchini Cake"
title="Zucchini Cake No Frosting" />
</p>
</body>
</html>
Documents you may be interested
Documents you may be interested
