At Hubnest, we are often provided with graphic files for projects which come in various formats: PDF, PNG, JPEG, PSD, GIF etc. As a general requirement, we request PNGs without alpha (transparency) channels and PSD. This article is created to outline the differences in file formats to help designers understand the importance of providing developers with file formats that will make their job easier.

JPEGs

The main reason why JPEGs are widely used for photographs is the reduction in image size by reducing quality. When an image is JPEG compressed, fuzzy edges and tinted color pixels can be visible around the edges. Although this is not easily visible in photographs, these artifacts stand out in text or solid color backgrounds.

Each time a JPEG file is saved, information is lost and new artifacts appear. This is why JPEG files are used for photos on the website, instead of sending the design to developers in its’ entirety.

PDFs doesn’t lock down pixel dimensions

The main problem with sending PDF files to developers is that PDFs don’t lock down pixel dimensions. Although PDF files make great guides for developers through added comments, they should not be used as the only files provided. When a 500px by 500px square block is opened in a PDF file at 100% view, the measured size is not actually 500×500.

Developers do have a choice though, they can open these files in editors such as Adobe Illustrator and try to extract PNG files out of it, but it creates an unnecessary extra step. A lot of developers may not be familiar with graphic editors either.

GIFs

The primary reason why GIFs were widely used is because this format supports binary transparency. Unfortunately, GIF files only have 256 colors and the export to GIF function in Adobe products yields substandard quality. For development, we now create GIF masks by hand.

For certain images, 256 colours is enough, but the reason why we don’t work with 8-bit color channels is because 256 is no longer enough when the image is bi-cubically resampled:

PNGs

PNGs is the ideal format for developers to receive graphics (along with PSDs), however, they are often provided with Transparency Channels. The only time a developer needs to have a PNG transparency is when the background of an image changes on the website. Majority of logos/banners/images do not fall into this category and transparency is often created unnecessarily. Additionally, transparency needs to be carefully created in order to work with older versions of Internet Explorer.

When transparency is indeed enabled in a PNG file, we ask that the alpha channel contains a reasonable binary transparency boundary:

The first mask in the above diagram is strictly binary. The edge of the image does not blend well into the background. The second mask has blurred edges but without a clear binary boundary. As a result, the image looks nice only in browsers that support alpha transparency. The second last image shows what it looks like in older versions of Internet Explorer. The ideal mask should have a thin blurred line that well defines the binary boundary. The result image looks nice on all browsers. (Use TinyPNG to preserve the binary transparency layers).

PSD and AI

PSDs and AI files contain additional layers and can be used by developers to extract the needed graphics directly. When the files are well organized, this generally does not pose any issues, however, it is always preferred for graphic designers to provide all the necessary graphics ahead of time.

We normally request for PSD and AI files to be provided prior to starting development.