Digital Assets
Spring has sprung already, and most of us have already taken a mop and scrub brush to every nook and cranny in our homes. Spring Cleaning doesn’t JUST have to be about physical, tangible things however. We can just as easily apply the principle to our Digital Assets: the images and other digital media that help make our catalog stand apart from the rest. If we take an honest accounting of our Digital Assets, most of us will have photos that aren’t up to snuff for a variety of reasons. Maybe we didn’t take care of it earlier because we had time constraints due to a previous catalog project. Whatever the case may be, we are going to look at a variety of things that can go wrong with photos, or just hold them back from being the best they can be.
Wrong Image Format
Here’s a pretty common scenario:
Your Design Team requests the latest product photos to be used in the print catalog. You send them a Dropbox link to a bunch of JPG images. They email you back a day later saying the new images look terrible when positioned over any non-white area of the page, because the images themselves have white backgrounds. You realize you sent them the wrong files, because JPG can’t keep transparent backgrounds. You re-package the product images as TIF, which are high resolution and will keep the transparent backgrounds, and re-send. Everyone lives happily every after, just with a day or so of wasted time and effort.
Generally speaking, to determine what is the “right” image format, we first have to break down a List of photos we need to support:
1. Do I have a Web Catalog? – If so, I’m probably going to want a compressed file format like PNG or JPG, with an adequate resolution, so the pages will still load as quickly as possible.
2. Does my Web Catalog show multiple versions of the same image? For example, a small “thumbnail” version to display next to the Search Results, but a larger “detailed” version to be displayed in full glory when I click on the product? – Most likely the answer is yes. This just means I need one very small version (say, 200 pixels by 200 pixels) for the Thumb, and then maybe an 800 x 800 pixel version for the Detailed. Remember, these are two separate images!
3. Does my Print Catalog need images that can support a transparent background? – If yes, then you’re most likely looking at a TIF or some other format that keeps transparencies. Formats like JPG simply can’t.
4. Do I need to support vector images? – If yes, then you’re looking at Adobe’s EPS or AI formats, or SVG, or DXF.
There isn’t always a clear cut right or wrong answer. For example, when it comes to simple web thumbs, formats like JPG or PNG tend to work equally well. There isn’t really an industry accepted standard, and you will see all sorts of websites that use one or the other interchangeably.
Lack of Transparent Background
We mentioned this in our previous scenario. But, let’s assume that you sent the correct TIF images to the Design Team, but when they brought them into the catalog pages, it still looked bad because the images came with a white background. Any time the product image overlaps something non-white (such as another background image or design), you can see the white background stick out like a sore thumb.
In cases like this, you’re using the right format (TIF supports transparent background) but whoever created the image didn’t save it with the transparency, or didn’t do it correctly. Product images that have this problem can be fixed using a professional tool like Photoshop or similar photo editing software. Once the TIF is saved with the transparent background, the Designers are able to then place the image anywhere on the page (even on top of other non-white images or designs) and it will look seamless.
Not Optimized For Web
Have you ever loaded a web catalog, or a web site with many product images, and clicked through various products only to notice one specific image that takes an extremely long time to load—whereas the others load almost instantaneously? It could be a number of reasons, but most likely the image was a) saved as a ridiculously high resolution, or b) saved with a much higher quality setting than the other images (lower compression). In other words, this image probably wasn’t optimized for web correctly, if at all.
Even when most people in the civilized world have broadband internet connections, you still notice the difference between downloading a 200 Kilobyte JPG versus a 3.4 Megabyte JPG. The latter example is roughly 17 times the size. Whereas the optimized web image seemingly just “appears” when you load the page along with the rest of the text, the much larger image can drag down performance noticeably and take 10 seconds or more to load. Obviously, this is a bad thing when you’re talking about a Web Catalog. The higher quality of the larger image is unlikely to even be perceptible, because of the constraints of web viewing (size of the screen, size of the image frame used in the web page).
Resolution & DPI Set Incorrectly For the Intended Audience
If you have images that have fallen victim to “bloat” or have slow loading issues on Web, you can easily remedy the problem using Photoshop or another graphic editor. Here are some simple and generic rules of thumb:
1. Check what RESOLUTION you’re supporting on the Web Catalog or website. – If you have standardized with an image that is no taller than 600 pixels and no wider than 600 pixels, then an image with a resolution of 4200 x 3800 is complete overkill! Just sizing it down alone will drastically improve performance.
2. Check the DPI settings. – Most likely the answer is yes. This just means I need one very small version (say, 200 pixels by 200 pixels) for the Thumb, and then maybe an 800 x 800 pixel version for the Detailed. Remember, these are two separate images!
3. Optimize for Web. – Once you have the image correctly sized and with an adequate DPI (but not overdone), you can use software like Photoshop to optimize the image for quick web loading. Right in Photoshop, you can click File and “Save For Web and Devices”. This option will make available even further quality and compression settings, so that your final image retains the artistic quality and image clarity, while taking up the smallest amount of space. This, in turn, makes it load fast when retrieved from the Web Catalog or website.
Image Is Blurry, Has Color Issues, Framing Issues, Etc.
If the image itself has issues with artifacting (looks highly pixellated), it probably was saved at too low a resolution, too low a DPI, or with too much compression. Unfortunately, there is no magic fix for images that are saved with too LOW quality settings, because the information about the image just isn’t there. You can use Photoshop to take an ultra high quality image and save it DOWN in quality / size, but not the other way around! You would need to get a hold of the original hi-res photo and save it down to your specifications, or get it re-shot if unavailable.
Likewise, if the color seems off, or out of focus, or isn’t framed correctly within the shot, the best solution is probably to get it re-shot. Unless you’re a Photoshop expert, the amount of time you’ll spend on trying to touch up the image is HIGH and the results you get are likely to be LOW. Many catalogers keep a running “Shot List” of products that need new or alternate photos taken. “Bad” photos could also easily fall in this area. If you have Photographers in house, your turnaround time might be a little longer than trying to manipulate the image in Photoshop, but the results are likely to be much better.
Images Poorly Or Randomly Named
If you’re one of the lucky few that names images according to a strict enforceable naming convention, congratulations! Most of us, however, have image management issues that range from “consistently annoying” to “full blown nightmare”. If you’re taking photos directly from the camera or device, you’re probably seeing image names like “DSC1017.jpg” and “DSC1018.jpg”. Which one is the chrome toaster, and which one is the matte black refrigerator? Guess! Or, open both images. Unfortunately, these names don’t tell you anything about the product contained.
A similar issue is when image names get overly long and yet somehow don’t gain much in terms of descriptive power! We’ve all seen filenames like this one: 17833413_Longbow-E_Brwning-Cornwell 118483 (2).jpg. Believe me, this isn’t even one of the bad ones! One of the numbers might be the Item #, which is nice, but because there are 2 sets of numbers, we can’t easily tell which is which. There is also a mish-mash of dashes, underscores, and spaces (generally bad practice). The (2) at the end means it’s probably a copy of a copy, from some point in the images life cycle. Images that are poorly and/or inconsistently named are almost as bad as images with virtually no descriptive quality in their name, because both present long term management headaches.
The best long-term solution is to enforce an actual naming convention and get your images renamed to fall into line. It can take some upfront work, but once it’s in place, it should be easy to keep new images in the same convention. For example, many catalogers use the item # or SKU as the base part of the filename (because it is UNIQUE). Then, they might include a code for “Color” or some other variant descriptor. Finally, there may be a designator to let you know what the intended audience is, such as “Web Details” image versus “High Res” versus “Thumbnail”. Below is an example of 3 images, all of the same product, using this convention:
• 8180031_RED_DT.jpg
• 8180031_RED_TN.jpg
• 8180031_RED_HR.tif
8180031 is the Item # or SKU #.
RED is, naturally, the color variant.
DT means “Details” image. In our case, this could mean an image intended for the Web Details page (600×600 pixels).
TN means “Thumbnail” image. In our case, it’s limited to 200×200 pixels and used just as the web thumbnail.
HR means “High Res” image. In our case, this is the native 4800 x 3200 pixel, 300dpi TIF that we use in the glossy print catalog.