ATLAS 2200 WEB Web Graphics Optimization Graphics Interchange

ATLAS 2200 - WEB Web Graphics & Optimization

Graphics Interchange Format (. gif) • Introduced by Compu. Serve in 1987 • Free, open specification format on Compu. Serve network • Supports 256 colors • Ideal for simple animations, logos, and line drawings • Supports 2 alpha channels • Unsuitable for photography • Can be animated • Mosaic Web Browser introduced the <img> element in 1993 • At the time, <img> in mosaic supported B&W. xbm and. gif formats

Graphics Interchange Format (. gif) • Lempel Ziv Welch (LZW) data compression • Each pixel color value is stored within a table • When neighboring pixels are the same color, the run length is specified followed by the color value • No data loss • LZW data compression made gifs very small and easy to download • Patent owned by Unisys • 1994: Developers would have to pay a license fee to use the LZW algorithm • This paved the way for other open-source image formats to be created • 1996 Netscape 2. 0 was release and supported animated gifs

Graphics Interchange Format (. gif) Dancing Girl - 1996 - Chuck Poynter Dancing Baby - 1996 - Michael Girard and Robert Lurye Peanut Butter Jelly Time - 2002 Ryan Etrata and Kevin Flynn

Graphics Interchange Format (. gif) • LZW Patents expired in 2004 • My. Space, Tumblr, Buzzfeed attracted new generation of users • Smartphone operating systems do not support Flash Pluggin • Gifs reemerged as means of conveying simple, non-video based animation on the web

Joint Photographic Experts Group(. jpeg /. jpg) • • • Most common image format on the web (across all media? ) Created in late 1980’s and approved in 1992 Ideal for photography (Millions of colors) Not ideal for line drawings No alpha channels Lossy data compression that can be adjusted for quality • Data compression that cannot be undone • Compression loses data • Lossy compression can reduce file sizes by up to 15 -20 x • Not ideal for undergoing multiple edits • Start with lossless source file and export as JPG

Joint Photographic Experts Group(. jpeg /. jpg)

Joint Photographic Experts Group(. jpeg /. jpg) Low Compression 35 k. B High Compression 20 k. B

Portable Network Graphics(. png) • Created and adopted as the standard image format for the web by the W 3 C in the mid 1990 s after Unisys enforced patents on LZW compression algorithm • Lossless image compression format • Can be saved and re-edited multiple times without quality loss. • Supports millions of colors • Single image format (No animation) • 100 alpha channels (Full transparency range)

Portable Network Graphics(. png) Thanks for the pic, Wikipedia

Vector Graphics and the Web • Smart. Sketch, founded in 1993, set out to allow users to put vector-based animation on the web. The process was painstaking and required the use of Java • A year later, Netscape 2. 0 was launched and integrated Java. Script and API plug-ins, enabling the browser to be expanded upon beyond its original designs • Smart. Sketch was renamed Future. Splash • Future. Splash Plugin came preinstalled with Internet Explorer 3. 0 which was competing with Netscape • MSN, Disney, and The Simpsons were some of the early adopting brands of the plugin, creating websites that ran in the plugin

Vector Graphics and the Web • Future. Splash was purchased by Macromedia in 1996 and the program was renamed Macromedia Flash • Hillman Curtis, working at Macromedia, created the first Flash website • Flash was the tipping point that enabled artists and animators to create in a web-based space • Dawn of rich media experiences on the web. Video, animated interaction, games, music players, etc. • Flash websites, using vector graphics, loaded significantly faster than websites containing traditional raster images

Early Flash • Jonni Nitro - https: //vimeo. com/38520911 • Homestar Runner - http: //www. homestarrunner. com/

Vector Graphics

Scalable Vector Graphics (. svg) • Open standard image format, developed by the W 3 C since 1999 • Supported by all modern web browsers • Scalable (no way!) image format that does not degrade in quality as the size increases • Cartoony style, best suited for logos, drawings, and other illustrated content • Not ideal for photography or life-like images • Typically much smaller in file size than raster images • Can be animated via scripting

Image Optimization Photoshop > File > Export > Save for Web (Legacy) • . jpg, . png, . gif Size Vs Quality?