The internet today is a primarily visual medium. Intuitively, most marketers know this. They agonize over which photo to use to highlight their products. They eschew word-heavy sales letters in favor of visually-engaging video. They have passionately-argued opinions about the proper button color for conversion forms.
Yet ask a marketer what the performance impact of these visual decisions will be — crickets. Performance is a blind spot.
This is a mistake. It may be true that visual performance often boils to questions of technical implementation that the marketing team isn’t positioned to answer on its own. But you’ll be owning the results.
The impact of poorly-optimized images isn’t a small thing, either. A Google study revealed more than half of visitors will abandon sites that take more than three seconds to load. Page abandonment is bad for sites at any time, but that is especially true during Black Friday or Cyber Monday, when sales are expected to increase by 47% up from last year.
Even if you will never write a line of code yourself, you want to be able to ask the right questions to the people that are.
The web as images
The web was originally intended to deliver text, so it’s very good at doing this efficiently. The same is true of more simple elements of visual design — color blocks, gradients, buttons. Interactive elements are more complicated. Yet even the scripts used to add this functionality are relatively tiny.
In fact, if you look at the data transmitted from a server to display the average webpage, images will comprise 60% to 70%. That makes images a major performance bottleneck.
What’s more, data shows that images are among the most important parts of the page in driving user buying decisions. Three-quarters of U.S. internet users regularly – or always – search for visual content prior to making a purchase, according to a 2017 eMarketer study. Seventy-four percent of consumers say text-based keyword searches are inefficient in helping them find the right product online, according to visual search firm Slyce’s 2015 report.
Having good image performance has off-page implications as well. Google has started using load time to help rank search results, so it helps with SEO.
Understanding the big picture
Most websites rely on high-quality images to stand out against the competition. Yet image size is a tradeoff. The larger the file size, the longer it takes pages to load, leading to higher bounce rates. Those multi-megapixel images produced by modern cameras are big enough to print on a billboard. Online, they’re overkill.
The largest image file on your site never needs to be larger than 1920 x 1080, full screen on the average monitor. Larger monitors with “4K” definitions of up to 3840 × 2160 are still too niche to justify going that big. Besides, how often do you want an image to take up the entire page?
Think small, too
That said, the thing that complicates image performance is often the small screens. Mobile devices come in a range of different sizes and pixel densities, so serving images at the correct size for each is a challenge.
But those small screens are becoming more and more important. According to a recent study by eMarketer, US adults are spending an average of 3 hours 14 minutes per day on their mobile phones in 2017.
Most sites these days will use responsive design to deal with mobile. This means the elements on the page scale to match each screen. This is automatic, but you’ll still want to think about the size of your image container, or space designated for an image to live on a given page, at the most common screen resolutions. These are your page’s breakpoints, and you’ll want the browser to be requesting the photo at the proper resolution to fit the container size for each of them.
Of course, that means having several versions of each photo ready to be served to different screens. That might seem like extra work , but a developer can automate it. Smaller sites with limited image catalogs can get away with running a series of commands to create the derivatives when an image is uploaded. This doesn’t scale well, however, so larger sites or sites where content changes constantly will probably want a more advanced solution that can perform these edits on-demand as images are requested.
Choose the right format and compression ratio
JPEG is still the most widely-supported format, so it’s not likely to be replaced as the fallback standard anytime soon. Yet all JPEGs are not created equal. Significant space savings are possible through higher levels of compression. JPEGs have a setting called quality that is a number between 1 and 100 and controls how much compression is added to an image when it is saved. As the number gets lower, the file gets smaller. However, the lower the quality setting is, the greater the potential that visual errors called “artifacts” will be introduced into the final output image.
So quality is a tradeoff. You’re looking to set it as low as you can before artifacts like blockiness, color banding and noise start to appear. The optimal setting will depend heavily on the subject matter of the image and how large it must be displayed. For most images, however, the sweet spot is somewhere in the 60-80 quality range, so try setting it to 60 to start and adjusting from there until you’re happy with the result.
Another tip: where possible, use progressive rather than traditional jpeg encoding. Traditional JPEGs load by scanning down the image, revealing it from top to bottom as it loads. Progressive JPEGs, on the other hand, display the full image immediately, albeit with some pixelation, and then clarify into the full resolution image as it loads. This means they feel faster to visitors, even when they take the same amount of time to load.
Visual performance: another optimization lever
So much of what marketers do is optimization. You are constantly trying out new approaches and recording the results, finding the things that make a difference and paring back the things that do not.
Tweaking the way you deal with visuals so as to increase performance is just an extension of that kind of thinking. In fact, since page performance is so closely related to conversion performance, images can be a powerful lever for shifting a range of KPIs.
With Black Friday and Cyber Monday just around the corner, visuals can be a great frame of reference to hit your numbers and increase loyalty beyond the holiday season.
Chris Zacharias is founder and CEO of imgix