In this blog post we will look at what file formats can save images with a transparent background. You may want to make the background transparent behind an object in the image, so you can add in an alternative background image, this is known as composition. Selecting the best file format can make a difference to how well the new background image combines with the object in the original image. Let’s explore the differences.
Above is the original image I will be working with.
Selecting
In the image above I have selected the duck. The selection is represented by the dashed line.
To hide the background and make it transparent I have clicked on the Add layer mask icon at the bottom of the layers panel (shown above in red).
Great, the background is now transparent (see through), which is represented by the checkerboard effect.
Anti-aliasing
Anti-aliasing is a method of smoothing the edge of a selection by softening the colour transition between the colours in the image (the duck) and colours in the background. For the duck image, this process has added different levels of transparency to the pixels along the edge of the duck.
To demonstrate this clearly, I have zoomed into the image (see above). Some of the yellow/orange pixels along the edge are semi-transparent, which is indicated by the checkered effect and hint of some of the colour.
Selecting a format
When it comes to file formats, there are lots – too many to mention here. We are going to concentrate on the file formats: JPEG, GIF, PNG-8 and PNG-24.
To be able to choose these formats and compare the differences I went to File > Save for web
JPEG
The first file format I will choose is JPEG from the drop down menu in the top right corner. As the JPEG format does not support transparency the background is filled in with white again, which is no good. What is good about the JPEG format is that it supports up to 16.7 million colours, which is all the colours you need to display a photographic image accurately.
GIF
Next GIF. The GIF file format does support transparency so the background will remain transparent.
Above I have zoomed into the beak of the duck. When comparing the GIF image on the right (above), with the original image on the left (above), I can see that the quality isn’t the same, it’s more jagged. Although, there are ways of improving the edge quality, the reason that the quality isn’t the same is because the GIF format doesn’t support full transparency, so the semi-transparent pixels along the edge can’t be produced correctly. The GIF format can only display 256 colours, while most photographs may need up to 16.7 million colours to accurately reproduce the image. Looking at the beak I can see that the colours aren’t the same as in the original image, so the limitation of 256 colours has degraded the image quality.
PNG-8
The PNG-8 file format does support transparency so the background will remain transparent.
The PNG-8 format is very similar to the GIF format, in that it doesn’t support full transparency so the semi-transparent edges aren’t displayed correctly. It also only supports 256 colours, which again might mean that all the colours in the image aren’t accurately displayed.
PNG-24
The PNG-24 file format does support transparency so the background will remain transparent.
The PNG-24 supports full transparency, which means that the semi-transparent pixels along the edge are preserved – just like the original (see image above). In addition, it also supports 16.7 million colours so it colours in the image will be like the original. It seems the perfect file format hey!
So what’s best?
Well, it depends what you want. If you do need a transparent background you will need to choose GIF, PNG-8 or PNG-24. If you want to ensure that the edge of the image (selection) looks good then you will probably be thinking about using the PNG-24 format as it supports full transparency. The PNG-24 format also supports 16.7 million colours so the colours will look the same as in the original image. But unfortunately the disadvantage of the PNG-24 format is file size – it is usually the largest and there is no controls to adjust the compression. Below is the difference in file size for this duck example:
JPEG = 474.3KB
GIF = 380KB
PNG-8 = 355.5KB – smallest
PNG-24 = 1.44MB – biggest
When compressing to the JPEG, GIF and PNG-8 format there are ways of changing the compression so it could be possible to reduce the file size even more, but that would reduce the quality.
In this post I have concentrated on the differences between the formats. When exporting out to JPEG, GIF and PNG-8 formats, using the method explained above. There are numerous methods for tweaking the quality of the image and compression, so experiment with the controls provided.
So the choice of file formats comes with compromises. Decide what is most important to you and choose the file format that best supports what you consider important.
The post Keeping it transparent in Photoshop appeared first on Academy Class Blog.