For e-commerce sites, both page speed and large, detailed images are key to successful conversions. You want to provide an enjoyable, engaging experience for your customers without slowing them down. So what's an online store developer to do?
To make implementing fast lightboxes and zoom viewers simpler, today we're pleased to announce Luminous and Drift. These open-source libraries are the first in a series of user interface components we'll release this year to make using imgix as straightforward and easy to integrate as possible.
Lightboxes and zoom viewers bridge the speed gap by allowing your customers to view a more detailed image as desired. However, if they're implemented in ways that don't take image size and number of image requests into account, the potential speed savings will be lost. For example, scaling down a large image to make a thumbnail saves on image requests, but slows down page speed because the browser is forced to scale the image.
imgix can improve any lightbox or zoom viewer by eliminating the need for multiple copies of the image and delivering it at high quality and speed in all sizes, boosting both page speed and conversion.3
Basic Product Listings with Luminous and Drift
Both Luminous and Drift are extremely lightweight and support lazy-loading, and though they have no dependencies, are easy to use with imgix once installed. Only the
h parameter is needed to set the sizes of the thumbnail and the lightboxed or zoomed image, although others can also be applied. When used with imgix, the same image is requested, but with a simple parameter change to provide the thumbnail.
For example, a Luminous lightbox can be set up for a product image with minimal code.
Click on the watch to see the lightbox (and click again to remove it):
See the Pen Luminous Store Demo by imgix (@imgix) on CodePen.
Implementing a Drift zoom viewer requires only a few changes (e.g. setting up which container the zoom is bound to, and defining the
data-zoom URL for the thumbnail).
Hover over the watch to zoom:
See the Pen Simple Drift Demo by imgix (@imgix) on CodePen.
Using Luminous and Drift Together
To give your customers the flexibility of seeing the whole image enlarged, or just zooming in on a portion, you can easily combine the two libraries.
See the Pen Luminous + Drift Example by imgix (@imgix) on CodePen.
Drift can also be used to create special effects. For example, with two versions of the image (an inside and outside view) and the image size parameters set to the same values, the zoom will show the customer an "x-ray" of the product.
Hover over the watch to see inside:
See the Pen Drift X-Ray Example by imgix (@imgix) on CodePen.
Both Luminous and Drift allow you to customize the included stylesheets to match your site or app, and they provide namespace support for cases where you want to have multiple instances on a single page, but with different visual treatments. You can also choose whether to always display the lightbox or zoom inline, always display in an external container, or display inline only below a specified window width. For more details, read the Luminous and Drift documentation.
Give your customers more confidence in their purchase by allowing them to get a closer look at the product. With these two libraries and imgix, you can easily add lightboxes and zoom viewers to your e-commerce site with no decrease in performance. We look forward to seeing what you build!
You can learn about all of our on-demand imaging features in our API Documentation. If you have any additional questions about Luminous or Drift, don’t hesitate to [get in touch with our team](mailto:firstname.lastname@example.org?subject=Luminous or Drift Question).
- 1 [How Loading Time Affects Your Bottom Line](https://blog.kissmetrics.com/loading-time/?wide=1) – Kissmetrics
- 2 [Ecommerce A/B testing: Larger product images increase sales by 9%](https://vwo.com/blog/larger-product-images-increase-conversion-rate/) – VWO
- 3 [Shopify Image Quality Optimization (round 2, with stats, 38% Improvement)](https://ecommerce.shopify.com/c/ecommerce-discussion/t/shopify-image-quality-optimization-round-2-with-stats-38-improvement-304813) — Shopify Forums