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:
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 l
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 full
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
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:
