All graphics displayed on screen devices are categorized into two parts: vector and raster. Just as the applications (Photoshop and Illustrator) used to create these graphics, these two types have different characteristics and use cases.
Raster (or bitmap) graphics consist of thousands and millions dots of individual color, allowing the users to freely represent photographs and other realistic images. However, they are restricted to a specific resolution, and will suffer from reduced image quality upon resizing. Pixelation is a common problem encountered when dealing with raster graphics.
Vector graphics, however, are unaffected by image resizing. Defined by mathematical equations and geometric objects, vector graphics are re-rendered everytime they are resized and remain "crisp." However, they lack the ability to blend colours realistically, and generally suited for fonts, logos, and technical blueprints.
The Web can likewise handle vector and raster graphics quite well. Raster graphics are generally loaded as separate files, and popular formats include JPG, GIF, and PNG, with their own strengths and weaknesses. While convenient, these graphics to suffer from pixelation upon zooming into the website, and contibute to longer website loading time.
JPG is one of most popular image formats for sharing photographs. As a "lossy" compression (but human eyes cannot easily tell the difference) format, JPG offers smooth variation of colours and is best suited for photographs and paintings of realistic scenes. However, it is not best for logos or images that feature sharp graphics --- as JPG automatically blurs neighbouring colours together.
GIF may not remove any colour information upon compression as a "lossless" format, but GIF imposes a rather strict restriction of 256 colours in a single file. Despite this limitation, GIF has enjoyed popularity and on the Web thanks to its ability to handle limited animations.
PNG is one of the newest image formats, originally designed as a improved replacement for GIF. PNG is notable as it retains all colour information as a lossless format. While all PNG files are much larger than JPG and GIF counterparts, PNG also features alpha chennel -- an image attribute responsible for transparency and translucency. PNG is best suited for graphics that require precision and transparency.
All HTML elements, except for external image assets, are considered to be vector graphics as the browser is responsible for directly rendering these items with no pixelation.
Today's browsers now have the capacity to handle external vector graphics files. Released in 1999, SVG (Scalable Vector Graphics) allows websites to feature complex vector shapes without saving them as raster counterparts. Each SVG file is a text document similar to HTML in style, and the browser is responsible for parsing each SVG document and rendering each shape on-the-fly. All existing vector graphics formats (ex. AI) can be converted to SVG as well.
Typography was an onerous task before the rise of digital technologies, requiring the creation and the arrangement of physical fonts as typographers and typesetters. However, this changed when desktop publishing emerged in the 1980s.
Apple computer devices have become commonplace, and Adobe's then new technology PostScript served as a fundamental tehcnology that enabled vector graphics on digital devices. Adobe PostScript remains a core technology that fuels Adobe Illustrator, Adobe Acrobat, and font formats to this day.
Tim Berners-Lee believe that HTML should be design-agnostic and that the onus of styling the website should not be website developers. According to him, the browsers and the platforms should dictate the final look of the website -- but this belief was challenged with the rise of CSS.
In response to the demand from web developers for control over typography, Microsoft launched a project titled MS Core Fonts in 1996: an initiative to ensure that all web browsers are equipped with a standard set of fonts to ensure consistent web experience for the users and some style control for the designers. These typefaces were specifically chosen to achieve the following:
Today, we can now use any typeface on the website, and many font file formats --- TTF (Apple and Microsoft), OTF (Adobe and Microsoft), EOT (Microsoft), and WOFF (W3C and Google) --- compete for the market share. To facilitate the development process, web developers can opt to using font embedding services such as TypeKit, fonts.com, and Google Fonts.
Nowdays, users can now easily upload video clips to be streamed on their websites. Back in the 1990s, however, it was a big challenge: each developer needed to deal with high bandwidth costs, programming challenges, and time-consuming marketing efforts.
Until the mid 2000s, the market was split between different video players: Windows Media Player (Microsoft), RealPlayer (RealNetworks), and QuickTime (Apple). Users were expected to install all three applications to enjoy the videos, and the video quality was subpar at best, due to much slower Internet speeds.
Shortly thereafter, Adobe Flash unexpected became the unifier of the fragmented video player market. Originally designed as an interactive animation tool, Flash was available for multiple platforms and could handle video files with ease. At the peak of its popularity, YouTube launched its business in 2005 with Adobe Flash as the primary player. Its reign over the market, however, was disrupted by the rise of HTML5 technologies.
Despite its massive popularity on the Web, Apple's iOS devices never supported Adobe Flash -- and the controversy deepened when Steve Jobs published an open letter titled "Thoughts on Flash". Despite the initial backlash from the market, Jobs maintained his disdain for Adobe Flash and expressed support for then-emerging HTML5 technologies, which promised browser-level (and therefore more performant) support for video, animation, and interactive components.
In the early days of HTML5, only a handful of browsers were fully compliant -- but many web developers started their experiments to demonstrate the potential strengths of HTML5. Google was especially supportive of these efforts, collaborating with musicians, directors, and engineers to build interactive music video experiences including The Wilderness Downtown and 3 Dreams of Black under the Chrome Experiments brand.