Best Image Formats for the Web and Email

First off, the 2019 best image formats for the web are still JPG, PNG, GIF, and SVG. There are some newer formats available that are promising but not completely supported by browsers yet.

And, for email, choose JPG, PNG, and GIF. Animated GIFs add interest to email graphics and work in most email browsers.

Decide on an image format for your project based on the type of graphic and where it will be used. Choose between using either raster or vector formats. Raster formats like JPG and PNG are best used for photos and complex images with gradients. The vector format SVG is best used for illustrations and images containing text where high resolution is important. Vector images can be scaled up or down without loss of quality. However, SVG images can’t be used in email and some older web browsers since they are incompatible. In this case, use PNGs or GIFs.

Example of PNG File compared to JPG File:

Photo in PNG File
PNG, 393 KB
Photo in JPG image formats.
JPG, 43 KB

SVG, PNG and GIF can have transparency, unlike JPG which cannot. PNG is a higher resolution format than JPG so it offers better detail and color fidelity; however, it can have large file size. The large file size will download slower for the viewer than a small file size so it can impact the user experience. If a user is not willing to wait to see the image, they might leave.

When creating your web image, start with a high-quality source file. Make your raster images 72 DPI (dots per inch) or PPI (pixels per inch) and at the width and height, you wish to see on screen. For instance, a 1024 x 768 monitor will show a 1024 pixel wide by 800-pixel tall image as a fullscreen image. On a larger monitor than that, the image will only fill part of the screen.

If you scale up raster image formats in your web browser, it will lose quality. Images for email use should usually not be larger than 720px wide.

For instance, a photo usually works best in a format like JPG or PNG. JPG usually creates a smaller file size than a PNG so it can load faster on a desktop screen or mobile device. PNG can show better detail and transparency, so it is best used in situations where you need those qualities. PNG files are usually larger than JPGs in file size so they will load slower.

You can often optimize a JPG, GIF, PNG, or SVG to get a smaller file size without losing quality by adjusting settings when exporting from your image program or use compression services. Try this website to see if your image can be made into a smaller file size without changing its appearance: https://compressor.io/

If your graphic is an illustration or type, the best format to choose is often SVG. An SVG, scalable vector graphic usually has a small file size and high-quality resolution since it is a vector format. Therefore, it can scale up and down without loss in the quality of rendering.  However, the SVG image formats can’t be viewed in email and very old browsers.

Example of SVG image formats and GIF image formats:

Hummingbird in SVG image formats.
SVG Image, 6KB
Hummingbird in GIF image formats.
GIF Image, 6KB
Animated GIF of Hummingbird
Animated GIF, 618 KB

We’re happy to help if you have questions about using images on the web or in email. Contact us for help with images on your next web project.

Leave a Reply

Your email address will not be published. Required fields are marked *