JPG, EPS, PNG, GIF, TIFF, SVG... the list goes on. But which of these should I use for my web page or my printed brochure?
It’s important to understand the difference between vector images and images that are made up of pixels (aka bitmap images). Vector images contain data which describes the objects in a mathematical form - their shape, size, colour and position (as well as other data such as transparency, line weight etc.). Bitmap images are made up of many thousands of tiny square dots called pixels each capable of being any colour.
Bitmap vs Vector
For The Web
Historically, JPGs and GIFs were the choice you had when publishing to the internet - JPGs with the RGB colorspace and GIFs with the more limited 256 colours but having the benefit of a transparent channel and the ability to animate.
More recently PNGs and SVGs have made a grand entrance and transforming the ability of graphics on the net. PNGs (Portable Network Graphics) because they can contain the full RGB colourspace, lossless compression and they have that magic transparent channel - very useful when placing over the top of coloured backgrounds. These can be created in Photoshop and many other bitmap editing applications.
SVGs are, as their name suggests, Scalable Vector Graphics. Their file size is relatively small but have big aspirations - they can scale up as large as you want AND they retain the pin-sharp quality which is essential for today’s Retina and OLED displays. Unfortunately, they are not a suitable format for photographs. But they are suitable for illustrations, logos, typography and other non photographic graphics. They can be created in Adobe Illustrator and other vector graphic applications.
Scalable Vector Graphic - bask in its pin-sharp beauty :-)
Resolution for the Internet
The resolution of an image is very important when publishing to the web. The longer it takes download a page to the browser the more likely you’ll lose the reader to another site thus increasing your bounce rate*. So, it’s a compromise between high quality and small file size - unfortunately, you can’t have both! Retina and OLED screens display roughly double the resolution of ‘ordinary’ ones. Therefore, we need to produce graphics which are at least double the resolution.
600 x 350 px for a ordinary display.
1200 x 700 px for a Retina or OLED display.
Do take care though - JPGs, PNGs and GIFs at these higher resolutions can be very bulky to download for mobile users if not sufficiently optimised. If the image contains graphical content, you might try exporting from Adobe Illustrator as an SVG as these are often tiny (kB) and can scale up to any size with no loss in quality. Marvellous!
For Traditional Publications and Printing
EPS & TIFF are still very much alive and kicking in the publishing world but thanks to Adobe normalising their software packages they have succeeded in adding a few more acronyms to the image import menu. Native PSDs and AIs can be imported directly into InDesign along with the old faves, EPS and TIFF. EPS files can contain either vector graphic information or bitmap image information depending which software you use to produce them. Adobe Illustrator for vector EPS. Photoshop for bitmap EPS. It is important to note that Adobe illustrator has the ability to import bitmap graphics thus limiting the scalablity of the AI or EPS. Also, Photoshop PSDs can contain vector graphic elements which makes them not only better quality but small in file size.
Using EPS as your preferred format for print images has its advantages:
- You can apply JPG compression to the image thus reducing file size massively with no discernible difference in quality from the non-compressed version.
- You can choose between a JPG or TIFF previews depending on your preference.
- They have bullet-proof reliability when it comes to ripping for producing print-ready PDFs.
Resolution for Printing
Resolution for print hasn’t changed over the years. 300dpi at the actual print size is de rigeur for litho and occasionally 200dpi for newspapers (depending on the newspaper). When it comes to vector images, the resolution can be ignored however, the colorspace should be CMYK.
I have already explained many of the differences, advantages and disadvantages of using RGB and CMYK images. Please see my previous blog post: ‘A Colour Conundrum’
*The bounce rate is when a web page is visited and the user does not interact with the page before moving on to another page or website.
Main image: The vaulted ceiling of Lancing College Chapel, West Sussex. I chose a JPG for a small file size. I could have chosen a PNG (better quality but a bigger file). All images © JP Rowe.