Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Photoshop Designs to Code
  • Discussion

  • Study Guides

  • Table of Contents

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Image Formats for the Web

  • There are 3 main image formats for the web
  • Each one is a bit different from the other
  • These formats are gif, jpg & png
  • You determine which format you want to use for each individual image when you optimize the images
  • Gif
    • 256 colors
    • Can be animated
    • Allows transparency
    • Lossless - you can reduce file size without losing quality
  • Jpg
    • Millions of colors
    • Cannot be animated
    • Does not allow transparency
    • Lossy - to reduce file size you will always be reducing quality
  • Png
    • Designed to bring out the best of gifs & jpgs
    • There are different kinds of pngs
    • Png format does not support animation
    • Allows transparency
    • Lossless - you can reduce file size without losing quality
    • Not supported by older browsers
    • Renders quicker than gif
    • Pngs support multiple bit depths
    • Older versions of Internet Explorer (v6) did not support pngs
    • Pngs with transparency were less well supported
  • Whatever produces the best quality at the smallest image size is the format you should use
  • Personally I do not use many pngs, it may be me but I usually find them to end up larger than a gif or jpg although it may be because I am not as familiar with them because browsers did not support them for many years