CMPT 165

Introduction to the Internet
and the World Wide Web

Unit5: Graphics

Topics

Using Images on Web Pages
Image Formats
Bitmap Image Formats

The `<img>` Tag Example Again


							<p> 

							    <img src="http://example.com/vacation.jpg" 

							            alt="My vacation" />

							</p> 

							<br/> 

							<p> 

							    <img src="pics/vacation.jpg" alt="My vacation" />

							</p>

* the HTML reference for <img> Tag

`"alt"`, `"width"`, and `"height"` attributes

"alt": is a necessity if the image actually conveys any content
so if the image actually has some meaning
then alt should be a text-equivalent of that meaning
"width" and "height": used to give the browser a hint about how big the image is;
    how much space it will take up on the page
    this way the browser will quickly fill the page
        with an empty rectangle where the image goes
both values are given in pixels

Important hint about `"width"` and `"height"`

you should not use width and height
to change the size of an image

if you want the image to be a different size, then it should be scaled in an image editor

when adding images to your web pages
it can be very easy to create pages
that take an annoying amount of time to load

for a page containing 5 images of size 2MB each

~ 2-4 seconds on computer
>8 seconds on mobile (with a descent connection)

The Problem

if the total amount of data that must be downloaded is too large (e.g. 5 images of size 2MB each)
the page will take much longer to be loaded

The Solution

scale-down the images!

when creating pages, keep the total size of files
(HTML + CSS + images + JavaScript + …)
less than 1MB

Image Formats

different ways to represent images
in a computer (and on web pages)

Bitmap and Vector Images

Vector Image: represented as a collection of shapes: lines, curves, circles, squares, etc. (left red circle)
Bitmap Image: represented as a grid of pixels each of which is given a particular colour (right red circle)

Bitmap and Vector Images (Zoomed Example)

vector description of the left image:: a circle with a black outline and red fill, with centre at (...px, ...px) and radius of ...px
bitmap description of the right image:: a collection of coloured square pixels

Vector Image Format Advantages

Shorter download time
- Vector Image Example ~ 2KB
- Bitmap Image Example ~ 11KB
More smooth scaling when being printed, or on high-resolution displays

* image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/phone-icon.svg

Vector Image Format Disadvantages

not all images make sense as a vector image! Phone Picture

* image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/phone-pic.jpg

Image Vectorization

an automatic attempt to turn the image
into vector shapes
not all the images can be easily converted
to the vector format
In such cases the image size drastically increases! (here 12KBs to 54KBs)
Phone Pictured Traced

* image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/phone-pic-traced.svg

Scalable Vector Graphics (.SVG) format

the only vector image format that is relevant to the web;
we will work more with SVG later in the course

Bitmap Image Example

as mentioned before a bitmap image is made up of
a grid of pixels

* image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/compression2.png

Bitmap Image Contents - Basic Idea

row 1: white pixel, white pixel, white pixel, ...
row 2: dark grey pixel, black pixel, black pixel, ...
...

* image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/compression1.png

Windows Bitmap (.BMP) format

simply record the color of each pixel
with no compression!
the BMP format is not used on the web because it produces very large (uncompressed) files

Portable Network Graphics (.PNG) format

same idea as windows bitmap
but with image compression!

produces smaller files with no loss in quality
therefore is common on the web
the image taking 526KBs using .BMP can take
around 36KBs using .PNG (24-bit palette) without loss of information

Bitmap Image Format
Different Palettes (Color Depths)

we can use different palettes for storing the color of each square in a bitmap image; the palette is stored along with the pixel data in the file itself

24-bit color (true colour) palette: 16,777,216 different colors
8-bit color palette: 256 different colors
generally, n-bit color palette: 2ⁿ different colors

Color Depth Choice Example [8-bit vs. 3-bit]

* image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/depth.png

Color Depth Choice Example [8-bit vs. 3-bit]

* image from http://www.cs.sfu.ca/CourseCentral/165/common/study-guide/figures/phone-pic-[8/3].png

Image Compression Types

lossless compression: e.g. PNG format
lossy compression: e.g. JPEG format

JPEG Image Format

designed specifically for photographs, so excellent for storing photographs, but not good at other types of images
has a quality parameter (1–100) which can be used to trade off file size and image quality