Download Graphics 1. Graphic File Formats

Graphics
Winter 2012
Graphics in HTML
W ki with
Working
ith IImages
Textbook reference:
Pages 114-133 of Chapter 5
Graphics
Graphic File formats
Storing Graphics
Graphics Considerations
Graphic Formats for the Web
Obtaining Graphics
The <img> tag and attributes
Images and Links
1.
2.
3
3.
4.
5.
6.
7.
1. Graphic File Formats
ƒ
Two Major graphics formats
Vector or object-oriented
ƒ
Raster or bitmapped
ƒ
•
•
ƒ
e g the Office Drawing tools
e.g.
e.g Paint
Formats are constantly being refined to
add functionality & produce higher picture
quality with smaller files
COMP 1270 Computer Usage II
7-1
Graphics
Winter 2012
Vector graphics
ƒ
Vector Graphics typically are generated
using drawing or illustration programs
•
e.g.,
g Adobe Illustrator, Corel Draw
Pictures are composed of mathematicallydefined geometric shapes (objects)
•
Objects have easily changed properties
•
•
•
e.g. lines, rectangles, ovals
size, position, line colour, fill colour, overlay
Raster Graphics
ƒ
Raster graphics are produced by digital
image capture devices
•
e.g. digital scanners or digital cameras
ƒ
or by pixel editing programs
ƒ
Composed of a matrix (grid) or bitmap of
picture elements (pixels)
•
•
e.g. Adobe Photoshop
e.g. Windows Bitmap (.bmp), Graphics
Interchange Format (.gif)
Raster vs. Vector
ƒ
Raster:
ƒ
ƒ
ƒ
ƒ
Vector:
ƒ
ƒ
ƒ
ƒ
easily shared across various platforms
difficult to modify
does not scale well; visible loss of quality as they
are made larger
g
scales with no loss of quality
does not support photographic imagery well
problematic for cross-platform exchange
We will use Raster graphics for the Web
COMP 1270 Computer Usage II
7-2
Graphics
Winter 2012
2. Storing Graphics
Raster Graphic images are made up of pixels picture elements
ƒ
•
Pixels are arranged in a rectangular grid
•
I
Image
size
i iis specified
ifi d as width
idth x h
height
i ht
Raster files store information about the pixels
ƒ
Some formats use compression techniques
•
•
smaller files, but you lose info about individual pixels
Vector files store information about objects
ƒ
•
position, size, colour, etc.
•
No compression is used
Storing Graphics
ƒ
Each pixel is represented as a number or a set
of numbers
•
•
ƒ
Grayscale (“black and white”) needs a single
number for intensity
Colour is represented
p
as 3 numbers ((RGB values))
Graphics take up significant space
•
•
100 x100 pixel image contains 10,000 pixels, each of
which takes 1–4 bytes to store - that’s 10KB at
minimum (= 2 pages of text) for a small image like
the one above
Compression reduces this space usage
Displaying Graphics
ƒ
Two factors determine how large a
picture will look when it is displayed
•
•
ƒ
The p
picture size ((width x height)
g )
The display device resolution (pixels per inch)
Typical resolution values for displays
•
•
Computer display: 72-100 ppi
Laser printer: 600 ppi
COMP 1270 Computer Usage II
7-3
Graphics
Winter 2012
3. Graphics Considerations
ƒ
Well thought-out graphics are invaluable
•
•
But, if used excessively, they can be distracting
and a waste of bandwidth
Some users turn off graphics viewing to speed
up browsing
b
i
•
How will your page appear without the graphics?
ƒ
Which formats are supported by browsers?
ƒ
Which formats are best for the type of
images I want in my web site?
•
Not all formats work with all browsers
Graphics Considerations
ƒ
Download times can be minimized by
keeping the file size small
•
ƒ
What are the tradeoffs?
You can reduce file size by:
•
Reducing image size
•
Increasing file compression
•
•
Tradeoff: a smaller picture
Tradeoff: reduced image quality
4. Graphic Formats for the Web
ƒ
Two formats are supported by many
browsers
•
GIF
•
JPEG
•
•
Graphics Interchange Format
Joint Photographic Experts Group
COMP 1270 Computer Usage II
7-4
Graphics
Winter 2012
Bitmap graphics
ƒ
Windows BitMap (.bmp) format stores info about
each pixel
ƒ
BMP iis th
the native
ti fformatt ffor th
the Wi
Windows
d
environment
ƒ
Web browser support has been limited, but most
newer versions of popular browsers will display them
•
large file sizes
GIF Images
ƒ
Graphics Interchange Format
ƒ
can display ≤ 256 (8-bit) colours
ƒ
used for
•
ƒ
most suitable for
•
ƒ
most g
graphics,
p
, line art,, text
bit-mapped graphics, non-photographic images with
modest color requirements, e.g., logos, buttons
Two standards for GIF
•
GIF87a (graphics) & GIF89a (graphics + other features)
GIF89a Features
ƒ
Animation
•
ƒ
AnimationFactory.com
Transparent background
•
ƒ
File contains a series of images
displayed in a loop
One colour is designated as the
background; underlying colour shows
through
Interlacing
•
Every second row of pixels is loaded
•
Has the effect of quickly loading a
(lower quality) image at first
COMP 1270 Computer Usage II
7-5
Graphics
Winter 2012
Animated gif images
Making animation
ƒ
There are several animation applications
you download
•
•
•
freeware or free trial versions
e.g. Advanced GIF Animator for Windows
http://www.gif-animator.com/
JPEG Files
ƒ
Can display millions of colours in a compressed
format
ƒ
Most useful for graphics requiring
ƒ
•
More colours than GIF
G can provide
•
More precise colour reproduction
Standard format for photographs taken with digital
cameras
COMP 1270 Computer Usage II
7-6
Graphics
Winter 2012
When to use…
GIFs
ƒ Create animated
images
ƒ Use transparent
colors
ƒ Display logos or clip
art up to 256 colors
JPEGs
Display photographs
ƒ Use images that
contain more than
256 colors
ƒ Reduce the file size
through "lossy"
compression.
ƒ
PNG Graphic Types
ƒ
ƒ
ƒ
The PNG graphic type is becoming an
increasingly popular graphic type
It is sometimes used in place of gifs
Wh ?
Why?
•
•
ƒ
Enhanced functionality
Free…
Downfalls
•
•
it doesn't support animation
Not all browsers support PNG fully
•
although recent versions of IE and FireFox do support it
PNG vs GIF
ƒ
ƒ
PNG formally stands for Portable Network
Graphics format
• Informally: PNG's Not GIF
Patent on compression method in GIF
• 1994:
1994 U
Unisys
i
announced
d it was going
i tto start
t t
charging firms developing software to
produce GIFs
• PNG was the resulting open-source
response
•
More colours, better compression, more
configurable transparency, ...
COMP 1270 Computer Usage II
7-7
Graphics
Winter 2012
5. Obtaining Graphics
ƒ
Easy to copy graphics from web pages
ƒ
Right click on the graphic
•
Gives you a menu that will show the file type,
and let you save the graphic as a file
file.
ƒ
Check the site to see if you have copyright
permission to use the graphics.
ƒ
Google has an image search tool
Producing your own Images
ƒ
ƒ
ƒ
It's also possible to make your own
graphic images
Graphics tools (better ones than Paint)
•
Adobe Illustrator
•
CorelDraw
Scanners and digital cameras capture
photographic images into JPEG files
•
Cheap and getting cheaper
Using Word to produce Images
Microsoft Word 2010 can be used to create
GIF or PNG images
ƒ
a.
Create images using Word's Picture tool
•
•
IInsertt - Shapes
Sh
- New
N
D
Drawing
i C
Canvas
Insert - SmartArt
b.
Copy the image and Do a Paste Special
c.
Right-click on the pasted image and Do a Save as
Picture…
•
As a GIF or PNG image
COMP 1270 Computer Usage II
7-8
Graphics
Winter 2012
Using Word to produce Images
Earlier versions of Word can also be used
ƒ
The procedure is different though
Create images using Word's Picture tool
•
ƒ
•
•
IInsertt - Shapes
Sh
- New
N
D
Drawing
i C
Canvas
Insert - SmartArt
Do a Save as Web Page. Word will produce a web
page and a folder.
Inside the folder are your pictures saved as GIF
files (e.g. image001.gif, image002.gif, etc.)
Rename the image files, move them to your web
site and discard the rest
a.
b.
c.
The image element
ƒ
The image element <img> places an
image in your page.
•
The source attribute src specifies the
location of the image file
•
e.g. place an image contained in oreo.gif
•
it must be present in the image tag
<img src="oreo.gif" />
The src attribute: relative path
ƒ
The src attribute can specify a relative path
e.g. <img src="images/oreo.gif" />
•
This will display a file called oreo.gif, located in a
subdirectory named images
e.g. <img src="../nav/back.gif" />
•
This will display a file called back.gif. To find it, we go
up one directory and into a subdirectory called nav
COMP 1270 Computer Usage II
7-9
Graphics
Winter 2012
The src attribute: absolute path
ƒ
The src attribute can also specify an
absolute path, though this is not commonly
used
•
e.g.
<img src="http://aplace.ca/pics/mug.gif" />
•
Web sites don't like people linking to images on their
site since it generates extra load on their web server
The alt attribute
e.g. <img src="oreo.gif" alt="my cat" />
• the alt attribute is important too - it gives a message
to display while the image is unavailable
• i.e.,
i e while the image is loading
loading, if the user has image
loading turned off, or if some error occurs so the
image can't be fetched
• It gives the user an idea of what is supposed to be
or will shortly be there
• Used by screen-readers for the visually impaired
and other non-graphical browsers
• XHTML Strict requires the alt attribute
height and width attributes
e.g. <img src="oreo.gif" alt="my cat"
height="400" width="600" />
ƒ
Specify height and width in pixels
•
•
ƒ
Usually used to specify the actual size of the image
It helps a browser load pages faster since it knows
how much room to leave for the image
You can stretch or shrink a graphic using
these attributes
•
•
But just making it appear smaller does not make the
file size smaller!
And it can distort the picture
COMP 1270 Computer Usage II
7-10
Graphics
Winter 2012
Text wrap
ƒ
Browsers place images inline with text
•
•
ƒ
i.e. an image is treated like another (possibly very large)
character in a line
This is also how Word treats images
W use CSS tto wrap text
We
t t around
d images
i
•
float: left | right | none
left places the image on the left margin and flows text along the
right side of the image
right places the image on the right margin and flows text along
the left
• none places the image inline (the default)
e.g. img.left{float: left} /* rule in a stylesheet */
<img src="oreo.gif" alt="my cat" class="left" />
•
•
•
Ending text wrap
ƒ
The CSS clear property specifies whether an
element allows floated elements on its sides
•
We can use it to stop an element from flowing beside an
image
•
clear: none | left | right | both
•
•
•
•
•
it will move the paragraph below the image
none (default) continues wrapping around floated elements
left moves the element below left floated images (but not right
floated images)
right moves the element below right floated images (but not left
floated images)
both move the element below both left and right floated images
Vertical alignment
ƒ
ƒ
We can control the vertical alignment of inline
images
We use the CSS vertical-align property
•
vertical align: baseline | top | bottom | …
vertical-align:
•
•
•
•
baseline (default) aligns the bottom of the image with
the "baseline" of the text
top aligns the top of the image with the tallest
element in the line
bottom aligns the bottom of the image with the lowest
element in the line
many other values are possible
COMP 1270 Computer Usage II
7-11
Graphics
Winter 2012
7. Images and links
ƒ
You can combine an image with a link
ƒ
Just put the image tag inside the link
<a href="../index.html">
<img
g src="home.gif"
g
alt="home" /
/>
</a>
ƒ
This would place the graphic home.gif on your
page, and link it to the default page in a
directory above.
Images and Links
ƒ
A webpage with links to many images often
shows them first as thumbnails
•
•
ƒ
Thumbnails are smaller images that will load quickly
and give the user an idea of what the larger image
looks like
The user can then pick and download only the large
images they want to see
You can link to the large image directly, e.g.
<a href="oreo.gif">
<img src="oreo_thumb.gif" alt="thumbnail" />
</a>
Video Content
ƒ
ƒ
Use the object element
Example from textbook, page 130
<div>
<object
j
data="puppy.mpg"
p ppy pg type
yp = "video/mpeg"
/ p g
width = "600" height = "480">
<param name = "src" value ="puppy.mpg" />
<param name = "autoplay" value =”true" />
</object>
</div>
COMP 1270 Computer Usage II
7-12
Graphics
Winter 2012
Audio Playback
ƒ
Example from textbook, page 131
<div>
<object
j
data="test.wav" type
yp = "audio/x-wav"
/
width = "250" height = "30">
<param name = "src" value ="test.wav" />
<param name = "autoplay" value ="true" />
<param name = "autoStart" value ="1" />
</object>
</div>
COMP 1270 Computer Usage II
7-13