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 ...
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 ...
Bitmap Images
▪ Colour depth refers to the number of possible colours an
image can feature.
– E.g. 8-bit
▪ A pixel can be ...
GIF
▪ Graphics Interchange Format
▪ GIFs are 8-bit images.
▪ Lossless compression
▪ It is limited to 256 colors
▪ Well sui...
JPEG
• Joint Photographic Experts Group
• JPEGs are 24-bit images
– A pixel can be one of over 16 million colours.
▪ Lossy...
PNG (Portable Network Graphics)
▪
▪
▪
▪

PNGs can be 8-bit, 16-bit or 24-bit
Lossless compression
PNG is a W3C recommendat...
Preparing Images for the Web
▪ Images taken with a digital camera often have very high
resolutions.
– Too big for the web
...
Preparing Images for the Web
▪ Commonly used image editing applications
– Photoshop
– Fireworks
– GIMP (GNU Image Manipula...
Inserting Images
Inserting Images
▪ The <img/> element is a standalone element
– The src attribute specifies the URL of the image file.
– T...
Inserting Images
▪ In XHTML Strict 1.0, the <img/> element is an inline
element.
– So, it must be nested inside a block le...
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 wi...
CSS Background Images
▪ Using CSS, we can specify
background images, color
for elements.
– We can set the position
of the ...
Image Replacement Techniques

▪ Often, designers want to replace text with images.
– Use fonts that may not be on the user...
Image Replacement Techniques

http://css-tricks.com/examples
/ImageReplacement/

▪ There are a number of established techn...
Audio and Video
▪ A video is a sequence of images (frames).
▪ Each second of video consists of many frames, often as many ...
Video and Audio Compression
▪ Codec
– Software that compresses and decompresses a
video/audio stream
– The compression is ...
Container Formats
▪ Codec vs Container
▪ Video files consist of multiple data types.
– A video stream
– One or more audio ...
Container Formats
▪ The video file is simply a container.
– Brings together different video and audio streams
– Specifies ...
Playing Media on the Web
▪ Older web browsers have no in-built way to play media files.
– Audio and video files are played...
Link to a Media File
▪ <a href="birdsong.mp3">bird song</a>
▪ When the link is clicked
– Browser downloads the file
– Open...
The <object> Element

▪ The <object> element specifies three things:
– The implementation
▪ Specifies the application used...
Mobile Devices and Media
▪ The issue of file size and download speed is even more
important.
– Slower network speeds
– Pay...
Sourcing Media
▪ Most text, images, video and audio files found on the web
are copyrighted.
– Cannot be used without permi...
Sourcing Media
▪ This simple attribution identifies
– Link back to the original
– The creator
– The license the work has b...
References
▪ http://css-tricks.com/examples/ImageReplacement/
▪ http://css-tricks.com/css-image-replacement/
▪ http://en.w...
Upcoming SlideShare
Loading in...5
×

Topic 05 : Integrating Media

489

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
489
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Topic 05 : Integrating Media

  1. 1. Topic 5: Integrating Media Er. Pradip Kharbuja
  2. 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. 3. Bitmap Images Bitmap images consist of pixels – Tiny squares – Each square is a single colour.
  4. 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. 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. 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. 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. 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. 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. 10. Preparing Images for the Web ▪ Commonly used image editing applications – Photoshop – Fireworks – GIMP (GNU Image Manipulation Program)
  11. 11. Inserting Images
  12. 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. 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. 14. Images as Links ▪ Images can easily act as hyperlinks – Nest the <img/> element inside an anchor element
  15. 15. Images and CSS
  16. 16. Images and CSS
  17. 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. 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. 19. Image Replacement Techniques ▪ Often, designers want to replace text with images. – Use fonts that may not be on the user’s machine
  20. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 30. Sourcing Media ▪ This simple attribution identifies – Link back to the original – The creator – The license the work has been released under
  31. 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
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×