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