Design Basics: GIF, JPG, PNG

There are three image types that are considered “web native” – which means that they can be displayed by a web browser: GIF, JPG and PNG. What are they and why would you pick one format over another?

GIF : Graphics Interchange Format
CompuServe introduced this bitmap image format in 1987. It is a compressed (lossless) 8-bit format, which means that it can support only 256 colors. It is possible to make the “background” of a GIF transparent, which means the image will float (not appear to be a square) on a page. GIFs can also be animated images. GIFs are best for flat color and line drawings such as found in logos and navigation icons. More from Wikipedia.

JPEG/JPG: Joint Photographic Experts Group
The Joint Photographic Experts Group developed the JPEG, a 16-bit compressed (lossy) format, in 1992 — in part because GIFs are unsuitable for continuous tone images like photographs. There are varying levels of compression; the more compressed an image, the smaller the file size. However, compression means throwing away information, so image quality deteriorates with file size reduction. More from Wikipedia.

PNG: Portable Graphics Format
The PNG is an example of supervening social necessity (for my COM546 students). In 1995 Unisys, the company Compuserve hired to create the GIF format, threatened to enforce their patent on the compression technology. PNG-8 is similar to GIF (8-bits, 256 colors). PNG-24 has 24-bit color support, but unlike JPGs, the format is lossless; thus, files tend to be larger. More from Wikipedia.

screenshot - time - gif

Screen Capture - Time.com - GIF

Screen Capture  - Time.com - jpg

Screen Capture - Time.com - JPG

Screen Capture  - Time.com - png

Screen Capture - Time.com - PNG

Bikes In Sand - GIF

Bikes In Sand - GIF


bikes

Bikes In Sand - JPG


Bikes In Sand - PNG

Bikes In Sand - PNG

Bikes Pixelated - 01

Bikes Pixelated - 01


Bikes Pixelated - 02

Bikes Pixelated - 02

Advertisements

6 thoughts on “Design Basics: GIF, JPG, PNG

  1. Pingback: Week 2 – Web Site Genres « Web Design & Layout

  2. Pingback: Session 2 : 5 October « COM585

  3. Pingback: Week 02-Day 2 : Web Site Genres « NU WebDesign

  4. Pingback: Week 4 : Wednesday « Digital Journalism

  5. Pingback: Week 02 : Web Site Genres « Web Tools For The Digital World

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s