Is the logo in your campaign brochure unusually blurry?
Does your website miraculously shed 10 MB in page size when all the images are removed?
If either of those sound familiar to you, you’ve probably mixed up your print and web images.
Everyone’s done it at some point. If you can’t track down the original files for your product’s photoshoot, it can be tempting to just pull them straight off your business’ website and call it a day. If the image is exceptionally large and you’re dropping it onto paper the size of a business card, you might even get away with it. But there are optimal image sizes for every use. Sure you can try using one image for everything, but it’s like using a spork — you’re not getting the best of either world.
(I love sporks! They’re great for lightweight camping, especially the titanium ones. But if I had to use one everyday, I’d spork my eyes out.)
So what’s the difference between web and print images?
Difference #1: Various File Formats
The most noticeable difference, by far, is the file formats available. Everyone knows JPG; it’s that reliable friend you can call for help and be reasonably sure they’re showered, dressed, and don’t smell like ten weeks worth of Kraft Dinner. It’s good on the web, and at high enough resolutions is a great option for print as well! But JPG isn’t always the best solution, and it’s far from the only one available. To get the best mileage out of your images, you’re going to want them in the format that makes the most sense.
Some formats that work great for print:
- JPG – the high-resolution version
- EPS
- TIFF
Formats that are better for web:
- JPG – the low to medium resolution version
- PNG
- GIF
- SVG
- Next-Gen Image Formats, like Webp
Difference #2: Colour Modes
The second difference between web and print images is the colour mode used for each. This is due to how electronic devices and prints each have their own way of mixing up colours to create what we want to see. On the web, you’ll want to use images with the RGB colour mode. For print, you’ll need CYMK for the best results. It’s not that the images won’t show up or anything if you use the wrong colour mode. But if you’re following a specific brand, your colours won’t come out exactly the way you intended.
Difference #3: Image Resolution
The third difference is arguably the most important: image resolution. For print images, you’ll want the highest, crispest resolution you can get. 300 DPI (dots per inch) is the industry standard. Meanwhile for web, the industry standard is 72 PPI (points per inch), but this matters less compared to how heavy your image is — how many kilobytes (or megabytes!) the user’s device needs to download to display that image. Heavier images need more data to download. They also take longer, especially for users on mobile connections. Don’t forget: the longer a user has to wait for your website to load, the more likely they are to just hit that back button and leave. Not only will that high-resolution, print-ready image be wasted on a small phone screen, your users won’t even stick around to see it!
There’s no hard rule on what file size you should aim for. We like to bring it down below 200KB whenever possible. You might have to fiddle around with export quality in something like Photoshop to see how low you can bring your image size without seeing a difference in the image itself.
The TLDR: you want the hunkiest, heaviest image you can get your hands on for your business’s printed brochure of premium, ethically-sourced dog biscuits. But when it comes to your website, you want the skinniest version you can possibly get before the dog biscuits start looking more like pixelly potatoes.
