As StubHub evolved from a lightweight website to one that was rich with images, videos and custom views from seat locations at event venues around the world, it sought a way to streamline image management. The company implemented Cloudinary, which enabled it to significantly reduce the time required to manually edit images, while ensuring that the key focal points of each image were viewable in more than 30 viewports across a multitude of devices. Cloudinary’s digital asset management capabilities also have helped StubHub better protect its content, creating a single repository that ensures developers and designers have access to only the most current images and understand the associated brand guidelines.
- Up to 60 percent reduction in page weight
- Up to 6x faster image load times
- Three to four times faster page load
StubHub is the world’s largest ticket marketplace with tickets available for more than 10 million live sports, music, and theatre events in 40+ countries. The company enables experience-seekers to buy and sell tickets whenever and wherever they are through its desktop and mobile interface. Owned by eBay, StubHub reinvented the ticket marketplace in 2000 and continues to lead it through innovation. StubHub’s industry firsts include the introduction of the ticketing application, interactive seat mapping, 360-degree virtual views of seating, innovative price recommendation technology and an algorithm that determines the best value on tickets. Most recently, StubHub expanded into more than 40 additional markets with the acquisition of Ticketbis in May 2016.
When Susan Stieglitz joined StubHub in 2015, the site was very lightweight and had few images associated with the events being promoted. But as head of imagery, she was tasked with finding ways to make StubHub’s portal more visually engaging, as the company expanded into more than 40 countries around the world.
That’s where the challenges began. First, she had to ensure that this imagery – which included photos, video, views from seats and virtual views – could be easily accessed and properly displayed across multiple devices, such as desktops, tablets and smartphones, and more than 30 different viewports. Stieglitz also had to address digital asset management, since StubHub worked with licensed content from partners and often had requests by third-party marketers to use the site’s images.
|“All of our images required manual editing, severely limiting the potential for innovation in experience design. We prioritized editing for a desktop view, so the images may or may not look good in other viewports.” –Susan Stieglitz, Head of Imagery|
In addition, StubHub had to contend with the sheer scale of managing more than 120,000 active events on the site at any given time, and between 800 and 1,200 new ones being published every day. StubHub’s catalog included more than 54,000 entities with multiple images that needed to be selected, edited and updated continually.
“Delivering quality images at scale is a daunting task, particularly since our catalog has a single image for each event, that we need to ensure displays well across all viewports,” said Stieglitz. For example, an image of Billy Idol cropped to look good on a desktop might end up showing only his armpit when viewing it from an iPhone, or Pink’s face may be cut in half when moving from a laptop to a tablet.
“All of our images required manual editing, severely limiting the potential for innovation in experience design,” she added. In 2017 alone, Stieglitz’s team manually edited more than 17,000 images in Photoshop to fit in the event cards in the desktop design, which was then used in native and other viewports. “We prioritized editing for a desktop view, so the images may or may not look good in other viewports.”
When getting images from partners, like the National Basketball Association, National Football League or others, StubHub also wasn’t sure which specific image to request, since they needed one that would look good across various shapes, including checkout, review and buy, grouping pages, desktop banners, event cards, native apps and the mobile web.
And finally, Stieglitz noted, it wasn’t all simply about the way images displayed. As they did a deeper dive, the StubHub team wanted to improve the overall user experience by making the images as small in size as possible without any perceptible loss of quality, so the site would load faster.
Access to Media Cloudinary enables StubHub to use one high-resolution source image, then optimize it in endless end-user configurations with simple parameter changes. Cloudinary dynamically selects the most efficient format, based on the end user’s device and browser. The solution also optimizes images so StubHub pages load three to four times faster, which is particularly important as StubHub has moved into international markets where devices may be slower or broadband access less prevalent. Facial recognition capabilities in Cloudinary also ensure that dominant face(s) stay within all viewports, while those images that do not include faces can benefit from edge detection and entropy detection. “These features ensure that we deliver the important part of the photo, no matter the viewport,” Stieglitz added.
|“These features ensure that we deliver the important part of the photo, no matter the viewport.” –Susan Stieglitz, Head of Imagery|
Other Cloudinary features that StubHub has found useful include:
- Transformations – Allows teams to apply artwork styles, incorporate logos, remove backgrounds, and add tints, color enhancements or borders
- URL customization – Improves SEO ranking with meaningful image filenames within the URL
- Analytics – to learn where end users are clicking
StubHub also uses Cloudinary’s platform for digital asset management. Through Cloudinary, StubHub can maintain better control over partners assets, host brand identity guidelines and logos, provide buildable templates for asset creation and establish permission-based folders with access determined by group roles and individual user types. Cloudinary’s digital asset management capabilities enable StubHub to have a single location where it can keep all updates in sync and add metadata to images to identify protected assets.
“Cloudinary has created a no-fail, self-service system for brand, partners and event teams to use our content correctly,” Stieglitz noted. “This is critical. Our images previously were not safe, because they were available through an open developer portal accessible by anyone with an API key.”
Using Cloudinary, StubHub was able to reduce an image of Tim McGraw from 1.2 MB to 8kb, significantly improving page load performance. Similarly, StubHub reduced an image of Shakira from 25kb to 10kb, speeding download from 336ms to 51ms.
On average, StubHub achieved page weight reductions of up to 60 percent, and improved image load times by up to 6x.