Everything You Need To know About Image Formats and File Types (Part 1)

There are so many file formats that images can be saved as that sometimes it’s hard to keep track of which option is best to use at a specific point during your design and development process. Also, for new users that are just starting out in the greater visual design or web communications industry, image formats can be quite a blunder to get your head around especially in the beginning.

There are a series of loose conventions relating to each of the predominant image formats – use JPEGs predominantly, use PNGs for images without backgrounds, use GIFs to create low-quality motion stills, and make use of SVGs for logos and other brand assets. This blog post aims to describe why each of these formats will be best to use during particular instances, and also to help you discern when to use which file type.

At present, there are a series of image formats that are used in both design and development. EPS, TIFF, RAW among others are used during the design or creation phase. There are a number of other formats used for web display, but at present, the most common and widely used, browser-safe formats are JPEG, PNG and GIF, as well as SVG.

Forming part of a 2-part series, this blog post intends to explain a series of fundamental image principles and will be followed up by a secondary post that details each of the popular image formats (used in both the design and development phase).

If you’ve ever wondered about image conventions – why they format the way they do, why their extensions are so aptly named or what ‘image compression’ is – then keep reading. Also, don’t forget to read through our second article in this series which describes the image types individually and offers you with a cheat guide for when to use which format.

Imagery plays an absolutely vital part of a web presence. Used correctly, visual stimuli can communicate a brand identity or offering almost instantaneously. Selecting images for a web presence must be done so with extreme care, as factors such as file size, page load and site speed all have to be kept in mind, as well as the actual aesthetic of the image, what it communicates and how it performs across devices of varying screen sizes.

Adding to this already layered process, the rise of higher screen resolutions (such as retina display screens) see web designers and developers having to pay even more attention to their image properties than ever. A high-resolution image needs to be able to display optimally on a high-resolution screen, and with this, there is a higher demand for on-screen clarity.

Keeping all of this in mind, it’s really, really important to keep abreast of the various image formats (both the editable and raw files in design, as well as the exported, web-ready files).

To best understand the end process of displaying an image on the web, it’s good to start at the very beginning: with a blank, fresh artboard in the initial design stage where the OG image forms (raster and vector) are created.

A raster image (also referred to as a bitmap image) is made up of a series of tiny pixels (individual dots or squares). Each pixel (short for ‘picture element’) is assigned a color property and when viewed as a collection, come together to form a whole image. When heavily magnifying a raster image, the image would pixelate, exposing the makeup of individual squares or pixels. To the naked eye, this would present as a blurry or unclear image, particularly jagged around the edges.

A vector image is comprised of a series of mathematical properties, created through the use of points/nodes, paths and curves. Unlike raster or bitmap images, vectors are scalable, and can be scaled to extreme levels of magnification without the loss of any quality to the image: fine lines and crisp details will be preserved perfectly. If the image is downscaled too much, there might be a slight loss of detail, while if the image is upscaled too much, small errors in design might become visible. Loosely described, images created by using graphic design applications such as Adobe Illustrator or similar would be in vector format. These can be exported as SVGs, but more on that during the second blog post.

In their raw and editable state, raster and vector images are commonly created through graphic design applications, the most popular of which are Adobe Photoshop and Illustrator. Where, raster images are typically used to depict lifelike images (such as photographs), vectors are used to create somewhat abstract images such as 2D and sometimes 3D logos or illustrations.

In their open and editable states, the .psd (Photoshop) and .ai (Illustrator) files will be rejected from application in web display, and will need to be formatted into a web friendly format.

As the web is only geared to handle a number of image formats, only a select of these are 100% suitable for all modern web browsers. At present, the universally accepted, browser friendly images are GIF, PNG, JPEG for raster images and SVGs for vector images.

SVGs are pretty easy to understand and will be discussed in detail in the following blog post, but raster images, and understanding which is the best format for them, involves a few more complex areas of understanding.

Raster images (typically saved as either a GIF, PNG or JPEG) are made up of grid structures that are comprised of a series of pixels. Each pixel contains an RGBA (red, green, blue and alpha channel for transparency) color property that allows the individual pixel to add to ‘the bigger picture’. By selecting one of the available image formats, raster image files run through a series of data compression algorithms to produce a smaller file size. Essentially, image compression makes a trade-off between the perceived level of image quality (sacrificing minuscule differences in color values of nearby pixels) to optimize on file size.

This leads us to the next question: What are the different data compression algorithms and how do they affect my image properties and file types?

Right, let’s get stuck in. There are two different forms of data compression used for optimizing imagery: lossless and lossy.

Lossless Compression is a data compression technique used to ensure that the original data is perfectly preserved, just compressed (i.e. when you zip a series of files, the original content is still intact, just made smaller and more manageable). The same applies with imagery. When compressing an image using a lossless algorithm, the image itself is made smaller, but the decrease in file size has no negative effect on the overall quality of the image and is merely compressing the pixel data.

Lossy Compression is a data compression technique that eliminates portions of data from the original content. When compressing an image, lossy compression makes an approximation of the original content and eliminates some pixel data: as the image file size is decreased, the overall quality and crispness of the image will decrease.

The best example of a lossy image save appears when exporting a JPEG image through Photoshop. Here, a slider will allow you to set the level of image quality on a scale. The higher the image quality, the lower the level of image compression and so the higher the file size, and vice versa. This scale can be adjusted to find the best trade-off between aesthetic quality and file size. As the human eye is less sensitive to changes in color properties, decreasing the quality of a JPEG to eliminate some pixel data won’t sacrifice too much from the overall appearance of an image.

One final point regarding lossy compression is that if an image is repeatedly saved in a lossy format, each continuous save would see the image quality decrease over and over again.

Between lossy and lossless compressions for images, it’s worth noting that some forms of image compressions will strictly make use of either compression technique, while others will make use of both techniques, and in different orders. These algorithms run as soon as you select your desired format to save your image as, and essentially, the difference in selected image format or saved file type is pretty much dependent on the combinations of the algorithm used to compress images.

So, what does this mean for your web development? Well, choosing the right image file format actually depends on what you’re aiming to achieve with the image.

• Is the image a logo?
• Does the image need to animate?
• Does the image need to take up a full-screen section?

These and other questions are answered within the second instalment of this article series – Everything You Need To know About Image Formats and File Types (Part 2) – where we cover the various forms of image types during both the initial design stage, as well as during the various types of image forms that can be used for displaying on the web.

We hope you’ve enjoyed reading this blog post. Don’t forget to read the second article in this series where we describe image formats in detail.

If you have any comments or queries, please feel free to share them below. We love hearing your feedback!

Thanks for reading!