Outline // Sample Page // Web Jobs // Resources // Homework
Web Graphics // Information Architecture // Styleguide // Wireframes // Sitemap // SEO // 3rd Class // 4th Class

PRINT2WEB

[ Web Graphics ]

PNG

Portable Network Graphics (PNG) is a bitmapped image format that employs lossless data compression. PNG was created to improve upon and replace the GIF format, as an image-file format not requiring a patent license. PNG is pronounced both P-N-G and ping.

PNG supports palette-based (palettes of 24-bit RGB colors), greyscale or RGB images. PNG was designed for transferring images on the Internet, not professional graphics, and so does not support other color spaces (such as CMYK).

PNG files support 24-bit color
PNG files support transparency
Not all browsers support PNG files

JPEG

The Joint Photographers Experts Group issued their recommended compression method for photographs as early as 1992. JPEGs are known as a "lossy" format, meaning they have several levels of compresson that can be applied to an image, that remove data that can never be recovered when saved. JPEG compression levels are 1-12, 1 being the highest level of compression and 12 the least.

JPEG files support from 1-12 levels of compression
JPEG files are the best way to display photographic levels of detail in an image, with subtle shifts in color
JPEG are universally supported

GIF

The Graphics Interchange Format (GIF) is an 8-bit-per-pixel bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability.

The format uses a palette of up to 256 distinct colors from the 24-bit RGB color space. It also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for more simple images such as graphics or logos with solid areas of color.

GIFs are suitable for sharp-edged line art (such as logos) with a limited number of colors. This takes advantage of the format's lossless compression which preserves very sharp edges (in contrast to JPEG).
GIFs can also be used to store low-color sprite data for games.
GIFs are used for small animations and low-resolution film clips.
In view of the general limitation on the GIF image palette to 256 colors, JPEG is a more commonly used format for digital photographs. JPEGs can save information on more than 16 million different colors and use more aggressive lossy compression which has a less noticeable effect on photographs than it does on images with sharp edges.
The PNG format is a popular alternative to GIF images since it uses better compression techniques and does not have a limit of 256 colors, but PNGs do not support animations. The MNG and APNG formats, both derived from PNG, support animations, but aren't widely used.

Video

Most video compression is lossy, i.e. it operates on the premise that much of the data present before compression is not necessary for achieving good perceptual quality. For example, DVDs use a video coding standard called MPEG-2 that can compress ~2 hours of video data by 15 to 30 times while still producing a picture quality that is generally considered high quality for standard-definition video. Video compression, like data compression, is a tradeoff between disk space, video quality and the cost of hardware required to decompress the video in a reasonable time. However, if the video is overcompressed in a lossy manner, visible (and sometimes distracting) artifacts can appear.

The most commonly used format is FLV (Flash Video), but also Windows Media Video, RealMedia, Quicktime or DivX
The size of video makes it difficult to work with, requiring an above-average PC and time to convert between formats with a codec
A CODEC is a compression/de-compression algorithm that optimizes video for a format. Video can usually be compressed 15-30 times without any noticable loss in quality.
There are numerous tools, both free and paid, for converting video from one format to another
WMV, Flash video, DivX, RealMedia usually require plug-ins to be installed in a browser for them to work
The compression of video is a trade-off between time to compress, disk space and quality after compression

Audio

Audio is much easier to implement than video. There are many tools for converting audio into the proper format, mp3 in particular. Delivery is usually by Flash or Quicktime.

Some common formats include: MP3, aiff, wav, WMA, Quicktime
Audio on websites that aren't music related is frequently annoying if used improperly
Always include the option to mute audio when implementing it
There are numerous plugins using xml to create a playlist of music tracks users can select

Flash Animation

Flash is very versatile. It's plug-in player is installed on over 90% of browsers in some form. Flash is capable of building complete website solutions, animations and delivery video. It's downsides are it's proprietary programming language (called ActionScript), its requirement for a plug-in to be present and be the right version for the delivered content, and its generally long development time.

[back to top]