Transcript Week 6 Lecture Slides

ATLAS 2200 - WEB
Web Graphics & Optimization
Graphics Interchange Format (.gif)
• Introduced by CompuServe in 1987
• Free, open specification format on CompuServe 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 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
• MySpace, 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-20x
• 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 35kB
High Compression 20kB
Portable Network Graphics(.png)
• Created and adopted as the standard image format for the web by
the W3C in the mid 1990s 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)
Vector Graphics and the Web
• SmartSketch, 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 JavaScript and API
plug-ins, enabling the browser to be expanded upon beyond its original
designs
• SmartSketch was renamed FutureSplash
• FutureSplash Plugin came preinstalled with Internet Explorer 3.0 which was
competing with Netscape
• 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
• FutureSplash 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 animations to
collaborate in a web-based space
• 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
Vector Graphics
Scalable Vector Graphics (.svg)
• Open standard image format, developed by the W3C 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?
Wire Framing
Wire Framing
Wire Framing
Wireframe.cc
Mood Boards
Mood Boards
Attendance Question: Week 6
Within your own personal class portal or external website, describe a
specific situation in which you could employ a .gif, .jpg, .png, and .svg
image file into your site. Be sure to describe the use of the image in
context to the image’s properties and characteristics.
Post your question to Edmodo under “Lecture Attendance Question
Week 6” Your answer should be approximately one paragraph in
length.