Keep the source:
There are 4 basic choices for image file formats:
While some formats offer multiple compression systems, in general the format and the compression system are tied together.
Other image formats should be avoided in most cases:
The editability and scalability of SVG (Scalable Vector Graphics) make the format the obvious choice for graphic representation of data and illustrations. However, it is not always easy to convert raster images like GIFs, PNGs, or JPEGs to SVG, and some images (especially photos) are not conducive to this treatment. If a diagram cannot be produced in SVG then a PNG image is preferred over a JPEG.
The PNG compression algorithm is designed to work with large areas of solid colour that have sharp boundaries. It is therefore a good format for diagrams and cartoons. But it does not automatically give you the smallest possible file size. There are some things that need to be done by hand.
There is a delusion among many web designers that PNGs are larger than GIFs. This delusion originates from two facts:
Does the number of bits per pixel fit the number of colors in the image? Diagrams usually have few colours. If a diagram has 4 colours, there is no need to store it in a 24-bit (truecolour) format capable of distinguishing 16 million colours. The lower colour depth versions of PNG store colours in a palette. Paletted images can have a bit depth of 1, 2, 4, or 8 bit (2, 4, 16, or 256 colour). Use the lowest bit depth that can handle all colours in your image, although some image editing programs cannot create 2-bit colour images.
If you are converting an image with many colours (perhaps because somebody saved the original as a JPEG, avoid this) to a PNG, you may want to reduce the number of colours at the same time; see .
An anti-aliased image may use more colours than you notice, because anti-aliasing smooths jagged edges by adding shades of grey where once there was black or white. Anti-aliased black-and-white images usually need to be saved as 16-colour or 256-colour images instead. See the illustration at the right.