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
- 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.
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
Webinar by Chris Coyier. For a partial recap of the webinar, see: Designing with SVG: How Scalable Vector Graphics Can Increase Visitor Engagement
For more information on how to customize your website, or getting started with the design process, please check out more articles here!