Web design & Internet tutorials
Search the site...
Home» Tutorials » Graphics » What’s the Best Image Format for the Web? JPEG, GIF, and PNG Comparison Chart

What’s the Best Image Format for the Web? JPEG, GIF, and PNG Comparison Chart

Posted by Janine Warner - September 8, 2012 - Graphics, Tutorials

One of the most common questions about images for the Web concerns when to use the GIF or PNG image formats, and when to use JPEG. The simple answer is use JPEGs for photos and other images with millions of colors, use PNG for everything else.

Format Best Use
GIF
(Extension is .gif)
For line art (such as one- or two-color logos), simple drawings, animations, and basically any image that has no gradients or blends. GIF is also the best format when you want to display an image with a transparent background.
PNG
(Extension is .png)
PNG generally produces better-looking images with smaller file sizes than GIF for the same kinds of limited-color images. Really old browsers, such as IE 3, don’t support the PNG format, but most Web designers now choose this format over GIF because so few people use such old browser. Browsers as recent as IE6 don’t display transparent PNG files properly, which is unfortunate because PNG files tend to handle transparency better.
JPEG
(Extension may be .jpg or .jpeg)
JPEG is the best format for colorful, complex images (such as photographs); images containing gradients or color blends; and any other images with millions of colors.

Creating and Optimizing images with Adobe Photoshop Save for Web

  1. Choose the best format for your image: JPEG, PNG, or GIF
  2. Change image resolution and resize graphics before optimize
  3. Optimize JPEGs with Photoshop’s Save for Web feature
  4. Optimize GIF and PNG files with Photoshop’s Save for Web feature
graphics

One comment on “What’s the Best Image Format for the Web? JPEG, GIF, and PNG Comparison Chart”

  1. Image Compression Software for Website use? says:
    December 23, 2013 at 8:02 pm

    […] Check this and find your suitable image format. Then, you can google best image converter. What's the Best Image Format for the Web? JPEG, GIF, and PNG Comparison Chart | Web Design Training … Originally Posted by SHAWT I'm looking to compress image files with out major reduction […]

Recent Posts

  • Google Analytics for Creative Professionals – new class on Pluralsight
  • Follow the cursor JavaScript sample
  • Part Four: Tools that let amateurs look like professionals
  • Part Three: Influence, Klout and finding what’s hot
  • Best social media tools part 2: Twitter, Instagram and Pinterest
  • How to add sound to a website
  • The advantages of a dynamic website, such as WordPress
  • How do you preserve Google rankings when you redesign a WordPress site ?
  • Browser Testing Tools
  • My updated Facebook Template works on small and large screens




© 2001 - 2020 All rights reserved. DigitalFamiliy.com | Terms & Conditions of Use | Privacy Policy

This is a demonstration store. No physical products will be shipped. Dismiss