Pixelated & Confused: Why you shouldn’t use web images for print (or vice versa)

By Julie

Pixelated & Confused: Why you shouldn’t use web images for print (or vice versa)

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
  • PDF
  • 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.

Low-resolution on the web <---> Low-resolution printed

The other conundrum: vector vs raster

We’re going to go back to file formats for a second, because not all of those formats listed above are equal: some are raster formats, while others are vector.

All that means is that some images are created by dropping millions of teeny colour dots on a surface until an image is formed (raster), and others are drawn by mathematical formulas that always show clean, crisp lines no matter how big they are scaled (vector).

You’re not going to be able to use vector formats for everything, so there’s no point in asking your photographer to send you photoshoot images in SVG. All you’ll do is drive them to drink. But where you can use vector images — and where there’s huge savings in file size to be made — you should take advantage as much as possible! Think of your business’ logo, icons, outlined text… these are all amazing places to swap out your pixel-dependent JPG for an EPS or SVG version.

Your designers won’t bother you for high-res images if you only give them vectors

What if I don’t have a vector logo?

If you’re working with an older logo, it’s possible you never received a vector version from the logo designer. Take a look at what you do have; if an AI or PDF is included in that list, you might be able to get SVG and EPS versions made from those for future uses. If not, and if you’re not able to reach the designer for source files, try looking on Fiverr for logo vectorization services. We can also help vectorize your existing logo, contact us. Contact us for logo and branding services!

Takeaway

At the end of the day, no one’s really going to stop you from dropping a full resolution JPG onto your website. But your users certainly won’t appreciate having to download 10MB of images every time they visit your website, and it’ll cost your business in the long run.

And slow page speeds make Google sad. You don’t want our mega-corporate overlords to be sad, do you?

About the author

I'm a designer and programmer with a can-do attitude and a song recommendation for every mood. Good design is like music: it moves people. If at first you don't succeed, try again with a different soundtrack.
Read more posts by Julie
Phone Icon
Call Us
Contact Icon
Contact
Contact us
Copy link