Both digital and print marketing are an integral part of most businesses. Creating visuals is significant to any brand’s strategy and image optimization is something you want to nail down. No matter what type of business you run, you should hire a graphic designer who knows the difference between web and print optimization for all your digital and direct marketing promotions. After all, your visuals are the building blocks to brand awareness and success.

Whether you’re emailing, publishing on a website, or printing, you’re almost always using some sort of visual branding. It’s important that your images are optimized for the specific platform you choose to use. In addition, there are multiple benefits to web image optimization:

• Increase your page’s loading speed
• Take up less storage space
• Use less bandwidth
• Help SEO ranking
• Improve the user experience

But where do you even begin?

JPG, GIF, PNG, TIF, PSD, CMYK, RGB. Whew! Enough acronyms 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 (Joint Photographic Experts Group) 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 (Portable Network Graphics) 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 (Graphics Interchange Format). 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.

{% video_player “embed_player” overrideable=False, type=’hsvideo2′, hide_playlist=True, viral_sharing=False, embed_button=False, autoplay=True, hidden_controls=False, loop=False, muted=False, full_width=False, width=’500′, height=’500′, player_id=’96648588808′, style=”, color=’006ea4′, play_button_color=’006ea4′ %}

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 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 the best results. 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 (Photoshop Document) or TIFF (Tag Image File Format) files. This helps 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.

Color for print images

Remember RGB? That’s the color mode we use for web optimization. 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.

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 necessary because printers are unable to print in a continuous tone which means images must 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 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 bleeds when making your final file is extremely important. Neglecting this detail can hold your project up and cost time and money to fix.

File types overview

JPEG:

• Most common type of file
• 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

Final thoughts

Whether you’re working on images designed for the web, or those going to print, you need to pay close attention to image optimization techniques. Hiring a professional graphic designer can ensure you’re working with the correct color, resolution, and file types. They’ll produce crisp, clear, high-quality images every single time.

If you decide to wing it and skip the techniques discussed in this blog your customers 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.