In a collaborative session, we reviewed some example graphics and images and discussed as a group what would be the best format to save each as for choosing the best image format. Below is a list of the best image formats.
Image Formats for Websites
- JPG
- GIF
- PNG
- SVG
Take Aways
- When saving images to be used on a website, the goal is to optimize images as much as possible, while maintaining quality.
- Different image formats will work best in different situations. No one format will always be the best fit.
- Often, you need to test saving an image in different formats to see which provides the best balance of optimization and quality.
- JPG is generally best for photos.
- PNG is generally best for simple color graphics, particularly when detail and colors need to be preserved, or a transparent background is needed.
- SVG (Scalable Vector Format) is an image format for vector graphics that can also be animated. See the SVG category under Resources for links to more information on SVG.
- GIF is generally best for animations where SVG isn’t a good fit.
More Info
10 Must Know Image Optimization Tips
Section: Know Which Image File Type to Use for the Right Situations
​
How To Optimize Images For Your WordPress Website
Section: File formats
​
Optimizing Images – Choosing an Image Format
Section: Choosing an Image Format
Image File Types: Top 5 Types Of Picture Formats
Webinar by Chris Coyier. For a partial recap of the webinar, see: Designing with SVG: How Scalable Vector Graphics Can Increase Visitor Engagement
Video course on SVG, by Chris Coyier.
Everything you need to know about SVG
A little tutorial that explores the usage of SVG line drawing animations.
SVG Drawing Animation
For more information on how to customize your website, or getting started with the design process, please check out more articles here!
