[SOLVED] FIT1050 Web Fundamentals

FIT1050 Web Fundamentals
Web Media Formats

Copyright Warning

Copyright By Assignmentchef 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 (88 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 Players 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 users 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]