Engaging Ecommerce with the Visual Web

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Experiences on the web have grown increasingly visual, from displaying product images to interactive NFTs, but not paying attention to how media is delivered can impact Core Web Vitals creating a bad UX with slow loading pages, hurting your store’s conversion and potentially losing sales.

How can we effectively leverage media to showcase products creating engaging experiences for our store? We’ll talk about media’s role in ecomm and how we can take advantage of it while optimizing delivery.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

According to Kolby Fayak, media plays a crucial role in e-commerce by enhancing product visibility and user engagement. It helps in effectively showcasing products through images, videos, and GIFs, which can lead to improved user experience and potentially higher conversion rates.

Amazon uses media extensively on its e-commerce platform by displaying large images on its landing pages to showcase available products. The site also includes category-specific images and detailed product images that allow users to browse and evaluate products effectively.

Glasses USA uses augmented reality to allow potential customers to virtually try on glasses. This innovative approach provides a firsthand look at what glasses would look like on a user's face, enhancing the shopping experience and aiding in the decision-making process.

Nike has ventured into the digital world by acquiring Artifact Studios and launching Nike land on Roblox. These initiatives allow users to interact with digital versions of Nike products and participate in virtual activities, blending physical product engagement with digital experiences.

To optimize media delivery in e-commerce, one can use modern image formats like WebP and AVIFF for high-quality images at reduced sizes, compress images without losing visual quality, and resize images appropriately for the web to ensure fast load times and maintain a good user experience.

Website speed has a significant impact on e-commerce conversion rates. Faster load times improve user experience, reduce bounce rates, and can lead to higher conversion rates. Studies, such as one by eBay, have shown that even a small improvement in load time can result in a noticeable increase in conversions.

Lifestyle imagery positively affects e-commerce by helping potential customers visualize how products fit into their lives. These images portray products in real-life scenarios, which can enhance emotional engagement and aid customers in making purchasing decisions.

Using video in e-commerce can drive more context and better understanding of products in a shorter amount of time. Videos can include audio descriptions and dynamic visuals that provide a comprehensive overview of product features, benefits, and usage, thereby enhancing customer understanding and engagement.

Colby Fayock
Colby Fayock
12 min
16 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Images, video, and media are crucial in e-commerce to deliver the best user experience. Nike's acquisition of Artifact Studios and the launch of Nike land on Roblox demonstrate the future of e-commerce in the metaverse. Clear and zoomable images, point-based details, and video are essential for enhancing the user experience. Optimizing media delivery through modern image formats, compression, resizing, and technology can significantly improve conversion rates in e-commerce.

1. E-commerce and the Power of Media

Short description:

Images, video, and media are part of our everyday web experience. How can we take advantage of it from an e-commerce perspective and make sure that we're delivering the best experience we can? We're going to start off at the top with the king of e-commerce, Amazon, where the first thing we see when we load this page is it's covered in media. Here we have Starkadet where I'm a big fan of their Final Space merch. They take advantage of GIFs to display video-like category and product images. Glasses USA allows potential customers to get a firsthand look at what glasses would look like on somebody's face. As far as product pages go, you still need to have the ability to showcase your product. The web is changing. So what does the future of e-commerce look like? Nike recently acquired Artifact Studios, a team who create shoes and collectibles ready for the metaverse. It's similar to the collectible game that Nike has always been a part of, but now as an investment into the digital world. And that wasn't Nike's only foray into that world. Nike also launched Nike land on Roblox.

♪♪♪ Images, video, and media are part of our everyday web experience. How can we take advantage of it from an e-commerce perspective and make sure that we're delivering the best experience we can? So who am I? I'm Kolby Fayak. I'm the one hugging BB-8 and Kylo Ren over there. I work with the dev community as a Developer Experience Engineer at Cloudinary. You can find me pretty much anywhere on the web by just Googling my name as I'm the only one in the world.

So we're going to start off at the top with the king of e-commerce, Amazon, where the first thing we see when we load this page is it's covered in media. It's a good way to showcase available products so it makes a lot of sense. This is the landing page for their fashion store, which likely looks similar to a lot of the top-level landing pages that you've seen where we have large images that are meant to showcase the available products. And if we scroll down, we have the ability to shop by category where we have images that represent each category. Once we dive in here, we can start to see a grid of images where like here on the product listing page, the easiest way to browse a large amount of products is to put them in a list. So we put them in a grid where we can scroll through. Once we're on our product details page, we want to get a closer look and choose our options. Ideally, this means having several photos showing different angles. Now not to pick on Amazon here, but there's really nothing innovative going on. And I'm sure they A-B test every minute detail of this page to make sure that it's not going to hurt conversion, which we'll get to later, but it's all very practical and functional. So how can we take our media in e-commerce up a step further?

Here we have Starkadet where I'm a big fan of their Final Space merch. They take advantage of GIFs to display video-like category and product images. It's a bit more of a creative approach, taking a very typical static medium and making it exciting. Glasses USA allows potential customers to get a firsthand look at what glasses would look like on somebody's face. Buying glasses is hard, and you want a pair that you're going to feel confident in. Traditionally, we'd have to hope for the best with a good return policy, but this gets us a step closer to feeling like we're actually in a store. As far as product pages go, you still need to have the ability to showcase your product. People need to buy something and it needs to be very clear. So you don't want to be over creative, but here like Nike, we can see that they have embedded video as part of that experience to give people a better idea of the fit. Now as creative as some of that is, it's still fitting into a traditional medium. The web is changing. So what does the future of e-commerce look like? Nike recently acquired Artifact Studios, a team who create shoes and collectibles ready for the metaverse. It's similar to the collectible game that Nike has always been a part of, but now as an investment into the digital world. And that wasn't Nike's only foray into that world. Nike also launched Nike land on Roblox.

2. Enhancing E-commerce with Media

Short description:

In the world of e-commerce, it's important to display large clear images and videos to showcase your products. Apple excels at highlighting features with diagrams, while Wyze uses lifestyle photos to help customers envision the product in their own lives. Video can provide more context in a shorter time, and Under Armour effectively uses video on their homepage to engage their athlete audience. As developers, we need to ensure that we display images clearly and avoid overcompressing or using tiny thumbnails.

It's experience that allows you to connect to a digital version of Nike HQ. They have games, sports and community oriented features. But they also have a showroom that lets you check out specific special Nike products where you're given the ability to deck out your roblox avatar with exclusive gear. While we still have a lot of time before this thing becomes super mainstream, we're already starting to see really creative solutions. There's a lot of change happening and it's happening fast.

Let's talk about some of the more practical ways where we can look at our media today. While the metaverse is likely coming fast, we still need to maintain an effective web 2.0. While for some of you this might seem like an easy one, it's super important to make sure that you're displaying large clear images and video to showcase your product. It's especially helpful when you have more than just a single wide shot of the product. People care deeply about the products that they're buying. So being able to have a clear up close look at what it looks like helps them to ensure the quality that they're getting.

And we can't have e-commerce reference shots without Apple, because they do a really good job at showcasing large detailed imagery of their products. But that's not always enough to make sure that the features are clear. They make the extra point to highlight features, diagramming different points for the products, such as their potentially confusing use of three separate lenses for a single iPhone, where they point out the differences between the three. And while it's important to have those big clear images, which Wyze does a really good job at, lifestyle photos are a way to place your product in people's everyday lives, whether the potential customer knows it or not, this helps them to imagine how that product would actually fit into their own life.

So how could these Wyze headphones help you out? While maybe enjoying some music in bed? They're so comfortable that you might forget that you're wearing them. You see on the headline there. Now ThinkGeek, a company that I worked for, who used to sell cool things from all your favorite fandoms, took this a step further. Not only did they showcase the products in a real life scenario, they showed it with a fun twist. So you can fully imagine yourself as Darth Vader, baking with your R2D2 measuring cups. But it makes a difference going this extra step, helping to build a stronger connection with your audience.

Now upgrading media from static images, we have video, which can help drive more context between the visuals in a shorter period of time, along with audio to provide more verbal descriptions, but we can do better than a video just simply embedded in a pop-up. Like my examples earlier, we can use video in ways that will add to the experience without taking away from the existing one. Under Armour instantly sets the tone with video on their homepage. Their audience is full of athletes. So this is a really good way to take somebody right into the gym and get them hyped up. So enough outlooking a bunch of pictures, see what I did there. How can we actually take some of this and make it happen from a developer perspective? In reality, some of these answers may not include technical solutions, like in order to show large clear images, the first thing you need is large clear images. But make sure you're actually showing those images large and clear on the page. And make sure you're not overcompressing or showing really tiny thumbnails.

3. Enhancing User Experience with Media

Short description:

To enhance the user experience on e-commerce websites, it's important to have clear and zoomable images, provide point-based details, include text on the page instead of embedding it in images, and use video instead of GIFs for better file size results. However, it's crucial to consider the impact of media on page load speed and conversion rate.

People need to be able to have a clear look at what the product is. So take advantage of those big beautiful images. But you can take that a step further. You can allow people to zoom in on those images right as they're on your page, avoiding unnecessary steps to take them off that page. There's a lot of great zoom-based libraries that can help us out with this, like React to Interim Zoom gives us a simpler experience to Uniqlo. Or there's a lot of other traditional zoom modal libraries where they don't really provide the zoom experience that you would expect on a product page.

But you can also try to replicate this on your own. So just as an example, once zoom is enabled, we can dynamically grab the cursor position and update the image's position relative to its container. And while this is just a simple example of how this might work, it shows the basics of how we can start to achieve that UX. Now providing point-based details is both a little bit easier and a little bit trickier. Adding some text overlaid on an image isn't too bad. But each one of those lines are pointing precisely to that lens. While we can do that pretty easily for one single viewport size, realistically most of us are trying to build responsive experiences. Again, this is a very simple and incomplete representation, but we can start to see how we can make this happen by using the resize listener and setting coordinates based on the original width and height, where it's percentage-based, so we can dynamically update that position as it resizes.

Now lifestyle imageries is one of those things where, again, unless you're also the photographer, we're going to need creative support in imagery. But we can still see how we can provide nice banners like this without having to embed the text inside of the image. By including the text on the page, we're helping both search engines read that text and accessibility. Also, it's likely easier to make responses so that the text is readable everywhere. And as far as video is concerned, yeah, I would imagine you might be thinking, I can just slap a GIF in there. And yeah, you can, but GIFs can be huge, especially if you want them big and high-quality. We can instead take advantage of actual video on the page, which, depending on the use case, may provide much better file size results. Using the HTML video element, we can hide all the controls in the player UI and set it to automatically play in loop, just to make sure that your app is actually able to see that solution with the results and see how it compares to others.

Now, we have a lot of awesome tools at our disposal. But it's not always as easy as just dumping a bunch of images and videos on a page. There's serious considerations that we need to take into consideration for how we actually deploy these experiences. Without considering the impact, we could be putting a lot of unnecessary load on our people's devices and bandwidth, severely slowing down their page load and hurting their experience. Or worse, killing our store's conversion rate. Now if you're not familiar, conversion rate is the percentage of your traffic that actually buys something. There's a lot of studies about how website speed directly correlates to conversion rate. eBay for instance found that a half percent increase in their conversion rate with a 100 millisecond load time improvement.

4. Optimizing Media Delivery for E-commerce

Short description:

eBay is worth over ten billion dollars, and even a small percentage of that can add up quickly. To optimize media delivery, we can use modern image formats like WebP and AVIFF, compress images without impacting visual quality, resize images to the needed sizes, and let technology handle optimization. By paying attention to media, we can significantly reduce file sizes without sacrificing quality and improve conversion rates. Check out my course, Ecom Product Management and Storefront, at egghead.io for more on building your own online store.

Now that might not sound like a lot, but eBay is worth over ten billion dollars. So just as an example, 0.5% of one billion is five million. So it starts to add up really quickly. That means that while all of our video and imagery might help build a good user experience, that media is going to take up a vast majority of the size of the page. So if we don't pay attention to how we're delivering it, we're going to bloat our pages and destroy our conversion rates.

So what can we do to help optimize that delivery? Well, let's look at some examples of images. Start off, while JPEG is a great option, there's more modern formats that can help us deliver high quality images at reduced sizes. WebP and AVIFF are two great options. And depending on the image, can bring some drastic reductions in size. We can also compress our images to the point where we're not impacting the visual quality. Maybe it won't matter for this tiny little thumbnail, but we've learned that we want to display these nice and big, right? So we want them all displayed in their all beautiful big glory. So we can let tech automatically decide how much we want to optimize without hurting the visual quality. We're not over optimizing and we're not wasting precious kilobytes in downloads. If you're working with high-quality imagery, your source files might be huge. If you serve them as-is, the browser has to resize them down anyway. So you're just wasting bandwidth. Resize to the image sizes that you need. And don't try to just crunch the image just to make it smaller. You'll end up with super blurry or pixelated images. Modern image delivery can give you the exact sizes you need on the fly. So take advantage of that. Bring this all together, we have some pretty amazing results. Using modern formats, letting tech handle automatically optimize our images, and serving the images in sizes that make sense for our web app, we were able to slash this particular example down from 652 to 76.6 kilobytes. All without sacrificing quality. If we pay more attention to our media, not only will we be able to responsibly build great experiences for the web, we'll be helping ourselves provide the best opportunity for conversion.

Speaking of e-commerce, if you want to learn how to build your own online store, check out my course, Ecom Product Management and Storefront, where I walk you through building a full stack app with Next.js, Snipcart, and GraphCMS. You can find it at egghead.io, where I'll include it in my talk notes. And that's it. If you want to learn more about or chat about the talk, you can find me everywhere at ColbyFayok. And also tweet out a link with some of the stuff you've seen here today.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
How React Compiler Performs on Real Code
React Advanced 2024React Advanced 2024
31 min
How React Compiler Performs on Real Code
Top Content
I'm Nadia, a developer experienced in performance, re-renders, and React. The React team released the React compiler, which eliminates the need for memoization. The compiler optimizes code by automatically memoizing components, props, and hook dependencies. It shows promise in managing changing references and improving performance. Real app testing and synthetic examples have been used to evaluate its effectiveness. The impact on initial load performance is minimal, but further investigation is needed for interactions performance. The React query library simplifies data fetching and caching. The compiler has limitations and may not catch every re-render, especially with external libraries. Enabling the compiler can improve performance but manual memorization is still necessary for optimal results. There are risks of overreliance and messy code, but the compiler can be used file by file or folder by folder with thorough testing. Practice makes incredible cats. Thank you, Nadia!
Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
Watch video: Optimizing HTML5 Games: 10 Years of Learnings
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
Workshop
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
React Performance Debugging
React Advanced 2023React Advanced 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
High-performance Next.js
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Michele Riva
Michele Riva
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.
Maximize App Performance by Optimizing Web Fonts
Vue.js London 2023Vue.js London 2023
49 min
Maximize App Performance by Optimizing Web Fonts
WorkshopFree
Lazar Nikolov
Lazar Nikolov
You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion