With a few image file formats available how do you determine which is right for your site and for your projects? Each format produces variances in file size, compression, and quality. To make things more confusing, you may not even be able to tell the difference when your imagery is displayed in your site. We’ll take a look at the key differences between the lossy format JPG, and the lossless format PNG.

If you have access to image editing software like Adobe Photoshop, Adobe Lightroom, Apple Aperture, Corel PaintShop Pro, Capture One Pro, ACDSee Pro or GIMP then you’ll have all you need to make sure that both you and your viewers get the best from your work.

Definitions

PNG (Portable Network Graphics), is a raster graphics file format that supports lossless data compression. PNG was created as an improved, non-patented replacement for GIF, and is the most used lossless image compression format on the Internet.

PNG supports palette-based images (with palettes of 24-bit RGB or 32-bit RGBA colors), grayscale images (with or without alpha channel), and full-color non-palette-based RGB[A] images (with or without alpha channel). PNG was designed for transferring images on the Internet, not for professional-quality print graphics, and therefore does not support non-RGB color spaces such as CMYK.

JPEG (Joint Photographic Experts Group) is most often seen with the .jpg or .jpeg filename extension, and is the most commonly used method of lossy compression for digital images, particularly for those images produced by digital photography. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves 10:1 compression with little perceptible loss in image quality.

JPEG compression is used in a number of image file formats. JPEG/Exif is the most common image format used by digital cameras and other photographic image capture devices; along with JPEG/JFIF, it is the most common format for storing and transmitting photographic images on the internet.These format variations are often not distinguished, and are simply called JPEG.

Usage

JPEG’s lossy encoding method format will generally produce a smaller file than PNG for photographic (and photo-like) images, and is specifically designed for photographic image data, which is typically dominated by soft, low-contrast transitions, and an amount of noise or similar irregular structures. Using PNG instead of a high-quality JPEG for such images would result in a large increase in filesize with negligible gain in quality. In contrast, when storing images that contain text, line art, or graphics – images with sharp transitions and large areas of solid color – the PNG format can compress image data more than JPEG can. Additionally, PNG is lossless, while JPEG produces noticeable visual artifacts around high-contrast areas. Where an image contains both sharp transitions and photographic parts, a choice must be made between the two effects. JPEG does not support transparency.

Because JPEG uses lossy compression, it also suffers from generation loss, where repeatedly encoding and decoding an image progressively loses information and degrades the image. Because PNG is lossless, it is suitable for storing images to be edited. While PNG is reasonably efficient when compressing photographic images, there are lossless compression formats designed specifically for photographic images, however these formats are either not widely supported, or are proprietary. An image can be stored losslessly and converted to JPEG format only for distribution, so that there is no generation loss.

The PNG specification does not include a standard for embedding Exif image data from sources such as digital cameras. Instead, PNG has various dedicated ancillary chunks for storing the metadata that other file formats (such as JPEG) would typically store in Exif format.

Which to choose

There are a few pointers when saving for the web, and these are increasingly pertinent now that we need to consider 3G and 4G network bandwidth and high-resolution imagery for display on Hi-DPI screens like Apple’s Retina and Samsung’s Super AMOLED screens.

Our Fabrik image processing technology is very good at taking your imagery and displaying the right size for whatever device your work is being viewed on, but we won’t change the format of your imagery, so you should be mindful when saving your imagery and choose for the format that gives you the best compromise between the quality of the image and the file size.

JPG at 10% quality, JPG at 90% quality and 24-bit PNG

For film or digital photographic images, including portraits, film stills, landscapes and abstracts, JPG is best.

JPG at 10% quality, JPG at 90% quality and 24-bit PNG

For logos or images with blocks of flat colour or pure gradients, images using effects such as drop shadows or glows, charts or graphs, cartoons and illustrative imagery or any sort of image which also require transparency, choose 24-bit PNG.

Be careful of the humble screengrab. Many of our clients tend to screengrab stills from their video files and add them to their projects as supporting imagery. If you take a screenshot of your computer it will probably be a PNG file. If you can, open this PNG in an application like PhotoShop and use the Save For Web output to convert it to JPG. To give you an idea of why - you can load roughly ten high quality JPG files using the same bandwidth as one PNG file - think of your poor audience while they sit there waiting to view your project images. It could mean the difference between someone choosing your work or getting frustrated and moving on.