Thursday 30 January 2014

Interactive Media: Part II - Video in Interactive Media

Welcome back to the three-part series of articles looking at the principles of interactive media. In this second instalment, I will be talking about video and its use in interactive media.

In decades past, the term 'video' referred only to motion pictures, displayed on cinema screens or on VCR/VHS players. Videos were not interacted with in any way, they were simply watched. However, as technology advances, video is becoming more widely used across mediums, for a number of different purposes. Today, video is seen and interacted with by most people on a daily basis.

This article will explain:
  • Applications of Video in Interactive Media - How video is used;
  • Platforms - Where video can be found;
  • Technology - Like last week's article about images, the file types found in digital video and their purposes;

As well as explaining the technical side of video, this article aims to give insight into the growing popularity and wide use of video in interactive media in everyday life.

Applications

In the 21st century, interactive media pervades everyday life. Much of the media interacted with by users is video content, which can serve several purposes - it can be used as a tool to communicate information perhaps more clearly than text and images, it can advertise products or, at high levels of interactivity, function as a type of computer game. There are very few limits in terms of potential uses for digital video.

Promotional Material

Promotional videos are short (usually 5-10 minute) films created for use by a company or organisation. These videos can be used to advertise the products or services of an organisation or as a tool to train employees. These videos are structured to highlight key points clearly and concisely while maintaining viewers' interest. Videos of this type can be used in business presentations, displayed as extended television adverts (infomercials) or embedded into websites for viewing by site visitors.
Where people wishing to own DVD copies of most videos would have to buy them, promotional videos are often provided to potential customers free-of-charge in the hope that the video generates interest for the product or service promoted.

A promotional video for the first iPod (2001). Apple, the creators of the iPod, often utilise promotional videos like these when launching a new product.


Advertisements

An advertisement is a form of media created to raise awareness about a product or service by communicating positive information to a large group of people. Adverts are commonly found in the commercial breaks of television programmes, in newspapers and displayed publicly on billboards.
This type of 'mass promotion' is effective in its aim of communicating a message to a large target audience, but it isn't the most accurate way of hitting a specific audience - if a video advert is displayed in the ad break of a popular television programme, the advertiser has probably paid a lot of money for their advert to appear there. However, they're paying for a large number of people to see the same advert - there is no guarantee that most of the people the advert reaches will fall within the target audience, even if the video is shown in the break of a programme popular with that audience. This can be a risk - imagine paying millions of pounds to show a thirty second advert, only for it to have little commercial effect on your product? The result would be a great loss of money.

Standard Advertising, the form seen in 'old media', is not interactive. The audience's role is simply to view the image or video. Advertising campaigns have, over time, become more ambiguous and creative. While most adverts are straightfoward in communicating to the viewer that they are observing an advert for a product and making it clear what the product being advertised is, some use elements not related to the product being advertised.
These vague advertisements use pictures or video that will catch audiences' attention or provide entertainment, either using product placement to feature the product in a subtle manner, or simply by displaying product branding (logos, taglines etc.) somewhere in the advert. The latter of the two is a great way of increasing brand awareness, for example in a 2009 advert for mobile phone service provider T-Mobile, which featured dancers and members of the public performing a dance routine in the train station. This concept seems totally separate from mobile phones, but the routine being performed was named 'The T-Mobile Dance' and the advert became very popular.

The 'T-Mobile Dance' advert (2009). This version, which runs at nearly three minutes, was cut down to fit into TV commercial breaks.

One huge innovation from interactive media is the ability to tailor the visibility of adverts, to make sure that people in the target market see promotions that will appeal to them. For example Google Ads take information from each user's Google searches and use them to figure out which adverts should be shown to each user. This practice is used in many forms of Internet advertising - observe the amount of adverts you see on a webpage that are relevant to your interests. This is no coincidence. Social media utilises this kind of data-reliant 'smart advertising', as each user lists their interests and habits as part of their activity on sites like Facebook. The image on the left is an 'ad roll', seen on the side of a Facebook page. Each individual advert would be different according to the activity of the viewer.

Interactive adverts can feature varying degrees of interaction between the user and the product - a user could simply click the advert to proceed to a related link, or the interaction could be far more elaborate. A 2012 TV advert for British Airways, created to celebrate the London Paralympic Games, showed BA planes rolling through the streets of London. British Airways adapted this video into an interactive Internet ad, where users could input their postcodes and watch as the plane appears to move through their own street, images of which could be seen through the plane's windows. This interactive advert was seen by tens of thousands of people on British Airways' website.

A still from a customised version of the 2012 British Airways advert, showing the cockpit view as the plane appears to drive down a road chosen by the user. The website collected images of each street using Google Maps.

Film Trailers

Teaser trailers for upcoming films have made the same jump from old media to interactivity as other kinds of advert. Interactive media has broadened the range of places a trailer can be displayed - film trailers are often watched on websites like YouTube on computers and smart devices.
Film trailers can be a part of interactive media simply by way of their placement on a website or smartphone app, but some marketing campaigns focus on more complicated elements in which the viewer can interact with the trailer itself.
The 2011 J.J. Abrams film 'Super 8' featured, alongside a cryptic viral marketing campaign, a highly interactive teaser trailer that featured in the year's most hotly-anticipated computer game, 'Portal 2'. The interactive trailer was based on the standard, cinematic trailer for 'Super 8', but featured a mini computer game level in which players could interact with key elements of the trailer, such as a train crash. This is a level of interactivity not often seen in advertising and is possibly a sign of things to come in terms of the future of advertising.



Viral Marketing

Viral Marketing is a form of advertising that utilises existing websites - specifically, social media and file-sharing sites - to raise awareness of a product, brand, organisation or service. The term 'viral marketing' refers to the process in which the advert is spread - a user sees it, shares it with another user who then shares it and so on until a large number of people have been reached. The idea, or advert in a marketing context, spreads like a virus.

Viral Marketing is an incredibly useful tool in advertising, as the way the message spreads by a sort of cyber word-of-mouth means that less effort has to be taken to reach large audiences - the audience does the work. It also costs far less, as content can be placed free-of-charge on video and image sharing sites like YouTube or on social networks such as Facebook or Twitter. A great deal of any given advertising budget can be spent on placement of adverts in traditional mediums like television or billboards, so using the Internet is a huge saver for advertisers.
However, viral marketing is not as easy as creating and uploading an advertisement to the Internet - an advertiser cannot ensure that their attempt to create a viral smash will catch on with the audience. This has forced marketers to get more creative in terms of the content of their adverts, because if they want an advert to 'go viral', it must contain something of unique appeal to the audience; something that will make them want to share it with their friends. The success of viral adverts, it has been said, is reliant on three elements:
  • Messengers - people who possess either knowledge of viral advertising and marketing in general, or people with a wide range of social media connections (such as popular bloggers or famous figures) may be targeted initially, because if they're the first people to share a viral video, it will immediately reach a large number of people.
  • Message - For something to become a successful viral hit, its message must strike a balance between being memorable and interesting. A viral advert can only stand out and spread if the target audience find it of interest and its marketing success often relies on making people aware of a brand being advertised, so it has to stick in the minds of viewers.
  • Environment - The timing and context of a viral advert's release are incredibly important to its success. Viral ads may be timed for release just as a previous Internet phenomenon's popularity subsides and are usually engineered so that they do not appear to be adverts at all - especially on YouTube, a site full of user-generated content, where viral adverts are made to appear as if they too are user-created.
The YouTube series 'Will It Blend?', created in 2006, is a series of infomercials in which Tom Dickson, CEO of BlendTec, attempts to blend unusual, often non-food objects like mobile phones in a BlendTec branded blender. This was an early YouTube campaign and became incredibly popular - new videos are still uploaded to this day. Not only did this campaign raise awareness of BlendTec blenders, it also became popular enough to spawn merchandise (like 'Will It Blend' t-shirts). Another benefit to the company is that other brands have aimed to capitalise on the series' popularity by making product placement deals with BlendTec, creating episodes in which their products were blended. The 'Will It Blend?' YouTube channel even has a section dedicated to Apple products.


Not many adverts for mundane household objects like blenders have attracted as much attention or lasted as long as 'Will It Blend?' and the series therefore shows the true power of viral marketing.

Online Games

Online, web-browser based games are an incredibly popular form of interactive media, containing video elements.
Since media players like Flash and Java became standard add-ons for web browsers, the entertainment side of the Internet has grown rapidly - before this kind of software was readily available, webpages were comprised entirely of text and some images, featuring little (if any) interactive or animated content. Videos had to be downloaded and could not be 'embedded' in websites as they are now.
In-browser media player capabilities brought with them advances in the type of media that could be displayed on a webpage and changed computer gaming by allowing for small games created in Flash to be played online. These games are limited in graphic capability compared to modern PC or console gaming, sitting at around the same point technically as 2D retro games. Indeed, many games popular in the early days of browser gaming were Flash remakes of '80s retro games like Pacman, Frogger and Tetris. These games are relatively small in size and can be embedded in websites. See below for a playable Flash version of Tetris.



These Flash games are, in more basic forms, ideal to include in any entertainment website due to their low size and the short amount of time it can take to play - especially compared to conventional computer games. Most browser games have some kind of multiplayer element, whether it's just a 'high scores' feature or, in more advanced games like 'Runescape', Mass Multiplayer Online (MMO) capabilities, where large groups of users can play together over the Internet. This online content also lends itself to a social media context, like on Facebook where some apps feature multiplayer browser games and high score tables.

Like most anything else online, browser games can be used as a promotional tool. Before the premiere of drama series 'Misfits' in 2010, E4 released a flash game called 'Misfits Do A Runner' in which users could play as the main characters. This created pre-debut brand awareness for 'Misfits' and helped future viewers get to know the protagonists.



A still from 'Misfits Do A Runner'.

E-Learning

Electronic Learning, or E-Learning, refers to any educational methods that utilise interactive technologies as a teaching/learning tool. This can be instructor-led or autonomous and can use several different types of media including interactive, touch-screen whiteboards (or 'smartboards'), which teachers can use to display digital video and image content or entire websites. Content that can be used in independent (non instructor-led, or 'autonomous') learning includes interactive, educational CD-Rom games like 'MyMaths', or learning-focused blogs such as this one. 
Blogs, social media and webcam chat service like Skype can also be used to create 'virtual classrooms' where teachers can communicate with several learners at once, over the Internet.

E-Learning is increasingly being found in the form of educational browser games aimed at children. EducationCity is a website specialising in E-Learning, offering smartboard resources for teachers and online games for children.

An E-Learning game by EducationCity.

User-Generated Content

The amount of the Internet that is made up of 'user-generated content' is growing and growing at an astronomical rate. User-generated content, as the name suggests, is anything on the web made by Internet users rather than professional media producers. The term was first recognised in 2005 with the advent of video-sharing sites like YouTube, Metacafe and Dailymotion which, when combined with the popularisation of webcams, allowed anybody using video sites to record and upload their own videos in a matter of minutes.
User-generated content can take many other forms - blogs, websites, images and any other form of media imaginable. However, it is digital video where user-generated content has experienced its greatest popularity. Some professional filmmakers and animators, for example David Firth (creator of Salad Fingers and co-creator of MC Devvo, among others) have based their entire careers on the Internet. 
This does not mean that all content creators are aspiring pro's though, as it is often amateur videos made just for fun (often 'vlogs', or video blogs) that accidentally catch on and become viral hits. These Internet phenomenons become famous worldwide and can lead to bigger things for some, like 'Leave Britney Alone' vlogger Chris Crocker, who experienced a surge in popularity on YouTube and attempted a music career, appearing on television programmes and even piloting his own reality series after his 2007 viral smash. This early YouTube success has been repeated in recent years with the likes of Lucas Cruikshank, whose comedy character 'Fred' became a hit with younger audiences and spawned a TV series and three made-for-TV movies on children's Nickelodeon network.





Platforms

Digital video can be found on several different platforms, applied in numerous ways with varying degrees of interactivity involved. 
All interactive devices can be measured on one of three 'intelligence levels' - the level of capability for interactivity that a device possesses. Level 1, the lowest level of intelligence, is a device that can display video content with little or no interactivity. A television is a Level 1 platform as the only way a user interacts is by switching the device on and off or changing channels. An example of a Level 2 device - where there is more interactivity, although still limited - would be a DVD player. Users can interact with menus and fast-forward/rewind through the video. Level 3 devices include computers, games consoles and smart devices, where video content makes up many of the heavily interactive elements as part of software or Flash games.

The Internet

Everything on the Internet is interactive and video makes up a large amount of content found - from streaming video content on sharing sites, to browser games, animated banners...the list goes on. It is even possible to watch full feature films over the Internet, whether by downloading them or watching them through a streaming site (where video is downloaded as it is being watched over an Internet connection).
The Internet is not just found on computers - devices from smartphones, to GPS 'satnav' systems and even televisions rely on an Internet connection for some features.

The amount of content that you could obtain over the Internet is limited by download speeds and limits set by the service provider - everybody who rents an Internet service pays for a certain amount of data per month and they can not download more content than their limit. Downloading applies to everything viewed on the Internet, as your computer has to download every page and element you view. Even five-to-ten years ago, this was an issue as download limits were very restrictive but as technology has advanced, Internet Service Providers (ISPs) have begun to offer higher download speeds and less restrictive limits at a lower price. This has broadened the possibilities of what a user can download over the Internet - a few years ago, downloading full HD films would have been inconceivable.

Video can be used in a variety of ways on the Internet. Dedicated video-sharing sites, as mentioned often in this article, provide a hub for aspiring filmmakers, advertisers and professional producers alike to share their content. Videos can also be uploaded and shared via social media and email services. Video is also utilised in online games and advanced interactive aspects of websites.


Television

Television, as mentioned earlier, is an interactive device even in the most basic sense. However, elements more widely associated with computers are beginning to come into use on TV sets.

Early examples of higher-level interactivity on television include Viewdata, Teletext and Ceefax services, where text-based information could be navigated by users on a TV screen. These analogue services became obsolete with the polularisation of the Internet, as well as digital TV 'red button' services. On BBC channels, an interactive digital menu will appear when a TV remote's red button is pressed. This allows users to view news and sports results, find extra content and information about content being broadcast and even change the content being watched - for festival and sporting event coverage, the red button can change, for example, which band is shown performing or which sports event is displayed. This service works via an Internet connection. Other Internet-based TV services include digital television versions of Video on-Demand (VoD) services like the BBC iPlayer or ITV Player.


In recent years, 'smart TVs' have been released. These are, as the name implies, a combination of a television and a smart device, featuring smartphone-style apps and sometimes, touch screens, as well as Internet browsing capabilities.

DVDs and VCDs

DVDs and their precursor, the Video CD (or VCD) are the two recognised standards for storage and playback of digital video content using optical discs. The only difference between the platforms is in copy protection and available disc space, where DVD technology is an improved version of the VCD standard created in 1990.
Video content is written onto discs using a computer and can be played back using a computer or DVD player. This content can be interacted with as it is a digital file, as opposed to VHS or VCR tapes - analog formats.
The interactive elements of DVDs and VCDs are usually found in 'selection menus', the menu screens where users can choose to play the video content in full, choose specific scenes or view extra content. These menus often feature video content in the background, to add an element of visual interest.




Smart Devices

Smart devices are essentially computers in a different form. Smartphones, MP3 players, tablet computers, smart TVs and games consoles are all capable of receiving the same range of content as personal computers, thanks to incredible advancements in technology over the last ten years.
Most of the content people interact with using smart devices comes from the Internet - websites and software applications (or 'apps') tailor the web to fit the somewhat more limited download capabilities of portable devices. YouTube, Facebook, Twitter and several other popular sites have released smartphone apps, which users of certain devices can download for a mobile-optimised service.

Smart devices also, by nature, feature interactive video content offline. The basic functions, such as menus found on all these devices are highly interactive and Flash/Java games feature on many of these mini-computers.

Games consoles, used to play computer games, are also featuring more interactive, Internet-based video content alongside the incredibly interactive, video-centric software of computer games themselves. Consoles of the current generation feature apps similar to those found on smartphones, although console apps are more powerful as the computers have higher capabilities than portable devices. For example, many Video-on-Demand and 'catch-up TV' services are available for download as console apps - this includes film-on-demand services like Netflix and Lovefilm. Games consoles can also feature in-built web browsers, which are not as powerful as personal computer browsers but can display webpages at least as effectively as mobile browsers.



Interactive Kiosks

Offline interactive multimedia computers known as Interactive Kiosks are becoming increasingly common in everyday use. These computers perform a wide range of tasks - the oldest form of interactive kiosk is probably the ATM (Automated Teller Machine) or cash machine. Every ATM user interacts with a video menu interface. Similarly, supermarket self-service tills, used in most chain stores, utilise a more advanced interactive interface, where users must scan and pay for items themselves using these automated, touch screen tills. Other forms of interactive kiosk allow cinema-goers to purchase tickets from a machine and patients to check in to doctor's appointments. Digital photograph kiosks allow users to plug digital cameras into the machine and choose photographs for the machine to print.






Technology

This section of the article aims to aid your understanding of how digital video works. As in last week's article, we will look at file formats and compression types, as well as downloading and streaming methods and different types of media player software.

Compression

The same principles apply to video compression as to image compression (see Article 1). Video files need compressing far more than images, however, because they are much larger files. A video is made of millions of still images and high-definition images can be hundreds of megabytes large, so imagine the size of an HD video! Large, raw video files can be compressed, an action where all unnecessary data is removed from a file to decrease it in size.
However, losing data means that the finer details of a picture or video are often lost - quality is lost. Forms of compression that result in decreased quality are called lossy compression types. Where loss of quality is totally unacceptable - for example, when a video is intended for full HD playback - lossless compression methods exist, in which data is dropped without affecting quality. A drawback of this is that not as much data can be dropped and as a result, file sizes are not reduced as much as with lossy compression.

Video can be compressed using several computer-executed methods of dropping data. These methods can involve either dropping finer colour detail between frames (similar to JPEG image compression) or comparing frames and replacing identical or similar frames with copies of previous frames.

Like in digital images, several video file types exist, optimised for use in different situations and featuring both lossy and lossless compression, as well as raw/uncompressed video files. Video files are known as 'container files' - they contain image and audio data to create the video, as well as codecs - the method of encoding the image/sound data into bytes readable by a computer. All file types use different codecs and can only be played using media player software that also contains corresponding codecs.


File Types

Apple Quicktime MOV
The Apple Quicktime MOV container is a proprietary container that allows the user to store multiple tracks of audio, video, and text as well as metadata like timecode. Installing support for this format includes a number of “native” Quicktime audio and video codecs to be installed on a system as well, although the codecs themselves may not be the quickest or highest quality. It is a common format for acquisition, editing, and delivery and is a ubiquitous container format in the motion picture industry.

Microsoft AVI
AVI is a very popular video container created by Microsoft. An AVI file is actually compatible with several video codecs including DivX, Xvid, MOV and more. To play an AVI file you have to have the appropriate codecs installed.
Additionally, most DV camcorder use a compressed AVI file called DV-AVI. Eventually, you would convert this file to something more compatible with your software - usually a more standard AVI for computer playback or MPEG codec for DVD encoding and playback.
Windows Media Player and Quicktime media player will support AVI files if you have the correct codecs installed. Most common AVI codecs are free to install. 
The .AVI container does not support files larger than 4gb, does not properly support timecode, and doesn’t properly support pixel aspect ratios.

Adobe Flash Video FLV/FV4
Adobe’s Flash Video actually takes advantage of two different containers: the older FLV and newer F4V. This container is common, but almost strictly used as a delivery container for Flash applications, video players, or other multimedia uses.

MPEG MP4
MP4 is a format that is commonly used for video files on iPod and PSP and is based on QuickTime’s MOV container. Therefore, the MP4 format is usually associated with Apple software. However, the popularity of iPod has forced many manufactures to make their desktop media players more compatible with MP4 files.
Software like QuickTime, iTunes, RealPlayer and Zune Marketplace support MP4 files without any additional codec downloads. Windows Media Player on the other hand cannot easily play MP4 or MOV files. MP4 files are usually used on portable smart devices and so, lossy compression is acceptable as space is more important than quality.

DIVX
DIVx files are high quality compressed movie files. It allows videos to be a lot smaller data-wise while still delivering crystal clear video. There are quite a few different programs that will play these files, but DIVx does offer a downloadable program that will play these files.

SWF
SWF files are animation files that are created by Adobe Flash. They can contain audio and visual imagery, but instead of movies, the visual components are usually vector images. SWF files are vey popular in web design and advertising applications. Any web browser with the downloadable Flash Player plugin can view these files.

MPG
MPG (also referred to as MPEG) is the acronym for the Moving Picture Experts Group, who created the file type. Files with the .mpg extension often contain movies that are distributed over the Internet.
The videos contained within the .mpg files are compressed video files. These files are compressed to allow users to download the files more quickly without sacrificing much of the picture quality in the video itself - virtually lossless compression. The .mpg format is also given to many of the VCR videos that are converted to downloadable movies.


3GP/3G2
3GP (3GPP file format) is a multimedia container format defined by the Third Generation Partnership Project (3GPP) for 3G UMTS multimedia services. It is used on 3G mobile phones but can also be played on some 2G and 4G phones.
3G2 (3GPP2 file format) is a multimedia container format defined by the 3GPP2 for 3G CDMA2000 multimedia services. It is very similar to the 3GP file format, but has some extensions and limitations in comparison to 3GP. Like MP4, the 3GP format is optimised for playback on portable devices and therefore favours small file size over maintenance of quality - this is a highly lossy filetype.

Media Players

A Media Player is a piece of software that displays video files on a computer. As evidenced above, most media players have native files - those that playback best on them. Windows Media Player works best with .wmv files, Apple Quicktime with .mov etc. However, the type of video file a media player can work with depends on the codecs that media player possesses. Some media players are not native to an operating system like Windows and Mac's players. These third-party players, like Media Player Classic or VLC Media Player, come with a large number of pre-installed codecs and can play most recognised file types as a result. Media players that do not have a wide range of codecs (like WMP or Quicktime) can have extra codecs installed. However, no media player can play every file - this is why there are several different types of player.


Streaming Media

Media streaming is a method of playing back a media file such as a video, while that file is still being downloaded over the Internet. This has become popular as demand for large media (usually video) files on the Internet has grown, as it is a quicker method of receiving media content then downloading a file and playing it back once it has fully downloaded.
To smoothly use a media stream, the receiver must have a fast enough download speed to receive data that the computer will translate into image and sound data. This process, in order to watch a streaming video smoothly, must be completed by the computer at a quick rate. If the receiver cannot quickly download and translate the data, the media will play back slowly.


Data Transfer Rate

The data transfer rate is the speed at which bits of data are transferred from the host (for example, YouTube) and receiver (the viewer). In the case of streaming video, various factors determine how fast the data of a video file will be transferred.

The File Size is one of the biggest factors - a high-quality video file can only be properly streamed over a connection with a high enough bitrate (the bitrate is the speed at which bits of data are downloaded). If high-definition files are transferred over a low bitrate connection, loss of quality and lagging, jumpy playback will occur.
Similarly, the actual size in terms of image resolution can affect data transfer - higher resolution means more detail and the file size is increased as a result. All streamed video files are compressed.

Thanks for reading this article - I hope I gave you all the information you were looking for. Check back next week for the final installment of this series, where I will discuss web animation.

Thursday 23 January 2014

Interactive Media: Part I - Digital Graphics


Welcome to the first instalment of a three-part series of articles looking at the principles of interactive media. In this article, I will discuss digital graphics.

Most people see digital graphics in action every day, but it may sound like a task to understand how it all works. This article aims to make it simple, taking a comprehensive look at the principles of digital graphics to give you a better understanding of the technical side of this ever-more-prevalent medium.

In this article, I will explain about:
  • Pixels;
  • Bit rate and bit depth;
  • Raster images/Bitmaps;
  • Vector Images;
  • Colour Space;
  • Image Capture Technology;
These are the elements that make up digital graphics and a simple understanding of these terms will give you a full view of how digital images are created and displayed.

Pixels: The Building Blocks of Images

A pixel - an abbreviation of picture element - is the smallest part of a picture that can be displayed or printed. A pixel is a single square of one colour - images are made up of a large number of these squares.


When a digital image is magnified, you can see the pixels (squares) it is made up of.
Each pixel is made up of three dots - red, blue and green - and the three coloured dots mix in different ways to create the colour of the pixel. These dots are the smallest element of a video display such as a computer monitor.
Every digital display screen is made up of a grid of pixels and the physical size of a pixel varies according to the resolution of the display screen. The resolution of a screen is the amount of pixels that can be displayed - the higher the resolution, the more pixels can be displayed and the more pixels displayed, the greater the image quality - a higher number of pixels means that the finer details of an image can be defined.

Bit Rate

A 'bit' (short for binary digit) is the smallest piece of information a computer can process. Each measurement of data is made of of bits - a byte is 8 bits, a kilobyte is 1,024 bytes and so on. The bit rate is the number of bits processed over a unit of time - usually measured in bits per second (bit/s). The size of a digital file is measured in bits, bytes etc. and the higher the bit rate, the larger the file.
In images, this affects the quality of the picture as a lower bit rate restricts the capability of a pixel to carry a wide variety of colours. An '8-bit' image, for example, is restricted to a maximum of 256 colours - three bits of data are allocated to each red and blue and two bits are allocated to green colours. As the bit rate increases, so does the amount of bits allocated to each colour - 24-bit is referred to as 'true colour', as it is capable of displaying nearly 17 million colours and images displayed with a 24-bit colour pallete will show their true colour.

The number of colours an individual pixel is capable of displaying is referred to as its bit depth, or colour depth.
Each individual pixel in an image is made up of a certain number of bits. This number is known as the 'bits per pixel' (bpp) of the image.
A 1bpp image (where only 1 bit of data is dedicated to each pixel) can only display two colours - black or white. This is because each bit can display two colours, so the greater number of bits in a pixel, the greater number of colours. A pixel made up of 8 bits is capable of producing 256 different combinations (each bit can display two colours and 2x2x2x2x2x2x2x2 or 28 adds up to 256). 16-bit images are known as 'high colour', as the maximum amount of colours increases to around 65,000 - not quite 'true colour' but a much wider range of possibilities than 8-bit images. After this comes true colour - the most common on modern displays. 16,777,000 colour combinations are possible with 24-bit images.

A comparison between three versions of the same image, displayed at different bpp's. The finer details in terms of colour and shade become noticeable in the second image and clearly defined in the third.


High definition 'deep colour' is also possible - these images are between 30 and 48 bpp and are capable of displaying over a billion colours. Deep colour is used in high-end graphics software and an increasing number of HD graphics cards are being made with deep colour capability, even though it is not used as much as 24-bit true colour.
No matter what the bit depth, all colours are made up of some combination of red, blue and green.

RGB

RGB is a colour model made up of Red, Blue and Green light - three colours that the human eye is most sensitive to and that the brain mixes together, producing a full range of colours from these three. RGB is an additive colour model as it is made up by adding colours together.
The RGB colour model is used on all electronic displays - computers, mobile phones and TVs are commonly used RGB 'output devices', whose images are shown in RGB. 'Input devices' used to create RGB images include TV and video cameras, scanners and digital cameras, as images captured with these devices are displayed on RGB output devices.
 A simplified diagram of the RGB colour model.
Any colour in the spectrum can be created by combining red, blue and green in various proportions. Each colour can range from 0 to 255 in intensity from darkest to lightest. 0 is black and 255 is white light.
 Above: A chart showing the levels of RGB required to create different colours.
Below: A full RGB colour spectrum.

Resolution

Resolution is the number of pixels that make up an image or screen display. This determines the quality of the image or display, as an image made up of a larger number of pixels will contain more detail.
The number of pixels that make up the image of a monitor or display screen is called a 'display resolution'. This affects the maximum quality of images displayed on the screen - high definition screens vary from those in standard definition simply because they display more pixels.
Each image is made up of a fixed number of pixels, no matter what device it is displayed on. This is called 'image resolution'.
Multiple variations of the same image, recreated in different resolutions - the higher resolution (number of pixels) in the image, the 'clearer' it appears.
Resolution is usually measured by combining the number of pixels that can be displayed in a row across the screen horizontally with the number of pixels that can appear in one column from vertically (from top-to-bottom) - width x height. For example, widescreen DVDs are displayed in a resolution of 720x480 - that is, 720 pixels across the screen and 480 pixels down. The resolution of a screen can be much less or much more than this: early Video CD was played back in 352x240, whereas IMAX, the largest type of cinema screen, displays in a resolution of approximately 10,000x7000. The maximum resolution capability of a monitor is determined by its size and Bit Rate.

Image Formats: What Pictures Are Made Of

Digital images aren't all the same. Different types of picture (or image formats) exist for different purposes and vary in many ways. All digital images are one of two types - raster (or bitmap) and vector.

Raster Images

A raster image is any that is made up of a grid of pixels - known as a bitmap. Raster images are the most common type of digital image.
In a bitmap, each pixel is a block of RGB colour - the file stores colour data for each pixel and so the larger the image, the more disk space the image file will take up. For example, a 640 x 480 image requires information to be stored for 307,200 pixels, while a 3072 x 2048 image needs to store information for a whopping 6,291,456 pixels.
The resolution of a raster image is fixed - if an image is 'scaled up' (increased in size), the individual pixels will become visible as the optimal display resolution for an image is set so that the pixels appear as one consistent image when viewed. This loss of quality when upscaling raster images is known as 'pixelation'.
Large raster images must contain a very high number of pixels and are therefore very large files - not very many can be stored on a computer. It is for this reason that image compression is used to reduce the size of raster images.
Image compression is a way of reducing the size (number of bits or bytes) in an image file without reducing the quality to an unacceptable level. This means that more images can be stored on a computer device, as well as reducing the amount of time it takes to transfer (upload or download) images using the Internet. There are two types of compression: lossy and lossless.
Lossy compression reduces the file in size dramatically and, as a result, causes some loss of quality. This loss may not be important or even noticeable - on most average-sized screens and especially on mobile phones, images are not displayed at 100% resolution and small 'artifacts' (distortions caused by compression) would not be noticeable. Lossy compression of an image is performed by averaging out the colours in an image and 'dropping' the less common colours, replacing them with shades of the more common colours. This is an automated computer process. Where data is lost in an image but no visible change occurs, the compressed image may be referred to as 'visually lossless'.
An example of the drop in quality when an image is subject to high lossy compression. The pixels become more visible and differences between colours are more pronounced.
However, even small losses in quality are sometimes not acceptable when an image is being displayed in a larger form, or when the finer details must be preserved for future editing or display (for example, in digital graphics or medical diagrams). Lossless compression is used in these cases. Lossless compression is performed using more complicated algorithms where the data is, in a way, abbreviated into a code. This reduces the size of a file by as much as possible without causing any distortion, but doesn't remove as much data as lossy compression and still leaves the file size fairly large.

Raster File Types

There are different types of raster image, optimised for different functions. Some are uncompressed bitmap files that give full-quality images, while others utilise lossy or lossless compression. Here are some of the most common raster file types.
JPG/JPEG (acronym for Joint Photographic Experts Group, who created the format)
JPG/JPEG is the most popular raster graphic file format using effective compression algorithms which enable you to achieve a small file size without unacceptable quality loss. When you save a JPG file you can select a compression level by adjusting the file quality to file size ratio.

In computing, JPEG is a commonly used standard method of lossy compression for photographic images. The file format which employs this compression is commonly also called JPEG; the most common file extensions for this format are .jpeg, .jfif, .jpg, .JPG, or .JPE although .jpg is the most common on all platforms. One of the strong points of JPEG is that its compression ratio is adjustable.This format is especially useful to save the results of photography or graphics work when no further alterations are needed. JPG is most commonly used on web pages (along with GIF and PNG). JPEG files have a bit depth of 24-bits - 8 bits per colour.
 
GIF (Graphics Interchange Format)


GIF is an acronym for Graphics Interchange Format. The format supports up to 8 bits per pixel for each image, allowing a single image to reference its own palette of up to 256 different colors chosen from the 24-bit RGB color space. It also supports animations and allows a separate palette of up to 256 colors for each frame. These palette limitations make the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for simpler images such as graphics or logos with solid areas of color.
Although GIF files are unsuitable for use in reproducing images in true colour, they are popular because of their low file size, lossless compression.
 
PNG (Portable Network Graphics)
is a raster graphics file format that supports lossless data compression. PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF) and is the most used lossless image compression format on the Internet. Most liked by the creators of web pages because of its intelligent transparency handling: you can round off the edges meeting the background and use such effects as shadows. PNGs are also preferred over GIFs as they are 24-bit (8 bits per colour). However, this means that the file size is relatively large.
 
TIF/TIFF
(Tagged Image File Format)

Originally created as a standard format for scanners, TIFFs are flexible in that the 'tags' in their file name can contain data alongside the image - for example, data about the size/dimensions of an image. TIFFs can be lossy or lossless (sometimes uncompressed) and have a very high maximum bit depth of 48 bits - 16 bits per colour.
 
BMP (Bitmap)
The basic raster format. In practice, it is a pure bitmap - an uncompressed grid of pixels with each colour defined. BMP files are unnecessarily large and additionally, they are not supported by all Internet browsers.

BMP images can be 1-bit (Line-art), 4-bits (16 colors for a grayscale image or a duotone image), 8 bits (256 colors for a grayscale image or a duotone image), 16-bits (65,536 colors for a grayscale image or a duotone image) or  24-bits (RGB colour with  8-bits for each primary color - 16,777,000 colours).

Vector Images

Vector images are not made up of a bitmap of pixels. Instead, they are comprised of geometric shapes and lines that can be manipulated or resized without any loss of quality. When a vector object is created using a drawing tool, the data that is created allows for a computer to calculate the dimensions and measurements of the object using mathematical equations. This also means that vector files are very small - the files are made up of equations instead of a bitmap grid with colour data etc. Vector images also support intelligent transparency, like PNGs (vector images can be saved as .png files), making them popular in web design.


 This comparison shows the difference between a magnified element of a raster image, next to a vector version of the same image. The vector image does not pixelate, as it is made of lines and shapes instead of dots and pixels.


The biggest drawback of vector images is that a vector object can only contain solid colours as opposed to raster images, where pixels can create detailed gradients. This limitation means that vector images cannot appear photo-realistic, instead appearing quite cartoon-esque.


This side-by-side comparison shows the raster image on the right recreated as a vector. As you can see, the limitations in colour have made the image look far less realistic.


Colour Space

A colour space is a useful conceptual tool for understanding the color capabilities of a particular device or digital file. The range of colours that a device can display, a camera can capture or a printer can produce is known as the colour space.

When trying to reproduce color on another device, color spaces can show whether you will be able to retain shadow/highlight detail, color saturation, and by how much either will be compromised.
A color space relates numbers to actual colors, and is a three-dimensional object which contains all realizable color combinations. Similar to how one would organize a paint palette, each direction in  a color space often represents some aspect of color, such as lightness, saturation or hue (depending on the type of space).

 A 3D representation of the RGB colour space.


RGB, described earlier in the article, is the most common colour space in digital graphics - all digital images use some variant of the colour mode. Most RGB variants, like Adobe RGB, are specific to certain pieces of editing software. However, RGB is not widely used outside digital display.

CMYK 

CMYK is the colour mode most often used in printing, utilising secondary colours Cyan, Magenta, Yellow and black (referred to as Key to differentiate from Blue in RGB).
The use of these secondary colours in print is because secondary colours are 'subtractive' of light (where primary colours are 'additive'). Monitor displays emit light of various different colours and so a primary colour mode is ideal. In print however, ink subtracts light from white paper and so subtractive secondary colours are clearer in this form.

 The difference in colours between CMYK and RGB, and the colours produced when the base colours are mixed.

Colour printers are the main output device for CMYK images and images produced in RGB on a computer should be converted to CMYK before being printed.

Greyscale

The pixels of a greyscale (or 'black and white') image contain only one type of data - intensity (or luminance) information on a scale of 0 to 255. Like in the RGB mode, 0 is black and 255 is white. However, without the colour information found in RGB, the 255 'colours' in between are all shades of grey. This mode is referred to as 'monochrome' and images produced are often called 'black and white' although truly black & white images contain no shades of grey - these are 1 bit per pixel, binary-colour images. Greyscale images can contain a variety of bit depths, but possess no colour information. Greyscale images are usually 8-bit and therefore capable of 256 shades of grey, although this can vary.


 An image with a greyscale colour mode.

 YUV (Luminance and Chrominance)

The YUV colour space is made up of Luminance (brightness, represented by the letter Y) and Chrominance (colour, represented by letters U and V). This colour mode was created as a method of broadcasting colour television alongside black and white - when television was exclusively broadcast in black and white, the luminance component was the only one broadcast. To add colour capabilities, U and V components that could only be picked up by colour sets were broadcast. It was easier to use the U and V 'colour difference' channels than to broadcast in full RGB, where three sets of data would have to be broadcast alongside the Y data.
RGB footage is converted to YUV by adding the values of the red, green and blue signals together, summing the Y value for luminance and the U and V values are measured as the difference between R B and Y values.

The greatest advantage of the YUV colour mode is that remains compatible with analog, black and white televisions while also being capable of displaying full colour RGB image. YUV's reliance on luminance is also of some benefit, as the human eye's perception of detail is based more on luminance than chrominance. This means that the luminance value can cover for loss in U and V data caused by image compression.
YUV is not an absolute colour space. Rather, it is a mode of video display and the precise colours displayed rely on the specific RGB values of the image data processed.



Image Capture

Image capture is the process of an image being taken and saved forever. There are many different ways to capture an image, used for different purposes and resulting in different types of image.


Digital Camera

Digital cameras are one of the quickest, easiest ways to capture an image digitally.
A digital camera is a similar to a traditional film-based camera, but it captures images digitally. When you take a picture with a digital camera, the light signals are recorded by a sensor called a charged coupled device or CCD, which records the light signals as electronic data. Instead of saving the picture on analog film like traditional cameras, digital cameras record the light captured and translate it into data, then saving a raster image file from the data. Some digital cameras have built-in memory onto which these files are saved, but most use an SD or Compact Flash memory card.

The light intensity of an image is measured by electrodes in the CCD called 'photosites' and the more photosites in the sensor, the finer the image quality - each photosite accounts for a pixel in the final image. The quality of an image captured with a digital camera is measured in 'megapixels' - one megapixel is a million pixels, or a million photosites. Some high-resolution images don't use round numbers of pixels and so most cameras advertise megapixel resolution with decimal points - such as 3.2 megapixels (a 3.2 megapixel image would have a resolution of 2048 × 1536).

Digital cameras have made it simple for anybody to instantly capture images of an increasingly high quality (cameras of up to 36 megapixels are available, with 50 mp devices on the horizon), upload them to computers, edit them or share them on the Internet easily. This technology has made digital imaging and photography accessible to millions of people.

Image Scanner

Image scanners were often used to transfer pictures into digital form before the advent of digital camera technology. Usually referred to simply as 'scanners', they come in many different forms, most commonly desktop 'flatbed' scanners.
A flatbed scanner is usually composed of a glass pane, under which there is a bright light which illuminates the pane, and a moving row of CCD sensors (like those found in a digital camera). CCD-type scanners typically contain three rows of sensors with red, green, and blue filters, to pick up colour as well as light. However, early scanners were only capable of picking up black and white images. The document, photograph or object to be 'scanned' is placed on top of the glass pane, with the part to be captured facing down so that the sensors can capture the image.

Other types of computer scanner include sheet-fed scanners, which work on the same principle as their flatbed counterparts except that the document to be scanned is fed into a printer-like device, where it moves past the CCD. 

An open flatbed scanner, about to scan a 3D object placed on top of the glass pane. When a 2D object - like a picture or a document - is being scanned, the lid is closed to block outside light from appearing in the final image.


Industrial scanners are used to scan large objects, for example in reverse engineering. Drum scanners vary from desktop scanners in that the sensor used is a photomultiplier tube rather than a CCD. The photomultiplier tube and reflectors are mounted inside a cylindrical drum and spun at a high speed, with the object being scanned on the outside of the see-through drum.



 A high-speed drum scanner.

Handheld 'wand' scanners can also be used, although images produced are of a lesser quality than those captured using other scanners. This relatively low-precision method is usually used to quickly scan text documents, as well as being necessary where other scanners are not suitable, for example if the object being scanned has a large surface-area and would not fit into the mechanism of any other type of scanner.

File Storage

Digital image files can be stored virtually in a number of ways. These ways vary according to file size and purpose - compressed JPEG versions of a file are fine when a photograph's intended purpose is for personal use (such as upload to a social networking website or display on a mobile phone) where quality is not of paramount importance. If an image is intended to be displayed at a very high resolution or analysed at full-pixel resolution, maximum quality is needed and files may be too large to store on a personal computer. Images captured with a digital camera are often stored on dedicated data storage devices like memory cards or external hard drives - filling a storage device with large images would not affect its performance like it would if you stored those images on a computer, in which case the computer's lack of memory would slow down performance. CDRs - blank CDs onto which data can be written (and their DVD counterparts) can be used to store uncompressed files independently of a computer - when the files are needed, the disc is inserted into the computer. Another method of storing files is cloud storage, where files are stored on an online server. However, it can be time-consuming to upload larger files to the Internet and so this method is usually used for compressed files.

Thanks for reading this article - I'm sure that I covered all you need to know about digital graphics. Check back over the next two weeks for parts 2 and 3 in the 'Interactive Media' series, where I will be talking about web animation and video in interactive media.