PNG Files
Primary use cases
- Transparency
- Simple Graphics
- Charts
- Graphs
- Icons
PNG file format are great for simple graphics that do not contain photographs or gradient filled graphics.
When not to use PNG
If your image is a photograph or contains gradients, you should use JPG file format instead. PNG is a lossless image format, this means that the file size will be very large if used for photographs or gradients.
JPG Files
Primary use cases
- Photographs
- Complex graphics with gradients
JPG file format is designed for complex imagery such as photographs or complex graphics that contain gradients of color. Optimizing them to 80% quality is adviced.
When not to use JPG
If your image is a simple graphic without gradients or requires transparency, you should use PNG or SVG file format instead. JPG file format does not support transparency and sharp edges of simple graphics will look better as a PNG.
SVG Files
Primary use cases
- Vector graphics
- Logos
- Icons
- Transparency
- Simple Graphics
- Charts
- Graphs
SVG file format is perfect for logos and simple graphics that do not contain photographs or raster images.
In particular SVG format is a vector file format, the main difference between vector and raster graphics is that vector graphics are made up of mathematical formulas, while raster graphics are made up of pixels, see more information below.
When not to use SVG
If your image contains photographs or raster pixel graphics, you should use JPG or PNG file format instead, see the JPG and PNG sections above for advice on which to choose.
Raster vs Vector Graphics
The main difference between vector and raster graphics is that vector graphics are made up of mathematical formulas, while raster graphics are made up of pixels.
Example of vector graphics
Note the smooth curves, these will remain smooth at any size for vector graphics. SVG image format is designed for vector graphics.
Example of raster graphics
Note the pixels in the zoomed in cutout. JPG and PNG are designed for raster graphics.
