topic 05 : integrating media
DESCRIPTION
TRANSCRIPT
Topic 5: Integrating Media
Er. Pradip Kharbuja
Image File Formats
▪ Three image file formats are supported by web browsers.
1. GIF (Graphics Interchange Format)
2. JPEG (Joint Photographic Experts Group)
3. PNG (Portable Network Graphics)
▪ All three file formats are bitmapped images.
Bitmap Images
Bitmap images consist of pixels– Tiny squares
– Each square is a single colour.
Bitmap Images
▪ Image file formats use compression algorithms to reduce the size of images.
1. Lossless compression
▪ The exact pixels can be recreated.
2. Lossy compression
▪ Some information is lost.
▪ An estimation of the original can be recreated.
Bitmap Images
▪ Colour depth refers to the number of possible colours an image can feature.
– E.g. 8-bit
▪ A pixel can be one of 2^8 (256) possible colours.
GIF
▪ Graphics Interchange Format
▪ GIFs are 8-bit images.
▪ Lossless compression
▪ It is limited to 256 colors
▪ Well suited to images that feature a limited number of colours– Logos -Buttons -Diagrams
▪ Can be transparent
JPEG
• Joint Photographic Experts Group
• JPEGs are 24-bit images
– A pixel can be one of over 16 million colours.
▪ Lossy compression
▪ Appropriate for images that feature a wide range of colours
– Photographs
▪ Cannot be transparent
PNG (Portable Network Graphics)
▪ PNGs can be 8-bit, 16-bit or 24-bit
▪ Lossless compression
▪ PNG is a W3C recommendation.
▪ The 8-bit PNG offers some advantages over GIF images.
Variable levels of transparency
Smaller file size than the equivalent GIF
▪ The 24-bit PNG is larger in file size than the equivalent JPEG.
JPEG still a better choice for photographic images
Preparing Images for the Web
▪ Images taken with a digital camera often have very high resolutions.– Too big for the web
▪ Graphics editing applications can be used to perform simple operations.– Cropping
– Resizing
– Converting between different file types
Preparing Images for the Web
▪ Commonly used image editing applications
– Photoshop
– Fireworks
– GIMP (GNU Image Manipulation Program)
Inserting Images
Inserting Images
▪ The <img/> element is a standalone element
– The src attribute specifies the URL of the image file.
– The alt attribute specifies alternative text.
▪ Displayed if the image file is corrupted or cannot be found
▪ Accessibility
–Screen Readers will read out the alternative text.
Inserting Images
▪ In XHTML Strict 1.0, the <img/> element is an inline element.
– So, it must be nested inside a block level element for the page to be valid.
Images as Links
▪ Images can easily act as hyperlinks– Nest the <img/> element inside an anchor element
Images and CSS
Images and CSS
Images and CSS
▪ The <img/> element can be targeted using CSS.– <img/> is an inline element.
– By default, text aligns with the bottom of an image.
▪ The float property is used to move an element to the left or right.– Text then wraps around the floated image.
CSS Background Images
▪ Using CSS, we can specify background images, color for elements.
– We can set the position of the image
– Whether or not it repeats
– Whether or not it should scroll with the contents
Demo
Image Replacement Techniques
▪ Often, designers want to replace text with images.– Use fonts that may not be on the user’s machine
Image Replacement Techniques
▪ There are a number of established techniques for replacing image.
– The above example uses the Rundle-Phark method.
– The text-indent property is used to remove the HTML text from view.
▪ Screen readers can still read the contents.
http://css-tricks.com/examples/ImageReplacement/
Audio and Video
▪ A video is a sequence of images (frames).
▪ Each second of video consists of many frames, often as many as 30 frames per second.
▪ Video and audio files are very large.
▪ In the early days of the web, use of audio and video was limited due to bandwidth limitations.
▪ Video is now an important part of the web.
▪ Video/audio files are compressed to be delivered over the web.
Video and Audio Compression
▪ Codec
– Software that compresses and decompresses a video/audio stream
– The compression is usually lossy.
▪ Commonly used video codecs on the web
– H.264, Theora, VP8, Microsoft codecs
▪ Commonly used audio codecs on the web
– MP3, Vorbis, AAC http://en.wikipedia.org/wiki/Video_codec
http://en.wikipedia.org/wiki/List_of_codecs
Container Formats
▪ Codec vs Container
▪ Video files consist of multiple data types.
– A video stream
– One or more audio streams
– Other data such as captions and cover picture
Container Formats
▪ The video file is simply a container.
– Brings together different video and audio streams
– Specifies how they are arranged and work together
– e.g. The Flash video format is container for H.264 video and either MP3 or AAC audio
▪ Video container formats used on the web
– MPEG – Part 14 (MP4), Flash Video, Ogg (OGV), Webm
Playing Media on the Web
▪ Older web browsers have no in-built way to play media files.
– Audio and video files are played by media players.
– Flash Player, Windows Media Player, iTunes
▪ As developers we have two options:
– Link to the media file using an anchor (<a>) element.
– Embed a media player in the web page using the <object>.
Link to a Media File
▪ <a href="birdsong.mp3">bird song</a>
▪ When the link is clicked
– Browser downloads the file
– Opens an application to run the file
The <object> Element
▪ The <object> element specifies three things:– The implementation▪ Specifies the application used to display the file
– The data ▪ The URL of the audio/video file
– Parameters or settings for the embedded file
▪ The text content is used to specify alternative content.– For users that cannot view the video
Mobile Devices and Media
▪ The issue of file size and download speed is even more important.
– Slower network speeds
– Pay for data transfer
– Images should be small.
▪ Many mobile devices have small screens.
Sourcing Media
▪ Most text, images, video and audio files found on the web are copyrighted.
– Cannot be used without permission
▪ There are also many files that we can use.
– Public domain images, video and audio
– Media licensed for copying and adaptation
▪ Usually require attribution
▪ Some images on Flickr
Sourcing Media
▪ This simple attribution identifies
– Link back to the original
– The creator
– The license the work has been released under
References
▪ http://css-tricks.com/examples/ImageReplacement/
▪ http://css-tricks.com/css-image-replacement/
▪ http://en.wikipedia.org/wiki/Video_codec
▪ http://en.wikipedia.org/wiki/List_of_codecs
▪ http://en.wikipedia.org/wiki/Mp4