If I ask you, do you know what image formats are available today? I’m guessing you can’t tell the whole story, because there are so many different image formats these days, but you should be able to name a few commonly used formats: JPG, GIF, PNG and SVG. And then I ask you, do you know the difference between these formats? What are the applicable scenarios? Should THE logo be SVG or PNG? Should I choose JPG or PNG for screenshots? What is the optimal quality of a file without generating too many files? Understanding how each image format works and the pros and cons of each can help answer these questions.

Over the past few years, a wealth of research and testing tools in digital design and front-end development have helped clarify these issues. In this article, I’ll show you how each format works, its advantages, and how to compress and save it for web use.

Let’s start with a couple of concepts

  • Damage (Lossless) and lossless (Lossy) : When we talk about pictures, we often hear the words lossless and lossless. What are lossless and lossless? Lossless is the image in the compressed storage although the occupation of smaller, but the image presentation quality is still the same; Lossy, on the other hand, gets worse and worse as the image is compressed over and over.
  • The color of the index (Indexed color) and direct colors (Direct color) : According to different color depth can be divided into index color and direct color. Index color is the color of the image specified by the image author not more than 256 colors; Direct colors, on the other hand, have no restrictions on the use of colors and can have thousands of color values.
  • Raster format (raster) and vector formats (vector) : The image can be divided into raster graph and vector graph according to the way of information presentation. Raster map is also called bitmap, bitmap or pixel map. The smallest unit of a map is composed of a combination of colored pixelsPhotoshopWhen the image is maximized, you will see a lot of pixels, so the image may be distorted when the raster is scaled; Vector maps are based on points, lines and some geometric figures, arranged and combined by mathematical calculation, which can protect the quality of the map when it is telescopic.

JPEG

JEPG was created in 1992 by the Joint Photographic Experts Group and named after its creator. JPEG is a lossy raster image format, which means that every time a JPEG is compressed, some information will be irreversibly lost. And it can store in unlimited colors, which makes it friendly to store very colorful and complex images like photos.

Because of the advantages of JPEG compression in brightness and color, JPEG is ideal for use in photographs and images with strong color gradients such as gradients and shadows.

JPEG compression can be stored in Photoshop as a Web format when you can directly choose the compression quality, generally used in the Web JPG image selection of 50-60% quality can be, because it gives both good image quality and small file size. You can also use TinyJPG, an online compression tool.

In the image below, I used a 50% quality compressed JPG, which is obviously much better than GIF, and the file size is much smaller.

The difference between JPEG and JPG: JPEG refers more to a compression algorithm for the.jpg image format, while JPG is an image storage format.

PNG

Portable Network Graphics is also a raster image format that has been around since 1995. It differs from JPEG in that it is lossless and is by far the most common lossless format on the web. This means that due to its compression algorithm, no information is lost when the file is saved and compressed.

PNG format

PNG can be broken down into several formats: PNG 8, PNG 24, and PNG 32. So how do you tell what format a PNG image is in?

Open the properties panel of the image above, and you can see from the details that there is a property called bit depth, and its value is 24, so it means that it is a PNG image in 24 format. Similarly, PNG 8 and PNG 32 have bit depths of 8 and 32, respectively.

Bit depth represents the maximum value of color that an image can store. 8 bits is 2^8 (2^8=256) colors, so PNG 8 can only store 256 colors at most. PNG 24 and PNG 32 also called true color, up to store 2 power of 24 kinds of color, can reach the limit of human eyes resolution; The remaining 8 bits in PNG 32 store Alpha channel transparency.

Then how do you generate these images in different formats? Natural is to use professional image processing software, such as Photoshop or Fireworks. Png-8 and PNG-24, not PNG-32. Is it because Photoshop doesn’t support this format? And it isn’t.

Exporting pNG-32 images in Photoshop is done by selecting pNG-24 and selecting Transparency below so that the resulting image is 32 bits, or pNG-24 if transparency is not selected. Png-24 does not support transparency, pNG-32 does.

PNG transparency

From Fireworks 8’s optimization panel, you can see that PNG has three transparent formats: opaque, index transparent, and Alpha transparent.

  • PNG 8 Transparency

    As you can see from the image above, PNG 8 supports all three opaque formats. But Photoshop only supports export opaque and indexed transparent formats. In Photoshop, if PNG 8 is selected and transparency is checked, the exported image is PNG 8 indexed transparent, otherwise PNG 8 opaque.

    Exporting PNG 8 in various formats with Photoshop and Fireworks 8 is shown below:

    According to the picture above, we can come to the conclusion that:

    • PhotoshopThe exportedPNG 8The pictures are jagged.
    • PNG 8Index transparency is serrated, andFireworks 8The exportedPNG 8Index transparent serrations are white.

    Let’s take a look at how these formats look in different browsers:

    According to the picture above, we can come to the conclusion that:

    • PNG 8Index transparency sumAlphaTransparently compatibleIE 6; But the fly in the ointment,PNG 8AlphaTransparent inIE 6The bottom will produce a sawtooth.
    • Images in other formats behave the same across browsers.
    • Fireworks 8The exportedPNG 8The index is transparent with a white serrated edge, but if the image is placed under a container with a white background, the white serrated edge will not be visible at all and will behave as normal.

  • PNG 24 and PNG 32

    PNG 24 is opaque; PNG 32 is transparent and Alpha transparent. Take a look at how they look in different browsers:

    The transparent area of PNG 32 images will no longer be transparent in IE 6, but will instead be a gray fill with a color value of F0F0F0, which is normal in more advanced versions of IE. PNG 32 images will not have jagged edges.

PNG compression

Earlier in this article, I mentioned JPEG’s excellent performance on colorful images such as photos, so now compare it to the three PNG formats. It mainly compares the storage volume and performance effect before and after compression. I used TinyPNG, a free online compression tool that compresses JPEG and PNG formats.

From the picture above, we can draw some conclusions from different angles:

  • PNG 8Format image color processing is very abrupt, you can see the obvious wave wrinkles, this is because it can only store 256 colors, soPNG 8Not suitable for storing images with complex colors. On the contrary, due to its relative toPNG 24orPNG 32It has the advantage of small storage volume, so it is very suitable for ICONS, simple colors or transparent images.
  • Compare 100% qualityJPG55% qualityJPG,PNG 24 和 PNG 32To the naked eye, they all look the same, but the amount of storage they take up is ridiculously different. Before compression, should be 55% massJPGMinimum occupied storage; After compression,PNG 24 和 PNG 32Same, 55% more massJPGSmaller, but because ofPNG 32Supports transparency, so it is recommended for colorful imagesPNG 32Format export, and then use a compression tool to compress it.
  • Compare before and after compressionPNG 24 和 PNG 32The two storage volume difference is huge, but the performance effect is similar, so used forwebOn thePNG 24 或 PNG 32Images must be compressed, which is a great help for client performance optimization.

GIF

Graphics Interchange Format is also a raster Format that can store up to 256 colors, supports transparency, and works well under IE 6. The only fly in the trap is that in addition to the opaque GIF Format exported by Fireworks 8, All other GIF images have jagged edges.

However, GIF is not all bad. The biggest advantage of GIF is that it supports simple animations. Like the following simple traffic light animation:

SVG

Scalable Vector Graphics, as the name suggests, is Vector, not raster. Different from raster format, which relies on pixels to store images, vector image is data-recorded by XML format. So SVG has the following advantages over raster format images:

  • Zoom in and out of the image without destroying clarity and detail.
  • Fully supportDOM, as well asJavaScriptYou can access it very well.
  • In general,SVGThe documents will be better thanGIF 或 JPGIt’s going to be a lot smaller.

Like other vector formats, SVG images can be enlarged to any size without losing any detail. For example, the same icon can be used in multiple sizes and will look sharp in any screen resolution (such as a Retina display) without having to store multiple files. For example, here is a comparison of the image, the right is a vector image, the left is another format image:

SVG USES

SVG is widely used in line art, logos, ICONS, illustrations, and data visualization. But it is not suitable for realistic images and complex pictures with many details. In some cases, SVG and PNG serve the same purpose well. For line art, SVG typically generates smaller files. This is not inevitable, however, and depending on how many anchors a vector image has, it may even produce a larger file than PNG. Where SVG really excels is in data visualization. Libraries such as D3 offer endless possibilities as JavaScript can be used to manipulate and create vector animations. Logos, ICONS, and data visualization are good examples of SVG usage.

SVG compression

A better SVG approach would be to reduce file sizes by removing unnecessary anchors, elements, and attributes from SVG vector graphics. Anchors draw a vector image, so you need to make sure that removed anchors do not affect the final shape of the vector image. If you are editing SVG in Adobe Illustrator, be sure to use Guide -> Export as instead of File -> Save as for saving, as this produces a minimal file.

Cleaning up unnecessary nodes is one way to reduce the size of SVG. Element tags are everything contained in an SVG file, including the start and end tags. Vector editing software such as Adobe Illustrator and Sketch may contain SVG with non-essential elements and attributes everywhere. The SVG compressor can be used to remove this redundant information. Online tools such as Compresso and SVGOMG can do this.

Refer to the article

  • Using JPG, PNG, and SVG on Web pages: A beginner’s guide
  • PNG Usage Tips
  • PNG vs. GIF vs. JPEG vs. SVG – When best to use?
  • JPG vs PNG vs GIF vs SVG — What is the Difference?