Please enable JavaScript.
Coggle requires JavaScript to display documents.
HTML: Multimedia and embedding - Coggle Diagram
HTML: Multimedia and embedding
Images
<img>
src
Never hotlink to an image hosted on someone else's website without permission
Use descriptive image filenames for better SEO
Elements like <img> and <video> are referred to as replaced elements
Element's content and size are defined by an external resource and not by the contents of the element itself
alt
Can be tested by purposely misspelling the filename
Uses
Better accessibility for screen reader users
Better SEO
Image can be matched with search queries
Browser limitations
Image type unsupported
Text-only browsers
Images turned-off
Image missing or badly referenced
Decorative images
Empty alt text
Use CSS background images if possible
Textual images
Use CSS text effects if possible
Image text content as alt text
Images with significant information
Prefer body text over alt text
Shouldn't repeat body text in alt text
Image links
Use either link text or alt text
Should describe what the user would lose if the image doesn't show up
width, height
Browser leaves a space
Page loads faster
Should not be used to transform images
Use an image editor or CSS instead
title
Not recommended
Reduced accessibility
Screen reader support is unpredictable
Not supported on touchscreens
Prefer body text instead
Should be used when an image has meaning in terms of the page content
Use CSS background images for decorative images
<figure>
Semantic container for figures that links a figure and a caption
A figure could be several images, a code snippet, audio, video, equations, a table, or something else
<figcaption>
Describes the other elements in the <figure> container
Should not be the same as alt text
Improved accessibility
Read by screen readers
Video and audio
<video>
controls
Includes the browser's own control interface
Use JavaScript APIs otherwise
Required for better accessibility
For users with epilepsy
Fallback content
Any markup
Link to video
Unsupported notice
<source>
src
type
MIME type
Better for performance
Plays the first one with a supported codec
width, height
Maintains aspect ratio if either value is given
Uses a solid background colour if aspect ratio is not maintained
Can use CSS instead
autoplay
Discouraged
loop
Discouraged
muted
poster
A URL of an image
preload
Buffer large files
Media formats
Container formats
WebM
All modern browsers
Define a structure in which the audio and/or video tracks, metadata, codecs information is stored
Ogg
Superseded by WebM
Best supported by Firefox and Chrome
MP4
All modern browsers and IE
Container-less or simplified containers
FLAC
MP3
Audio players can play audio tracks directly
Codecs
Codecs exist to compress video and audio into manageable files since raw audio and video are both exceedingly large
Audio and video tracks within the container hold data in the appropriate format for the codec used to encode that media
Browser support
Reasons for multiple formats to exist
Preference for open formats
Some codecs are covered by patents
Browsers support a different set of codecs and a different selection of container formats
Each media file should be provided in multiple formats to maximize the likelihood that the web site or app will work on a user's browser
File support may vary between mobile and desktop versions of a browser
Browsers may be designed to offload handling of media playback
Media support is partly dependent on what software is installed
<audio>
Similar attributes as the <video> element
No
width, height,
and
poster
<track>
Displays text tracks that are useful in certain situations
Users who don't speak the language of the video
Users with auditory impairments
Users in noisy environments or libraries etc.
kind
subtitles
Translations
captions
Transcriptions
descriptions
Narrated content
Type of cue
Nested inside <audio> or <video> after <source> elements
Improved SEO
Search engines can index videos and subtitles
srclang
Subtitle language
label
User-readable label for the text track
Uses the WebVTT format for text tracks
Embedding content
History
It was popular to use frames to create websites
Small parts of a website stored in individual HTML pages
Frames were embedded in a master document called a frameset
<object> and <embed>
Used to embed plugin content such as Flash and Java Applets
<iframe>
Security concerns
Use HTTPS whenever possible
Prevents embedded content from accessing content in your parent document, and vice versa
Reduces the chance that remote content has been tampered with in transit
sandbox
attribute
Permissions can be added back one by one if absolutely required
Should never add both
allow-scripts
and
allow-same-origin
together
Should serve user-generated content from a different domain to the main site
All available restrictions should be imposed by using the sandbox attribute with no parameters by default
CSP directives
Should configure the server to send an appropriate
X-Frame-Options
header
Prevents other websites from embedding the content in their web pages
Iframes are an attack vector
Can be used by an attacker for clickjacking
Embedding hidden iframes to pages to capture user interaction
Embed only if really necessary
Intellectual property concerns
"You can never be too cautious. If you made it, double-check it anyway. If someone else made it, assume it's dangerous until proven otherwise."
Allows embedding other web documents into the current document
src
Should be set using JavaScript after main content is loaded
Improved SEO
allowfullscreen
frameborder
Use CSS instead
width
height
sandbox
Fallback content
<embed> and <object>
General-purpose embedding tools for embedding external content
Plugin technologies like Java Applets and Flash
PDF, SVG, and images
Opt for web technologies instead
Better reach
Better accessibility support
Reduced security risks
Vector graphics
SVG is an XML-based language for describing vector images
Adding SVG to pages
img
Cached
No JS and external CSS
you could reference a PNG or JPG from your src attribute and use a srcset attribute (which only recent browsers recognize)
You can also use SVGs as CSS background images, as shown below.
inlining SVG
Not cached
Iframe
Discouraged
Benefits
Text in vector images remains accessible and provides better SEO
Lend themselves well to styling and scripting
Drawbacks
Gets complicated quickly
Larger file sizes
Longer processing times
Not supported in older browswers
IE9 onwards
Harder to create
Responsive images
An improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. A second cropped image could be displayed for a medium width screen device, like a tablet. This is commonly known as the art direction problem.
This is called the resolution switching problem.
In addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. And conversely, a small raster image starts to look grainy when displayed larger than its original size
To make things more complicated, some devices have high resolution screens that need larger images than you might expect to display nicely.
Resolution switching
We can however use two new attributes — srcset and sizes — to provide several additional source images along with hints to help the browser pick the right one.
srcset
filename intrinsic width in pixels (w)
sizes defines a set of media conditions (e.g. screen widths) and indicates what image size would be best to choose, when certain media conditions are true
media condition width of the slot
First or next largest is picked
In the <head> of the example linked above, you'll find the line <meta name="viewport" content="width=device-width">: this forces mobile browsers to adopt their real viewport width for loading web pages
Different resolutions
srcset with x-descriptors and without sizes
Art direction
The <picture> element allows us to implement just this kind of solution.
<picture> element is a wrapper containing several <source> elements that provide different sources for the browser to choose from, followed by the all-important <img> element.
The <source> elements include a media attribute that contains a media condition
The srcset attributes contain the path to the image to display
In all cases, you must provide an <img> element, with src and alt, right before </picture>, otherwise no images will appear. This provides a default case that will apply when none of the media conditions return true
When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript
New image formats like WebP and AVIF can maintain a low file size and high quality at the same time. These formats now have relatively broad browser support but little "historical depth".
<picture> lets us continue catering to older browsers. You can supply MIME types inside type attributes so the browser can immediately reject unsupported file types: