graphics in the web digital media: communication and design. 06.03.2007

Graphics in the webDigital Media: Communication and Design.

06.03.2007

Digital Media: Communication and Design F2007

Comments

Mandatory assignmentDon’t panic!!Photoshopphotoshop.html in public_htmlPicture of yourself


Goals of the lecture

What is a digital image Different formats we can use in the web

GIF, JPEG, PNG Basic things about Photoshop

Continued in the assignment


Index

Digital image GIF JPEG PNG Image editing


Digital image

Rectangular grid of pixels Resolution: width x height

in pixels 9 x 12 = 108 pixels Colour depth: amount of

information in each pixel

1 2 3 4 5 6 7 8 9123456789101112


Digital image II


Vector image

Shapes are defined by mathematical expressions

Can scale without losing detail Example with Flash


600

400

800x600

1024x768


ResolutionDisplay resolution stats (w3schools)

Higher 26%

1024x768 54%

800x600 14%

640x480 0%

Unknown 6%


Resolution

2272 x 1704 3.8 megapixels 11.1 MB uncompressed 1.5 MB JPEG

640 x 480 (web size) 0.3 megapixels 900 KB uncompressed 106 KB JPEG


Colour depth

Bit: unit that represents either a 0 or a 1

Binary image: Black and white 1 bit per pixel 80x100 = 80 Kbits = 10 KB


Colour depth II

Greyscale image:8 bits per pixel = 256

possible values


Colour depth III

RGB colour: Combine Red, Green and Blue light Values usually given in hexadecimal base R: 241 = #F1 G: 21 = #15 B: 109 = #6D


Colour depth IV

True colour:24 or 32 bits per pixel =

16.777.216 values8 bits for each colour and

alpha channel85% of users

(thecounter.com)


Colour depth V

Indexed colour8 bits per pixel = 256 colours at one timeThe possible colours are stored in a palette

(colour map)


Index



GIF

Graphic Interchange Format Indexed images with max 8 bits per pixel Lossless compression May contain transparent areas May contain multiple images


GIF II: Palette

Contains the colours that can be used Maximum of 8 bits = 256 colours Common palettes:

Exact Adaptive Perceptual Selective (default in Photoshop)

Example: blue.jpg, brown.jpg


GIF III: Compression

Lossless compression Good when compressing areas with the

same colour Not good for gradients or photos


GIF IV

Number of colours:Find minimum number of

colours needed Dither: “create” colours

with a limited paletteExample

Bit depth # of colours1 22 43 84 165 326 647 1288 256


Index



JPEG

Joint Photographic Experts Group RGB 24-bit colour image Lossy compression No transparency


JPEG II

Very good compressing photographic images

Not good compressing flat coloursExample in Photoshop

Lossy compression: It’s possible to specify the degree of

compression


Index



PNG

Portable Network Graphic Created for the web 24- or 48-bit colour, 16-bit grayscale and

8-bit indexed colour images Lossless compression 8- or 16-bit alpha channel W3C and ISO standards


PNG II

Better compression than GIF Larger files than JPEG

But better quality IE6 doesn’t support transparency


Which format to choose

PNGJPEG GIF


Index



Some basic Photoshop

Dark Mid Light


Some basic Photoshop II


Some basic Photoshop III


Some basic Photoshop IV

graphics in the web digital media: communication and design. 06.03.2007

Documents