Images are vital for ecommerce. Images on a home page, category pages, and campaign landing pages — they all help engage shoppers. But here’s the challenge: Are you optimizing those images for the best performance?
No one is more qualified to discuss image optimization than Chris Zacharias. He is founder and C.E.O. of imgix, a real-time image-processing platform. As one of YouTube’s earliest web developers, he created YouTube’s HTML5 video player, and Feather, an ultra-light version of YouTube that loads quickly, to help users around the world with a slow Internet connection.
Practical Ecommerce: Why are images so important for an ecommerce company?
Chris Zacharias: Images are the first interaction you have with users. Images register in your brain far faster than reading text. If you want to make a great first impression, you have to have great images. The Internet has become increasingly image-centric and that’s how you sell your product.
PEC: How does a slow-loading image affect conversions?
Zacharias: People bounce off a website pretty quickly for slow-loading pages — 56 percent more often for every one second of additional load time. You want your consumers to stick around. This is becoming increasingly difficult to handle on mobile because you have mobile-device users that are constantly moving in and out of low or high quality networks. If you do not address this problem, you’re going to be sending images that are too big and people would just abandon.
Moreover, other countries a have disproportionately smaller amount of bandwidth or poor performance bandwidth. If you’re trying to reach some of these international markets, you could be missing a massive opportunity just because you haven’t optimized your site for them.
PEC: How can an online retailer easily optimize images?
Zacharias: The biggest thing to do is not serve a high-resolution photo to a mobile device unless you absolutely have to. If you’re not resizing and cropping photos down to something that is web-centric, you’re just shipping a huge amount of information to your end user that they’ll never see anyway.
Next to that is making sure you use the right format for your image content. Otherwise, you’re going to serve even more image content down the wire that you don’t need to.
Finally, getting your colors correct. In general, when you resize images down, they tend to become grayer. You want to go back and once you’ve resized them, adjust those colors and tweak them properly so that they still have that punch that you’re looking for.
Those are the three big things you should really focus on as an ecommerce website or a mobile app.
PEC: How does your company, imgix, address those three things?
Zacharias: We provide a platform for manipulating images in the real time so that you don’t have to do that work in your own servers. Instead of having to process those images yourself — either manually in Photoshop or writing some scripts to do it — you can connect to our platform. We work with you to set that up.
By connecting it to us, we then provide a way to serve your images dynamically. That means that you can ask that image back in whatever size you need. You can say, “I want that image as a 400 by 400 pixel square. I want it cropped so that all the spaces are preserved. I want to punch up the vibrancy of the image by 10 percent.” You can do all of that on demand.
Our platform is set up to handle any network speed. We have tools in place to adjust the compression based on your specification. Increasingly, as these new things become standardized, we can actually respond dynamically to what the browser or mobile device is actually reporting. If a user is on a 2G network in Sub-Saharan Africa, for example, we can send a lower resolution image, as opposed to a user in a major metropolitan area like Singapore [with much bandwidth].
Doing it dynamically means that we’re constantly serving exactly what your users want to see. That means that anytime Apple launches a new iPhone with a new pixel ratio, we support it on day one automatically.
PEC: If I were to use your platform, what image resolution should I should start with, knowing that you’ll generate all these different versions?
Zacharias: The vast majority of companies do not need to impose any limit on the image or format. Anything less than 100 megabytes is ideal for us.
PEC: Could you describe Feather, and then connect that work to imgix?
Zacharias: In my last year at YouTube, I worked on every angle of the website at one form or another. One of the engineers was lamenting the fact that a page on YouTube had grown to be about 1.2, 1.3 megabytes in size. He issued a challenge, saying “We should be able to serve YouTube in less than 100 kilobytes without the video.” I took that as my personal mission for a new project. That became Feather.
What was fascinating about Feather was it loaded so quickly. When we push it out into the world, we made it an optional version of YouTube. But we saw our latency numbers increase, which meant YouTube got slower.
It took us a couple days to figure out why. With Feather, we suddenly opened up parts of the world that we had never been able to reach. People who are trying to lay that 1.2 megabyte web page couldn’t load it in Sub-Saharan Africa, rural Siberia, the outskirts of India — places that have very slow Internet connection. But with Feather, they could access for the first time. They were watching YouTube videos. It was fascinating.
That led me down this path and discovery around web performance and how the different components of the web page play a role in how people access the content. Understanding where images came from, how they got in the web, how we treat them, and how that can actually benefit people around the world is ultimately where the idea of imgix came from. Feather was the spiritual predecessor to imgix.