Image Optimization 101: Print and Web

reach us now
PREVIOUS NEXT

Image Optimization for print vs web

 

Both digital and print marketing are an integral part of most businesses. Creating visuals are significant to any brand’s strategy and image optimization is something you want to nail down. If your company solely operates and markets online, you want to master image optimization for the web and if you’re constantly promoting your business through physical mediums, you’ll want to focus on image optimization for print. Because after all, your visuals are the building blocks to your sales success.

 If you’ve dealt with some sort of marketing, you know there are a variety of platforms that utilize images. Whether you’re emailing, posting on a website, or printing, you’re almost always using some sort of visual. It’s important that your images are optimized for the specific platform you choose to use. In addition, on the web image optimization can…

  • Help with your page’s loading speed
  • Require less storage space
  • Use less bandwidth
  • Help rank in SEO
  • Improve user experience

But where do you even begin?

JPG, GIF, PNG, TIF, PSD, CMYK, RGB. Whew! So many acronyms, enough to sink you. Somebody, please throw me a life preserver!

The world of image optimization for both print and web design can be a rather confusing one. But a little imagination can go a long way and help a great deal. Let’s think of images as a pool – with web images being the shallow end and print images, the deep end. Same water, BIG differences. So let’s wade in.

Image optimization for the web

We’re at the shallow end first. Web images, remember?

File Types for web images

When creating your file, JPGs or JPEGs (same thing) will be your best solution. They provide the best quality for the smallest file size overall and are the most common as well. It’s the preferred format for most images to be displayed on any screen including your desktop, tablet, or phone.

PNGs are a good alternative to JPEGs. They actually have a higher image quality but consequently also have a larger file size. They’re great for saving vector images like logos and graphics and are widely used over JPEGs when a transparent background is needed.

And then there are GIFs. We’ve commonly come to know them as files that display animations. They’re mostly used for decorative images or thumbnails and should never be used for large images.

Color for web images

There are two modes of color when it comes to images – one for print, and one for the web.

In web design, the RGB mode is used – a three-color mode utilizing Red, Green, and Blue. That means all of the images displayed on a screen are created with dots of red, green, and blue light.

Resolution for web images

If you know a thing or two about an image’s minimum resolution, you probably just thought of DPI. But hold that thought, because it has nothing to do with the web. When we’re talking about digital images, we use PPI, or pixels per inch. Most photo-editing software, such as Photoshop and Adobe Lightroom typically use PPI to measure an image’s resolution.

72 is the minimum recommended PPI but it’s probably best to go with something slightly higher. Just remember to keep the resolution between 72 and 120 for best results. And keep in mind, the higher the resolution, the larger your file size will be.

Image optimization for print

Now let’s paddle over to the deep end of the pool for print images.

File Types for print images

Print images need to be much larger than anything you’d use on the web. They’re usually saved as either PSD or TIFF files. These help retain as much data as possible without too much compression.

While both formats produce high-quality images, TIFF is usually the standard for most print images. Whether you choose PSD or TIFF, you’ll most likely end up with large file sizes.

They’re saved in CMYK mode (instead of RGB for web) as that’s what is needed for printing presses. We’ll get to what CMYK is in a bit.

Color for print images

Remember RGB? That’s the color mode we use for digital marketing. But for print, you’ll want to choose CMYK – cyan, magenta, yellow, and key (black). That’s the color space utilized by printers.

Resolution for web images

Print is when you’ll want to focus on DPI, or dots per inch.

When you’re dealing with all things print and physical, the printer needs to know how many dots of ink to produce in an inch for your specific image. The more dots there are, the higher the quality of an image. More dots placed closer together will produce a sharper and more detailed image. Makes sense, right?

300 is the recommended minimum DPI. If you’re printing an image and the resolution is less than 300, it will most likely appear low-quality.

Other good practices when dealing with image optimization for print

Slightly over-sharpen your images to help compensate for a process called half-toning. This is something most printers do that ends up having a softening effect on your images. This is actually necessary because printers are unable to print in a continuous tone. So images have to be converted to dots.

Always specify your bleeds. So you’ve got a document that has elements or images that extend beyond your trim edge and touch the edge of the page. This is known as a bleed. Designing with bleeds requires printing on a larger sheet of paper, which may be more expensive depending on the trim size of your project.

Remembering to include bleed when making your final file is extremely important. Neglecting this detail can hold your project up and cost time and money to fix.

Conclusion

Whether you’re working on images designed for the web, or those going for print, you need to pay attention to image optimization techniques. If you ensure you’re working with the correct color, resolution, and file types, you’ll produce crisp, sharp, high-quality images over and over.

But skip the techniques and your visitors will complain of slow loading speeds, bad quality images, and an overall poor look of your company.

Don’t let your business be second to the competition just because you haven’t properly optimized your images.

File Types Overview:

JPEG:

  • Most common file type
  • Lossy Compression
  • Great for still images, artwork, and photographs
  • Can display millions of colors

PNG:

  • Best for transparency
  • Lossless Compression
  • Allows for more efficient editing; layers can individually be edited
  • Does not support animations
  • Great for icons
  • PNG-8 displays maximum of 256 colors
  • PNG-24 displays millions of colors

GIF:

  • Great for simple animations
  • Lossless Compression
  • Supports transparency
  • Not great for graphics with gradients
  • Displays a maximum of 256 colors

TIFF:

  • Extremely high image quality
  • Best for photography and high quality print graphics
  • Lossless Compression
  • Great for scanning originals without compromising quality
  • Large file size

PSD:

  • Fully editable file
  • Can support many different pictures, texts, objects and filters within one file
  • Lossless compression
  • Great for vector files
  • Supports transparency
  • Large file size

SVG:

  • Scalable, great for responsive design
  • Vector file
  • Allows animation
by:

Margaret Foster


May 4, 2020

Subscribe to our newsletter

Get all our latest content for Interactive delivered to your inbox each month.

Ready to learn more about Interactive?

Let's Talk

Get Started Here