1. Web Graphics & Optimization
ATLAS WEB
Web Graphics & Optimization

2. 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

3. 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

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

5. 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

6. 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

7. Joint Photographic Experts Group(.jpeg / .jpg)

8. Joint Photographic Experts Group(.jpeg / .jpg)
Low Compression 35kB
High Compression 20kB

9. 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)

10. Portable Network Graphics(.png)

11. 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

12. 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

13. Early Flash Jonni Nitro - https://vimeo.com/38520911
Homestar Runner -

14. Vector Graphics

15. Vector Graphics

16. 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

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

18. Wire Framing

19. Wire Framing

20. Wire Framing
Wireframe.cc

21. Mood Boards

22. Mood Boards

23. 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.