FIT1050 Web Fundamentals
Web Media Formats
Copyright Warning
Copyright By PowCoder代写加微信 assignmentchef
Commonwealth of Australia Copyright Act 1968
This material has been reproduced and communicated to you by or on behalf of Monash University in accordance with section 113P of the Copyright Act 1968 (the Act).
The material in this communication may be subject to copyright under the Act. Any further reproduction or communication of this material by you may be the subject of copyright protection under the Act.
Learning objectives
How images work
● Understand how image data is represented by computers
● Observe how lossy compression can degrade quality Web image formats
● Learn about web-safe image formats
● Consider differences between different image formats Audio and video formats
● Compatibility of various web audio and video formats
● Practical considerations when using audio and video online
Background: How Images Work
Review: Colour values are numbers
RGB Notation
Hexadecimal
rgb(0,0,0)
000000000000000000000000
rgb(0,0,255)
000000000000000011111111
rgb(0,255,0)
000000001111111100000000
rgb(255,0,0)
16,711,680
111111110000000000000000
rgb(255,255,255)
16,777,215
111111111111111111111111
● An 8-bit value can store a decimal number 0-255 or hexadecimal number 00-FF.
● A typical colour value uses 3 octets to create a 24-bit colour value number.
● A single 24-bit value can represent any of 16.7 million different colours.
Raster vs vector images
There are 2 main approaches to storing image information:
● Raster images – a grid of coloured pixels
○ Fixed number of horizontal and vertical pixels
● Vector images – Point coordinates with math to draw connecting lines ○ Describes the outline of a shape using mathematical points
Small image
Zoomed-in Zoomed-in Vector image raster image with smoothing (with visible points)
An early raster example: X PixMap
XPM was an simple optimised image format supported by early web browsers.
a c #000066
b c #ffff99
X PixMap version 2
48 cols, 7 rows, 2 colours, 1 letter per colour “a” colour = dark blue
“b” colour = light yellow
File header
Colour table
48 letters per line
1 byte per letter
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
abbaababbbabaaabaabaabbaaaaababaaabaabaaabbabbba
abababaabaabbabbababababaaaababbabbabababaaabaaa
abbaabaabaababababbbabbaaaaabababababbbabababbaa
abababaabaabaaababababaaaaaababaaababababababaaa
abbaabaabaabaaababababaaaaaababaaabababaabbabbba
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
An early raster example: X PixMap
XPM was an simple optimised image format supported by early web browsers.
a c #000066
b c #ffff99
X PixMap version 2
48 cols, 7 rows, 2 colours, 1 letter per colour “a” colour = dark blue
“b” colour = light yellow
File header
Colour table
48 letters per line
1 byte per letter
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
abbaababbbabaaabaabaabbaaaaababaaabaabaaabbabbba
abababaabaabbabbababababaaaababbabbabababaaabaaa
abbaabaabaababababbbabbaaaaabababababbbabababbaa
abababaabaabaaababababaaaaaababaaababababababaaa
abbaabaabaabaaababababaaaaaababaaabababaabbabbba
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
Uncompressed raster images are LARGE
Data requirements per pixel
● Red value
● Green value
● Blue value
● R + G + B
Number of pixels
0-255 = 8 bits 0-255 = 8 bits 0-255 = 8 bits
R: 51 G: 51 B: 0
● Horizontal width in pixels
● Vertical height in pixels
● Vertical × horizontal = total
3840px × 2160px = 8.29 million pixels × 24 bits = 199,065,600 bits
= 24,883,200 bytes
= 23.7 megabytes
Media optimisation challenges
For use on the web, files should be as small as possible without negatively impacting quality or the overall user experience.
● Bandwidth
○ Media with a smaller file size will download more quickly.
○ Better quality is preferable – as long as the difference is noticeable.
● Compatibility
○ The media formats should be supported in all web browser.
● Performance
○ Some file formats require more CPU power and memory to decode.
Types of compression
All type of file compression encoding can be classified as being either:
● Decoded data is identical to the original data
● Quality is lost during encoding
● Decoded data is perceptively similar to the original data
● Repeated re-encoding causes further quality degradation
When data is already compressed, there are fewer gains from recompression.
Web Image formats
JPEG images
Joint Photographic Experts Group
● Lossy format designed specifically for photographs
○ 24-bit colour depth (16.7 million colours)
○ No transparency support
○ No animation support
Compression uses block-based approximation
● Split the image into small blocks (8×8 pixels)
● Create an efficient approximation of each block
JPEG encoding always causes some loss of image detail.
GIF images
Graphics Interchange Format
● Lossless format (within format limitations) for images with few colours
○ Stores a dictionary of patterns
○ Stored patterns can be reused
○ 8-bit colour depth
○ Up to 256 unique colours
○ 1 colour used as optional transparency
Simple images with 256 colours or less can be encoded perfectly with no loss of detail.
Flowers illustration (16 colours, 8KB)
Flowers photograph (16 colours, 8KB)
Animated GIF images
GIF files can store a sequence of image frames
● Each frame is stored with timing information
● Frames play back in sequence
Great for short animations, not for video content!
● Optimised repeated patterns with few colours
● High memory usage for long animations
● Inconsistent playback rate
● No audio or playback control
Snake game (140sec, 608KB) https://reddit.com/r/gaming/1buu0z
Rabbit eating lettuce (1sec, 616KB) https://reddit.com/r/aww/1zk1ma
PNG images
Portable Network Graphic
● Lossless format (within format limitations)
● Created as a patent-free alternative to GIF
● Maintained by the W3C
DEFLATE compression (similar to ZIP files)
● Optimized for artwork with repeated patterns
● 8-bit palette including 1 transparent colour
● 24-bit palette including 8-bit alpha transparency
Files sizes often slightly smaller than GIF
Flowers photograph (8-bit, 45KB)
Flowers photograph (24-bit, 145KB)
PNG palette transparency vs alpha transparency
PNG-8, 1 transparent colour (54KB) PNG-24, 8-bit transparency (214KB)
Animated PNG
In 2004, Mozilla developed APNG, an extension to the PNG specification.
● Similar to animated GIFs, multiple image frames are stored in one file
● Backwards compatible with non-animated PNG (displays 1 static frame)
Adoption of the format has been slow.
Mozilla Firefox Google Chrome
Never supported in Microsoft Internet Explorer, but is supported in Microsoft Edge,
WebP images
An open format developed by Google
● Supported in all current modern browsers (Safari requires macOS 11+)
● Limited support in operating systems and image editing software
● Supports lossless or lossy compression, transparency and animation
● Often (but not always) produces better quality than JPEG
PNG-8 (1.5KB) JPEG (1.5KB) Lossy WebP (0.48KB)
Original Image Saved at 0% quality Default Settings
SVG: Scalable Vector Graphics
Graphics as mathematical descriptions of shapes.
● Written as markup within HTML or in an external file
● Can display text using system or embedded fonts
● Can contain code for hyperlinks, animation and interactions
Audio and Video Formats
Deprecation of browser plugins
Early web browsers lacked native media playback capabilities. Websites would require users to install third-party browser plug-ins.
Plug-ins and the reliance on third-party developers creates serious problems:
● Lack of standards and interoperability between devices and platforms.
● Additional software to install/update leading to potential security issues.
Major browsers began removing support for third-party plug-ins from 2013-2020.
The death of Adobe Flash Player
Before HTML5, Adobe Flash Player was the prefered plugin for media playback.
● In 2005, about 98% of computers had Flash Player installed.
● In 2007, Modern mobile browsing begins to grow in popularity.
● 25 July 2017, Adobe announces plans for Flash Player’s end-of-life.
● 1 January 2021, browser support for Flash Player officially ends.
https://web.archive.org/web/20170615060422/https://www.apple.com/hotnews/thoughts-on-flash/
HTML5 media
Modern browsers natively support “HTML5 media elements” using audio and video HTML tags.
● Simpler code to embedding media
● Further customisation of playback and controls using JavaScript
However, different browsers may still support different media file formats. Compatibility issues may occur depending on formats used.
Right: Firefox loading an unsupported video file.
HTML5 audio formats
Most web audio formats typically use lossy compression.
● High quality uncompressed audio is relatively large: about 10MB/minute
● Good lossy compression typically brings this down to 1MB/minute
● Learn more and test your browser: http://hpr.dogphilosophy.net/test/
OGG Vorbis
Google Chrome
Mozilla Firefox
Microsoft Edge
Internet Explorer
Audio encoding bitrate
Bitrate is the amount of data used for each second of audio
Higher bitrate = higher quality
= larger file
For MP3 encoding:
● Low 64kbps ● Medium 128kbps
● High 192kbps
● Max 320kbps
0.5MB/min 1MB/min 1.5MB/min 2.5MB/min
https://www.freac.org/
Considerations for using audio
Sound can be immersive
● Music and ambient noise can help enhance the atmosphere of a website. Sound can be informative
● Audio is a form of feedback that can help users understand an interface.
Sound can be annoying
● Requires appropriate visual cues to be effective
● Is the user wearing headphones? Are speakers turned on?
● Is the volume level predictable?
● Always give the user a obvious way to stop or disable sounds
HTML5 video formats
● Video is data intensive – all web formats use lossy compression.
● Uncompressed Full HD video = 30 x 2 megapixel images per second
= About 10GB per minute
● Good lossy compression brings this down to 50MB per minute.
OGG Theora
Google Chrome
Mozilla Firefox
Microsoft Edge
Internet Explorer
Video encoding bitrate
For streaming, average bitrate (audio + video) should be lower user’s available bandwidth!
YouTube bitrates:
● 480p ≈ 1000kbps
● 720p ≈ 2500kbps
● 1080p ≈ 4500kbps
● 4K ≈ 4500kbps
https://handbrake.fr/
Considerations for using video
Ensure compatibility with a wide range of web browsers:
● Option 1: Using HTML5 video with MP4 format only
○ Requires the least effort, some older browsers show no video at all
● Option 2: Using HTML5 video with MP4 and WebM formats
○ Slightly wider compatibility, but requires more server storage space
Where possible different resolutions and bitrates can be provided
● Requires scripting to switch between different files
● Requires more server storage space
● Consider embedding videos using an third-party video service (e.g. YouTube)
Automatic media playback policies
In 2017, Google Chrome adopted strict policies for autoplay of media.
Chrome forcibly disables autoplay for:
● Embedded audio and unmuted videos
● Audio or video playback started by JavaScript without a user interaction
Autoplay is bad for most users!
● Unexpected audio playback can annoy or frighten users
● Unexpected motion from video content can be distracting
● Audio is disruptive for users who rely on screen-reader technologies
● Learn web information architecture theory and techniques.
● Practice practical web information architecture design.
Important reminders
● Participation Milestone 2 takes place in class this week.
○ Show your tutor your completed CSS formatting lab activity.
● The Assignment 2 brief has been released.
○ Mockup image and report for a website redesign.
● Participation Milestone 3 takes place in class next week.
○ Choose a website to redesign for Assignment 2 and inform your tutor.
程序代写 CS代考加微信: assignmentchef QQ: 1823890830 Email: [email protected]
Reviews
There are no reviews yet.