Multi-source images, a winning solution
Open the page of your website that gives the best results on three devices: mobile, tablet and desktop.
Really, do it.
I’ll be waiting.
Does your content display as well as you expected?
Many marketers will find that this is not the case.
The user experience and message consistency are not satisfactory.
Sometimes, it’s downright awful.
How did you get here?
After all, your company invests a lot of resources in publishing content.
You even optimize these content resources by adopting the COPE method – create once, publish everywhere.
And maybe that’s the mistake.
Understanding why COPE-M is necessary
With a traditional COPE strategy, you upload a piece of content once (definition, image, description, etc.), and the CMS pulls (not pastes) that piece into multiple deliverables.
When you update the original content, the update is reflected in your repository.
As a content strategy, COPE content is elegant.
It’s effective.
It makes sense.
It increases the reuse of your content and amortizes your investment in original content.
It works with text, audio and video.
But COPE is not a panacea for your content publishing.
Modern browsers reflow your text, but images are reduced for your devices.
An image that looks perfect on a desktop may be unrecognizable on a mobile device.
(Your audience doesn’t like it, and neither does Google, which can hurt your content’s ranking).
COPE is a great place to start, but a more layered approach to image control is needed.
I call it COPE-M – create once, publish everywhere mostly.
COPE-M can be the bridge between a good user experience and an excellent one.
Adopting a COPE-M approach to your content publishing strategy can improve user experience, consistency and SEO thanks to up-to-date content.
Pictures are not necessarily COPE’s best friends
Much has changed since 2009, when Daniel Jacobson introduced the concept and technical approach of this content reuse strategy.
COPE remains a solid concept, but today content is distributed across multiple device types.
Audiences are also consuming content in more formats.
Single-source text displayed in multiple browsers still works, but it’s a problem for images.
Text can be separated from its appearance.
Cascading style sheets allow you to modify the appearance of text, such as font size and column width, without modifying the original source.
Images are not as malleable.
Rendered graphics (e.g. JPEG and PNG files) cannot be separated from their appearance.
One size does not fit all.
An infographic that looks good on a desktop computer may be unreadable on an iPhone.
The viewer then has to pinch, zoom, squint and grumble to try and see it.
Images aren’t as malleable as text in coding, so a single-source visual doesn’t always look good on all devices, explains @BuddyScalera via @CMIContent.
Choose multisource images
Until content management systems become smart enough to automatically deliver ideal viewing experiences for every image on every device, you need to consider when to COPE and when not to COPE your images.
Go back to my original request: open your most profitable page and see how it appears on multiple devices.
Do the same with the other important pages and images on your website.
You’ve probably already marked them in your analytics software.
TIP: limit your selection of pages to those that receive significant traffic from mobile devices.
To determine which images should be multisourced, test the selected pages on several devices.
Take a stack of devices and a designer, content strategist or UI person.
Load your content as your customer would.
If an image appears crushed, add it to the list of images to be multisourced.
TIP: Don’t just look to see if the image is displayed.
Take a close look at how it’s displayed.
If the user has to pinch and zoom to see the whole image, COPE is probably not the best method.
Share the results with all content-related teams, including content strategy, design, content engineering and user experience, who need to know how your website images are loading.
Design for multiple screens
When an image is subject to a compromise between high and low ends to fit the screen of a mobile device, it can be interesting to download several images and tell the system at which breakpoint to use each of them.
A breakpoint is a point at which the system stops extracting an image and extracts a version better suited to the device screen.
Breakpoints are determined by the width of the device, as users can scroll the screen infinitely, but cannot enlarge it.
Put COPE-M to work for your brand
Most digital asset management (DAM) systems can create multiple outputs of the same image in different sizes and ratios.
If you can’t redo the photos, crop them to ensure the best experience on all screen sizes.
This can be a lot of work, so don’t ask your designers or developers to redesign every image on your website.
Focus on impact.
If SEO is a top priority, consult your SEO specialists before implementing the multi-image approach.
Google’s algorithm can penalize web pages that don’t offer exactly the same experience on desktop and mobile.
Even if you offer a better experience to humans, a Google crawler may not know it yet.
Of course, if more people find your page worthy of their time because of a better image experience, Google will appreciate it.
What about your team?
Do you ever create several versions of your important images to adapt them to different screen sizes?
What have you learned from testing your images on multiple devices?
