SM5312 week 3: web graphics1 Web Graphics Nick Foxall.

SM5312 week 3: web graphics 1

Web Graphics

Nick Foxall


Graphics on Computers

Any image displayed on a computer screen* is an array of small square dots of colour, called pixels.

There are two types of image representation used for computer graphics:

1. bitmaps

2. vector graphics.

[*screen can now include almost any device, including mobile phones, PDAs, and flat panel TVs]


Graphics on Computers: Bitmaps

Bitmaps

A bitmapped image consists of an array of colour values, one for each pixel in the image.


Graphics on Computers: Bitmaps

Bitmaps…

are most suitable for images with continually varying tones, such as photographs.


Graphics on Computers: Vectors

Vector Graphics

Created from the mathematical description of a picture, defined from a collection of geometrical shapes, together with stroke and fill information.


Graphics on Computers: Vectors

Vector Graphics…

Are most suitable for line art, flat-colour drawings and patterns, and cartoon-style images

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.


Bitmaps vs. Vectors

Comparison

Bitmap Vector Graphic


Bitmaps vs. Vectors

Resolution and device dependent: scales to the ‘size’ of the output device

Larger file size

Resolution and device independent: scalable (theoretically to any size)

Smaller file size



Graphics for the web

Used on the web Not used on the web (Except for SVG,and within Flash SWF)


MUST CONVERT


Graphics on Screen

RGB

The colour of a pixel on any display is made up of proportions of the three additive primaries: red, green and blue.

The RGB colour model represents any colour by three numbers, specifying the relative proportions of red, green and blue.

With 24-bit colour (one byte for each of R, G and B) about 16.7 million different colours can be represented.


Graphics on Screen: Colour Space

Colour Space

Colour spaces are a general mechanism for representing colours as a finite sequence of numerical values. They depend on the precise values used for red, green and blue.

sRGB is a standardized colour space recognised by the World Wide Web Consortium for use in web images

colorsync


RGB in Photoshop

Always work on colour images for the web (and video) in RGB mode.

Black-and-white photos can be set to Greyscale mode.

Images in Indexed Color mode may have to be converted to RGB before any adjustments can be made


Web Graphic Formats

Only 3 bitmapped image file formats supported in most web browsers:

GIF

JPEG

PNG


Web Graphic Formats: GIF

GIF (Graphics Interchange Format)

Originally devised for users of the Compuserve Bulletin Board system in the 1980’s

GIF images are indexed colour images, supporting up to 256 colours only

GIFs can include more than one image in a single file (can support simple animation)

GIFs can support transparency (one colour only)

GIFs support lossless compression (though lossy compression can be added)

File extension: .gif


Web Graphic Formats: JPEG

JPEG (Joint Photographic Experts Group)

A specification laid down by the Joint Photographic Experts Group, part of the International Standards Organisation (ISO)

JPEG images are 24-bit colour images (mostly RGB)

Only a single image can be stored in one JPEG file (no animation capability)

JPEGs do not support transparency

JPEGs support lossy compression, and allow for progressive compression / decompression

File extension: .jpg .jpeg


Web Graphic Formats: PNG

PNG (Portable Network Graphics)

Devised as a replacement for the GIF format in the mid-1990s

PNG images can be saved as full 24-bit colour images, OR as indexed colour images:

• PNG-24

• PNG-8

Only a single image can be stored in one PNG file (no animation)

PNGs support transparency using alpha channels, meaning a range of transparency can be supported (e.g. a colour allowing a background to show through)

PNGs support lossless compression, and allow for progressive compression / decompression (called ‘interlaced’)

File extension: .png


Web Graphics: Resolution

Standard screen resolution is generally agreed to be 72 ppi (pixels per inch)

The actual physical size of one screen from another may vary though:

a 1024 x 768 pixel screen may be 17 inches (diagonal) physical size, or 20 inches (diagonal) physical size — its the size of the pixels that are different

Mobile devices now have very fine pixels — 3.5 inch screens, but up to 166 pixels per inch, creating 480 x 320 pixel screens

A 72 ppi image will always occupy the same proportion of a screen, no matter how big or small the screen is physically


Web Graphics: Resolution & Resampling

Images for embedding in Web pages should always be saved at screen resolution, which is taken to be 72 ppi

The process of changing an image’s resolution is called resampling, and always potentially involves a loss of quality

When the resolution is reduced, the process is called downsampling


Web Graphics: Resolution & Resampling

We often need to downsample images for the web to get them to screen resolution (72 ppi) AND to get them to an appropriate pixel dimension required for a web page layout

This saves file size, AND reduces unnecessary use of bandwidth when users access your page


Web Graphics: Resampling

The 2 most common algorithms for resampling are;

Bilinear Interpolation

Bicubic Interpolation

Bicubic is often preferred, as itproduces better results


Web Graphics: Compression

Compressing bitmapped images reduces the amount of storage they require, AND the time they take to transfer over a network (bandwidth usage)

Compression algorithms may be lossless or lossy.

Lossless: file is compressed, without any loss of original image quality

Lossy: file is compressed, but with (permanent) loss of original image quality;

• Degree of loss dependent on amount of compression: a balance has to be found


Web Graphics: Lossless Compression

Rearranges data in the image file, but does not discard data

Works better for ‘graphic’ style images, and for text-turned-to-image situations, where large blocks of colour are more effectively compressed

Lossless compression algorithms include LZ77, LZ78, LZW and Huffman

GIF and PNG web file formats use lossless compression


Web Graphics: Lossy Compression

Rearranges data in the image file, and discards data that is (generally) not easily perceived by the eye

Works better for continuous tone images, photographs

The JPEG web file format use lossy compression, and employs its own compression algorithm

Programmes like Photoshop allow the designer to control and compare the degree of compression against the loss in image quality, and strike a balance


Web Graphics: Quality vs. Compression

Imagequality

Filesize


Web Graphics: Anti-aliasing

The smoothing of fine lines and edges in order to produce better results at lower (i.e. screen) resolutions

Anti-aliasing softens “the jaggies” —the jagged edge effect:

Particularly useful for rendering text as a graphic


Web Graphics: Transparency (indexed)

Transparency (a transparent background, or a transparent area of an image) can be set in GIF and PNG file formats

GIF and PNG-8 (both indexed colour formats) support selection of a single colour as a transparent colour.

Getting the edges of other colours to look smooth against the image’s final background involves dithering


Web Graphics: Transparency (alpha)

Transparency (a transparent background, or a transparent area of an image) can be set in GIF and PNG file formats

PNG-24 uses alpha channel transparency

Meaning degrees of transparency (or opacity) can be included in a PNG-24 file, allowing a background to show through in various ways


Web Graphics in XHTML

Images may be embedded in an XHTML document using the empty, inline img element, whose src attribute’s value is the URL of a GIF, JPEG or PNG file. Example:

<img src=“images/forest.png” alt=“Forest Image”>

The compulsory alt attribute provides a short text alternative.

<img src=“images/forest.png” alt=“Forest Image” title=“The forests of Canada look spectacular”>

A CSS title attribute also provides a small text box that describes an image in more detail when rolled over.


Web Graphics in XHTML

Images can be made into clickable hyperlinks. Simply wrap a hypertext reference a href tag around the img tag:

<a href=http://www.cityu.edu.hk><img src=“images/forest.png”

alt=“Forest Image”></a>

This is mostly used for creating image-based navigation buttons

The image will likely have a blue border, similar to the text underline, indicating a hyperlink. But normally we use CSS to hide or turn off all image hyperlink borders. Example:

img { border:0; }

http://www.renttoownrealestate.com/

http://www.renttoownrealestate.com/


Web Graphics in CSS

Images may be referenced in a CSS document or specification, usually with a simple URL link to the image.

Images can be used for backgrounds and borders in CSS.

Example for a background image in the body element:

body {

background-color: #FFFFFF;

background-image: url(background.png);

background-repeat: repeat-x; }


Web Graphics in XHTML: image maps

An image map contains “hot spots”, which act as link anchors.

“Hot spots” may be defined by the shape and coords attributes of area or a elements within a map element

“Hot spots” are referred to by a usemap attribute of the img tag.

The easiest way to create image maps is within DreamWeaver!


Other Web Image Formats

SVG (Scalable Vector Graphics)

A vector graphics markup language recommended by the W3C (World Wide Web Consortium)

Has little support and is rarely used

SWF (ShockWave Flash)

Flash animations employ vector graphics, although since Flash 7, bitmap elements and effects have also been added

Both formats are embedded into XHTML documents using the object tag

SM5312 week 3: web graphics1 Web Graphics Nick Foxall.

Documents

Transcript of SM5312 week 3: web graphics1 Web Graphics Nick Foxall.