• Like
Topic 05 : Integrating Media
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Topic 05 : Integrating Media



Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Topic 5: Integrating Media Er. Pradip Kharbuja
  • 2. 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.
  • 3. Bitmap Images Bitmap images consist of pixels – Tiny squares – Each square is a single colour.
  • 4. 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.
  • 5. 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.
  • 6. 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 ▪ Can be transparent -Diagrams
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. Preparing Images for the Web ▪ Commonly used image editing applications – Photoshop – Fireworks – GIMP (GNU Image Manipulation Program)
  • 11. Inserting Images
  • 12. 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.
  • 13. 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.
  • 14. Images as Links ▪ Images can easily act as hyperlinks – Nest the <img/> element inside an anchor element
  • 15. Images and CSS
  • 16. Images and CSS
  • 17. 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.
  • 18. 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
  • 19. Image Replacement Techniques ▪ Often, designers want to replace text with images. – Use fonts that may not be on the user’s machine
  • 20. Image Replacement Techniques http://css-tricks.com/examples /ImageReplacement/ ▪ 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.
  • 21. 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.
  • 22. 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 http://en.wikipedia.org/wiki/Video_codec – MP3, Vorbis, AAC http://en.wikipedia.org/wiki/List_of_codecs
  • 23. 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
  • 24. 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
  • 25. 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>.
  • 26. 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
  • 27. 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
  • 28. 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.
  • 29. 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
  • 30. Sourcing Media ▪ This simple attribution identifies – Link back to the original – The creator – The license the work has been released under
  • 31. 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