There are so many image file formats, how do you know which one to use?
Online, you are limited to just a few, which makes choosing a file format much easier. Today’s article will focus on, and demystify, the three types that are ideal for both your website and social media: JPEGs, PNGs and GIFs.
The flowchart will help you quickly and easily choose the right format every time.
WHY DOES IT MATTER WHAT FILE TYPE YOU USE?
Where will the image live and what type of image is it? Your end use and image type will determine the file format you choose. Your small business images will either be for use online or in print, in the form of a photograph or a graphic.
Screens need speed, print needs depth and detail.
Remember the olden days of dial-up Internet? Then, you’ll remember sitting watching images download, literally bit by bit. Today, if someone arrived at your website and that happened, they’d be gone in seconds!
Online images need to download almost instantly. This means small file sizes (<100kb for blog images, where possible) and low resolution (usually 72 pixels/inch). Even the large flowchart image below comes in at just 101kb.
Some images need transparent areas, most don’t.
Your logo is a perfect example. It needs to have a transparent background as it’s often placed on top of another image, for example your company leaflet or catalogue. Not all formats allow for this.
Although GIFs do allow for transparency, PNG are a modern alternative and ideal for your logo as they give you transparency, quality and a reasonable file size.
Photographs use millions of colours, graphics don’t.
You don’t want this need for colours to end up producing a huge file size. You still need speed. You need a format that allows for a beautiful colour range while still keeping the file size small.
With photos, it's a balance between size and quality. Aim to get your image as small as you can in terms of resolution and file size, while maintaining a good-enough quality to get the job done.
JPEG is the preferred format for photos and you'll be used to this if you use a digital camera. The way a jpeg does this is by removing bits of the photo. It’s cleverly done, our brains barely notice the difference, and it produces a much smaller file.
This form of compression is know as lossy - i.e. the compression is achieved by losing detail in the photo.
Text images and line drawings need a small file size too, but not at the expense of detail and clarity. A reduction in quality is not as easy to ‘hide’ as it is on a photograph.
This might mean ending up with a larger file size to allow for quality. If you are looking for quality plus compression, then look at a png file.
This form of compression is know as lossless - i.e. the compression doesn’t result in a loss of detail in the image.
WHAT ARE THREE BEST FILE FORMATS FOR USE ONLINE?
JPEG or JPG
Stands for: Joint Photographic Experts Group
Transparency: no (use png)
Print: yes (use high resolution 300 dpi)
Web: yes (use low resolution 72 ppi)
Text: no (png better)
Graphics: no (png better)
Stands for: Portable Network Graphic
Print: no (use jpeg or pdf)
Photos: yes (jpeg better)
Pronounced: jiff (soft g)
Stands for: Graphic Interchange Format
Text: yes (png better)
CHOOSING THE PERFECT IMAGE FORMAT - FLOWCHART
Not sure which format to use? Work your way down the flowchart to find the perfect format.
OTHER IMAGE FILE FORMATS
JPEGs, PNGs and GIFs will cover your online needs.
You may, however, come across other image format types while working with designers, printers or when buying stock images.
There are a lot of image formats available. All of these file types will require exporting/conversion before they can be used online, that is, saved as a jpeg, png, or gif. Common file types include:
TIFFs and BMPs
Huge files used by the design and photographic community. Because of their large file size, there is a lot of data to work with and their print quality is exceptional.
Again huge, data-rich files produced by digital SLR cameras and favoured by professional photographers. If you are planning to take your own small-business photos, I would recommend learning to work with RAW files.
PSD or AI
Produced by Adobe Photoshop and Illustrator. Allows for layering of data, repeat editing and exporting in multiple formats. I won't wax lyrical here about the benefits of Adobe files, let's just say they're brilliant and leave it at that!
I hope that's helped demystify the world of image file formats. For your online presence, you really only need to focus on JPEGs or PNGs and then look at GIFs if you are interested in animation.