Are you confident that you know when you should use a specific type of image format?
Within FMS teaching and research there is a great demand for clear and detailed images – this could be for purposes such as sharing diagnostic images or microscope views in high clarity, photographs of real cases and examples, or designing something eye-catching to promote your initiative. The detailed guide below explains the types of image formats you may find useful for different purposes.
There are several image formats that you are likely to come across, but what you may not know is that they can be separated into two ‘families’. This guide will help you understand the characteristics of each format, and which situation lends itself best to each.
Before we go into the details of each specific format, let’s talk about the two key families. These are VECTOR images and RASTER images, and while at certain sizes they could look almost exactly the same, their construction is fundamentally different.
Vector Images
Vector graphics are based on mathematical formulas that define geometric shapes such as polygons, lines, curves, circles and rectangles. Because vector graphics are composed of geometric constructions, they are best used to represent more structured images such as icons, line-art graphics and illustrations with flat uniform colours.
File extensions EPS, AI and SVG are examples of this type and are perfect for creating graphics that require frequent resizing such as logos and icons.
Vector-based images are much more versatile than raster-based images, with their most obvious advantage being that vector images are infinitely scalable. This means that the same image could be printed out the with the same clarity at both advertising billboard and postage stamp size. Another advantage is that as they are images that you create from scratch (as opposed to photographic images) they have a transparent background to them by default. If you need a white or coloured background in your file you can simply add a coloured box under your artwork.
Vectors do have a few limitations, such as not handling effects such as blurs, and poor handling of gradients.
Raster Images
Also known as Bitmap images, Raster images are composed of individually coloured square pixels which build up the complete image. As an example – all photographic images are captured as raster images, with TIF, JPG, PNG, and GIF all being examples of raster image file extensions.
Pixels have a defined proportion based on their resolution (high or low), and when the pixels are stretched to fill space they were not originally intended to fit, they become distorted, resulting in blurry or unclear images. When you resize raster images by scaling up you will be compromising their resolution, as a result, it is important to remember to save raster files at your required dimensions. Once you make a source image smaller than its original size there is no going back – unlike vector images!
A note about ‘Resolution’ and ‘Effective Resolution’
Image resolution for raster images is measured in DPI (dots per inch) and this refers to the density of pixels in an image. Websites display images at 72dpi which is a relatively low resolution. By contrast, images that will be used for printing are required to be no less than 300dpi at the size they will be printed.
You can’t just take an image and scale it up dramatically, as it would stretch out and lose quality, as the dots per inch would effectively have been lowered, i.e. the ‘effective resolution’ would be lower.
What is compression and why does it matter?
When you save an image, some files need to be ‘compressed’ to keep file sizes down, as the files themselves would be far too large if this didn’t happen. Some formats are ‘lossy’ and some are ‘lossless’. If image compression is lossy, this means that every time you make an amendment and save, you may lose some quality, sharpness or colour data. The quality of the image decreases in proportion to file size.
Here are details of some of the most common file types you’re likely to encounter:
Raster File Formats
1. JPEG – Joint Photographic Experts Group
JPEGs are an extremely common image file type and as a result they can be used both on websites and in most desktop applications. It is a lossy file format.
Your file may have either the .JPG or the .JPEG extension, don’t worry it’s exactly the same type of file, and the .JPG extension is the most commonly used.
Note: This type of image does not support an alpha channel, therefore can’t have a transparent background.
2. TIF (or TIFF) – Tagged Image File
Mainly used in the print industry, these files tend to be very large high-quality photographic images that feature “lossless compression” meaning the original image data is maintained regardless of how often you might copy, re-save, or compress the original file.
If you have access to Adobe Photoshop, then you have the ability to retain a layering structure within the file. This means that if you put a text layer at the top, you could then move that text around without being destructive to the layer below. The same is true for a native Photoshop file.
Note: Due to the low compression and high file sizes, this type of image should not be used online as it will take forever to load!
3. PNG – Portable Network Graphics
PNG’s are probably the second most common image type after JPGs. They offer lossless compression, so don’t lose quality when resaving or editing, resulting in a sharper image.
If you are preparing an image for a website then this format will probably be your best option as it allows for everything a JPG does but with a much sharper image. It can also handle transparency, enabling the use of a transparent background which is great for placing logos on to images, for example. These are not suitable for professional print purposes though, and are usually of a lower resolution for use online.
When saving these images in Photoshop you can choose between an 8 Bit, 16 Bit, or 32 Bit colour palette however this will be reflected in file size.
4. GIF – Graphics Interchange Format
There was a time when these and JPGs were pretty much the only image formats that you needed to know about however times have changed.
In their standard form GIFs are a pixelated image made up of a colour palette of up to 256 colours. Due to the limited number of colours, the file size is drastically reduced.
An example where these may be used could be some navigational icons on a site or app that require a quick load time.
The rise of social medial has contributed to the use of Animated GIFs, which are essentially a series of frames embedded within the GIF file. This can give an almost video like impression and typically only last a few seconds.
Vector File Formats
5. EPS – Encapsulated Postscript
An EPS file is a vector format that has been designed to produce high-resolution graphics for print. Almost any kind of design software can create/open an EPS.
The EPS extension is a universal file type that can be used to open vector-based artwork in almost any design editor, not just the more common Adobe products.
This safeguards file transfers to designers that may be using different software.
6. SVG – Scalable Vector Graphics
Although all vector graphics are scalable, the SVG file type is specifically named Scalable Vector Graphics because this format can be easily used online with newer technology and higher screen resolutions being introduced.
An SVG file would ensure that the quality of the image is not compromised no matter what device it is viewed on. This could be particularly appropriate for a logo or statistical chart. However, this image format is not intended for professional print purposes.
Note: SVGs can also be used in SVG animations.
7. AI – Adobe Illustrator Document
Adobe Illustrator is used for creating and editing images, rather than for sharing or uploading. Adobe Illustrator documents are the preferred vector graphics format used by designers for creating images for use in all types of projects from web to print.
Adobe Illustrator is the industry standard for creating vector artwork from scratch. It can also be used to export to pretty much any other file type.
Note: Think of these as being the “Source” file. Access to Adobe Creative Cloud is required to open this type of file.
It can be pretty complicated to fully understand the different image characteristics, much more so than it seems at first glance, but this brief guide has provided a better understanding of the standard file types and which are most appropriate for your project.
Conclusion
- PNGs are very useful for most purposes – they are not lossy, and you can have a transparent background for easy integration to any document.
- GIFs can be animated, and can also handle transparency.
- Resolution is only relevant to raster images.
- Vector images can be scaled up and down infinitely without loss of quality, which is great for logos, graphs and charts.