Copyright 2003 Monash University IMS5401 Web-based Information Systems Topic 2: Elements of the Web (d) Digital representation

Copyright 2003 Monash University 2 Agenda 1. Background 2. Digital representation of media 3. File sizes for web page elements 4. File formats for multimedia elements 4. Implications for web developers

Copyright 2003 Monash University 3 Elements of the Web THE WEB Connecting computers Digital representation of documents Display and organisation of documents Linking documents

Copyright 2003 Monash University 4 1. Background: Multimedia documents and the web What would the web be like if it could include only black and white text-based documents? Tim Berners-Lee’s original proposal saw the capability for multimedia documents as an independent development, but an essential element for his ‘web’ of documents To what extent are web-based systems now dependent on the use of multimedia - colour, graphics, animation, sound, video - to make them work? (eg how much would the porn industry use the web without multimedia?)

Copyright 2003 Monash University 5 Issues for multimedia documents and the web The use of multiple media is seen as crucial for effective presentation of information; the success of the Web has been strongly based in its ability to use multimedia Problems in dealing with multimedia have also been the single greatest source of complaints and dissatisfaction about the web Some proposed uses of the web have never got going because of its weaknesses in dealing with multimedia To understand why, we need to examine how multiple media are represented in a computer

Copyright 2003 Monash University 6 2. Digital representation Basics Numbers Text Graphics Colour graphics Animation and video Sound

Copyright 2003 Monash University 7 Digital representation: Remember the basics! Computers represent everything they store as collections of 1s and 0s; these are called bits Computers are designed to manipulate and move data around in groups of bits called bytes; one byte = 8 bits Representation of all media requires conversion of the message from its ‘normal’ form (words, numbers, pictures, sound, etc) to collections of bits

Copyright 2003 Monash University 8 Digital representation: Numbers Very simple! In our decimal number system, all numbers are written as combinations of powers of 10: eg 1503 = (1 x 10 3 ) + (5 x 10 2 ) + (0 x 10 1 ) + (3 x 10 0 ) We can just as easily use a binary system in which numbers are represented as powers of 2: eg = (1 x 2 4 ) + (0 x 2 3 ) + (0 x 2 2 ) + (1 x 2 1 ) + (1 x 2 0 ) (ie = 19 in a decimal system) Therefore to represent numbers in a computer we just convert them into binary To store a number we need as many bits as it takes to represent it in binary form

Copyright 2003 Monash University 9 Digital representation: Text Computers use a standard coding system for alphabetic characters, symbols and punctuation marks; called the ASCII code Each text character is represented by a specified sequence of bits Eg the letter M = ASCII code 77 = Therefore, every alphabetic character requires 1 byte of storage Eg a page of text = about 3000 characters = 3000 bytes of storage (24,000 bits)

Copyright 2003 Monash University 10 Digital representation: Graphics Computers represent a graphic by superimposing a grid (raster) over the graphic Each grid square = a pixel (picture element) For simple black and white graphics, the computer assigns a value to each square depending on whether it is black or white (eg 1=black, 0=white) The more squares in the grid, the better quality the graphic representation (resolution); (….. but the more storage space is needed for the graphic)

Copyright 2003 Monash University 11 Digital representation: Colour Graphics As for black and white graphics, but we add extra storage space for each pixel to define its colour Many systems to represent colour; simplest one is RGB (Red Green Blue), where the computer stores a number which indicates the amount of each of these 3 colours which should be shown on the monitor for that pixel The more precisely we want to measure the amount of each colour, the more storage we must allocate to recording colour information for each pixel; this is called the bit depth

Copyright 2003 Monash University 12 Representing Colour in Graphics: Bit Depth 1 bit colour - Black or white 2 bit colour - 4 colours 8 bit colour colours 16 bit colour - 65,536 colours 24 bit colour - 16, 777, 216 colours

Copyright 2003 Monash University 13 Calculating the size of graphics files Size of graphics file = height*width*bit depth Height and width determined by number of pixels - (standard screen=640*480 pixels) Depth depends on colours (see previous slide) Eg 640*480*24 bit depth image (good resolution, high quality colour graphic the size of a standard computer screen) needs 921,600 bytes of storage

Copyright 2003 Monash University 14 Digital representation: Vector Graphics Store the graphic as an instruction Software at reader end converts instruction into raster (bit map) for screen display For example Line [(2,3), (345,197), Line-type=dotted]; Circle [(234, 267), 45, Thickness=3] More efficient storage and scalable to suit different display types Requires software at user end plus standards for vector instructions Good only for line graphics; can’t do photos, etc

Copyright 2003 Monash University 15 Digital representation: Animation and video Animation or video is created by showing a rapid sequence of still pictures Frame rate = rate of display of still pictures in a video or animation Frame rate of 20+ pictures per second needed for high quality video or animation Low frame rates (<15 frames/sec) gives jerky animation/video

Copyright 2003 Monash University 16 Animation and video file sizes File size for animation/video files = size of graphics * frame rate * time Eg 1 minute of high quality video (24 bit depth colour; full screen display (640 x 480 pixels) frame rate of 24 frames/second) requires: (640 x 480 x 24) x 24 x 60 = 1.3Gb of storage

Copyright 2003 Monash University 17 Digital representation: Sound analog to digital sound conversion sampling rate 11kHz - 44KHz 11kHz - narrative voice quality (AM radio) 22kHz - general purpose (FM radio) 44kHz - top quality (audio CD) Sound resolution 8-bit (256) or 16 bit (65,536) (like bit depth for colour) Stereo sound = sound for 2 speakers = twice the storage of mono sound

Copyright 2003 Monash University File sizes for web page elements Some sample sizes When does it matter? File compression

Copyright 2003 Monash University 19 A summary of sample file sizes A page of text = 3Kb A full screen graphic with ‘normal’ colours = 300Kb A full screen graphic with ‘high quality’ colours = 1Mb One minute of voice = 0.6Mb One minute of CD quality music = 5-10 Mb One second of high quality full screen video = 25-30Mb (Remember, these are in bytes, so multiply by 8 to convert to the number of bits)

Copyright 2003 Monash University 20 When does size matter? When a web server sends a page to a browser, the length of time it takes to get there (download time) depends on file size and speed of transmission To calculate the download time for a web page: work out the size of each of the page’s elements (text, graphics, etc); add them together; convert to bits; and Divide by the transmission speed (in bits per second) Answer = download time in seconds Look at data transmission rates in next lecture

Copyright 2003 Monash University 21 Compression Enormous amounts of work have gone into developing compression techniques for digital media to reduce file sizes Wide variety of techniques for both: Lossless copmpression = no loss of quality; and Lossy compression = some loss of quality Very complex area; rapidly evolving; too messy to talk about here Provides a partial solution to the file size problem

Copyright 2003 Monash University File formats for web documents Multimedia before the web Why different file types? Proprietary formats and ownership issues Quality of reproduction issues Efficiency issues File transmission on the Internet - MIME-types

Copyright 2003 Monash University 23 File formats for web documents Multimedia on the web - MIME-types, browsers and plug-ins Coping with unknown MIME-types Standards?! (discuss in later lecture) Text - Acrobat Bitmapped graphics - GIF, JPEG, PNG(?) Vector graphics - SVG? Sound - WAV, AIF, AU, MP3 Video - Quicktime, AVI, MPEG Animation - Shockwave The web can cope fairly well with common standard files, but it can become very confusing otherwise

Copyright 2003 Monash University Implications for web developers (Web design can require a lot of mathematics!) Digital representation of all media except numbers is clumsy and inefficient It takes a relatively small amount of storage to represent text It takes a lot of storage to represent a graphic or sound or simple animation It takes a very large amount of storage to represent high quality graphics or sound It takes an enormous amount of storage to store video or complex animations

Copyright 2003 Monash University 25 What can be done about the storage requirements of digital media? Remove web page elements which need big files - no video, sound, complex animation Reduce actual size of web page elements - smaller pictures, shorter animation/video/ sound Trade-off quality against file size - fewer colours, lower quality sound, jerky animation/video Compress files

Copyright 2003 Monash University 26 Issues for the Web developer How important are the big web page elements to the site? How much do I have to change my page sizes to cater for my users’ data transmission rates? How far can I go in reducing design quality in order to achieve better page download speeds? How much will users put up with slower download speeds in order to get a high quality page design? What matters most for my system and its users, and how can I find out what my web page users think?!