FLOWiki

(y)our wiki about all things technical communication

User Tools

Site Tools


images:right_format_for_screenshots_web

What is the right image format to use for publishing screenshots on the Web

This article prefers the PNG format because “it merges a high-quality, artifacts-free compression, the alpha channel and a quite good compressed size”.

Image formats

You can save screenshots in several different image formats:

  • PNG
  • JPG
  • GIF
  • TIFF
  • BMP

There is no universal best image format – each format has its own scope of possible applications.

More details on the supported image formats

PNG (Portable Network Graphics) is a relatively new image format specially invented for the Web images. The main advantage of this picture format is its alpha-channel transparency support. The PNG is possibly the best choice for saving screenshots as it doesn’t add distortions and noises due to its lossless data-compression algorithm. It is also the only appropriate image format for screenshots with shadows and reflections.

JPG or JPEG (Joint Photographic Experts Group) features lossy image compression algorithm. On one hand it significantly decreases the size of the image. On the other hand, however, the downsides are noises and distortions in the compressed image. JPG format is an excellent choice for digital photos, or high-color screenshots with a picture background, though it performs much worse with detailed images, or images that contain text. Also, JPG does not support the alpha-channel so it is not suitable for screenshots with shadows or a transparency.

GIF (Graphic Interchange Format) was initially developed in 1987 and was the major image format on the Web until the PNG development. The main advantage and, at the same time, the main disadvantage of the GIF is its low color depth. GIF is capable of storing pictures with 8-bit color only which ends up with 256 color in total. However, GIF has its advantages too. It is a lightweight format and is still applicable for Web images. It also provides a very good compression for solid color images (like windows with large empty areas) and doesn’t add image artifacts thanks to lossless compression algorithm.

TIFF (Tagged Image File Format) is a flexible image format suitable for holding a pack of images and data within a single file. TIFF uses a lossless LZW compression and thus can be edited and resaved without losing image quality. TIFF is mostly used as a container to save scanned images and various graphics. It is also a de facto standard for sending faxes.

BMP (Bitmap) is a legacy image format with simple RLE compression algorithm or no compression at all. It stores images with any color depth from 1 bpp (bits per pixel) to 32 bpp. Due to lack of efficient compression algorithms, a BMP file is 10 to 15 times larger than the same image stored as PNG or JPG file. That is why BMP is not used on the Web and is only a compatibility format these days.

What are suitable image formats to use?

In real life, you’ll generally choose PNG or JPG image formats to store your screenshots. Puzzled which one you need? Both PNG and JPG are suitable for Web usage, though there are several significant differences between them.

This comic created by Louis Brandy clearly shows the main disadvantage of JPEG.

Advantages and disadvantages of PNG

Pros: Supports the alpha channel, so you can use it for images with transparent background and/or translucent shadows. It uses a lossless image compression, so you won’t see visual artifacts around a text or small details of a picture. As such, this format is best used with screenshots.

Cons: Lossless compression is not very good when you need to compress a high-quality photo. A digital photo saved as PNG is 3 to 4 times larger in file size than the same photo in JPG format. Therefore, PNG is not the right choice if you want to build a digital photo gallery, for example.

Advantages and disadvantages of JPG

Pros: It features very good image compression algorithms. In some cases, the size of an image can be reduced dozens of times! Thanks to this, a high quality digital photo with a decent resolution takes very little bandwidth when placed on the Web. This format is a perfect choice to upload your family photos to Flickr.

Cons: When you save an image with lots of text or small contrast details, you can easily notice the strange noises around them. These are the compression artifacts, and they are the price you pay for the small size of the output image file. Because of that, it is not a good idea to choose this format if you need to save screenshots of dialog windows, or screenshots with large amount of text within.

Summary

In today’s world of high-speed Internet, PNG has become the prevailing format on the Web. Indeed, it merges a high-quality, artifacts-free compression, the alpha channel and a quite good compressed size. That’s why this format is the default selection for saving screenshots.

images/right_format_for_screenshots_web.txt · Last modified: 2017/03/30 13:16 (external edit)