![When Not to COPE With Your Web Images [Video]](http://www.marketinghub.today/wp-content/uploads/2017/07/when-not-to-cope-with-your-web-images-video.png "When Not to COPE With Your Web Images [Video]")
In his Intelligent Content Conference talk, Creating and Executing a Visual Content Strategy That Scales, Buddy told us that he’s all for single-sourcing … except when he’s not. Why it’s hard to COPE with some images Buddy drops what he calls a “truth bomb” about images: They aren’t the same as text. Not so with images. To illustrate this point, Buddy shows what happens when a browser scales an 800-pixel-wide photo of his daughters: This is a COPE example. As Buddy changes the image width from 800 to 400 to 200 pixels, he also changes the image composition: This isn’t COPE. In an excellent article that Buddy points to, Jason Grigsby says, “Selecting image breakpoints is something everyone will face, and frankly, I have no good answers for you.” You probably will not create multiple images for every image on your website. The only rule I can suggest is to make your strategic decisions about images the same way you make strategic decisions about any other content: Ask yourself what your audience needs and why. Also consider multisourcing images on any other pages that most people view on small devices. If smartphone users can’t read an image without pinching and zooming, you may want to customize the image for small screens. All content teams – including your colleagues in content strategy, design, content engineering, and user experience – need to know how your website’s images load on smartphones.
To think strategically about your web-based visual content, you have to do more than choose which images to use; you must also make sure that those images work for screens big and small.
If an image works for all screen sizes, great. Upload one file (single-source the image) and you’re good to go.
Not all images make your life that easy. Sometimes it’s worth your while to provide multiple versions of an image to give people what they need from the image on any device.
So says Buddy Scalera, senior director of content strategy at The Medicines Company. In his Intelligent Content Conference talk, Creating and Executing a Visual Content Strategy That Scales, Buddy told us that he’s all for single-sourcing … except when he’s not. He advocates for what he and others call “COPE mostly” (COPE-M), especially when it comes to images.
COPE stands for “create once, publish everywhere.” COPE content is single-sourced content. In many ways, COPE content is ideal. You create a chunk of content once – a product description, a specification, a definition, an image – and the system can pull (not paste) that chunk into multiple deliverables. When you update the source, the update ripples through your repository. COPE content is elegant. It’s efficient. It’s logical. It saves companies millions of dollars in translation costs. It helps them avoid embarrassing, crazy-making, lawsuit-incurring inconsistencies. COPE works well with text, audio, and video (if you’re using YouTube).
Still, sometimes COPE is the wrong way to go. Modern browsers reflow your text, but images scale down for your devices. An image that looks great on desktop may become unrecognizable on a smartphone. (Hello, pinch and zoom.)
That’s where the M in COPE-M comes in. “While it’s a good goal to prepare your content for multichannel reuse, not all content scales effectively in the COPE model,” Buddy says.
In this article, I sum up Buddy’s advice from his ICC talk. All images in this post come from his slides, and all quotations, unless otherwise noted, come from his talk and from my subsequent conversations with him.
Why it’s hard to COPE with some images
Buddy drops what he calls a “truth bomb” about images: They aren’t the same as text.
Text lends itself to single-sourcing because text can be separated from its appearance. Cascading style sheets enable text to vary in appearance from one instance to another without changing the underlying text source. “Text is a wonderful, flexible, flow-able, reusable, channel-agnostic asset that works great in the digital world,” he says.
Not so with images. They can’t be separated from their appearance. With images, one size doesn’t always fit all.
As Justyn Hornor put it a few years back, the “elephant in the room” for responsive web design “is how to handle images.” A small image may look sharp on a cell phone and ridiculously small on a high-resolution monitor. A large image may take a long time to render on a small device where a smaller image would suffice.
How to think about multisourcing images
Rather than expecting a single image to work for all devices by compromising on the high and the low ends, you might find it at least occasionally worthwhile to upload multiple images and then tell the system at which breakpoint to use each one.
A breakpoint is the point at which the system stops pulling one image and pulls another instead – a bigger or a smaller one, depending on the resolution of the device. This illustration shows three possible breakpoints: 320 pixels for a cell phone, 720 pixels for a tablet or large phone, and 1,024 pixels for a laptop.
Breakpoints are defined according to device width because we have infinite vertical scrollability but limited width.
Buddy describes a time when one of the content teams at his company printed a brochure that included a graph answering physicians’ questions about a certain product.
The graph looked great in print. And then they put it on a website, and it got smaller. When viewed on a smartphone, the chart was unreadable. People looking up something on a smartphone in a hospital have a level of urgency. They need the answer. They don’t need to be pinching and zooming.
In many cases, it’s acceptable to upload one large image to your website…
COMMENTS