Here are some succinct guidelines on which image formats to use on the web, in email, and in print, based on CNCF’s experiences:
SVG: Use for logos
SVGs are the preferred image format for logos as they’re resolution-independent (that is, they look good no matter how high-resolution your screen is), lightweight (that is, their file size is smaller than other formats), and can be easily converted into PNGs and into print formats (like PDF and EPS). All of the logos in the interactive landscape are SVGs (following our logo guidelines). SVGs are now natively supported in PowerPoint but importing SVGs into Google Slides is much more tedious than it should be, so you may want to substitute a PNG, but ensure it’s high resolution.
JPG: Use for photos
Though lossy and not resolution-independent, JPGs are the preferred format for photos but aren’t much good for anything else. (Lossy means that text and illustrations can look blurry and so it’s not suitable for logos. Not resolution-independent means that photos will look blurry if you blow them up more than their original resolution.) When you create a JPG you can set the degree of compression. When preparing an image for the web, make the compression as high as possible to minimize the file size but not so much that the photo starts looking “blocky”.
PNG: Use for logos and diagrams when you can’t use an SVG
Minimize your use of PNGs. It is not a resolution-independent format so they often look blurry on high-resolution screens like Macs and iPhones. They are useful, however, in the following situations:
- Gmail doesn’t support SVGs, so PNGs are the best choice for logos in email
- On webpages, use PNGs for the Twitter card preview image, since Twitter doesn’t support SVGs
- Use when embedding large, complex drawings into webpages such as the trail map or landscape
- PNGs can include transparency so use on webpages when you need transparency and there’s no SVG option
PDF: Use for print and ready-to-print brochures
PDF, like SVG, is a resolution-independent format that is suitable for printing or displaying on high-resolution screens. It’s intended as an output format, however, and is not easily usable as an input to webpages or other media. Also, embedding a PNG or JPG into a PDF will still look blurry at high-resolution. Instead, start with a resolution-independent format (such as SVGs or original designs from Adobe Illustrator) to produce PDFs that look good zoomed in or printed commercially.
EPS & AI: Don’t use
These are often used as the original format in which a design is created and/or sent to print. If you get a logo in this format, use cloudconvert.com to convert it to an SVG.