Swimply is a fast-growing marketplace that facilitates recreational space and swimming pool rentals. As listings and user-generated images grew, it became difficult for the platform to serve high-quality images while optimizing page speed on its website and mobile apps. With imgix, Swimply reduced image file sizes by 38%, decreased image response time by 50%, and saved valuable engineering time.
The Customer
Dubbed the Airbnb for pools, Swimply is an online marketplace that connects the owners of private recreational spaces - such as swimming pools, hot tubs, and sports courts - with people seeking to gather, swim and escape locally. With over 25,000 pools on its platform, Swimply provides an option for the 96 percent of Americans who don't have access to a pool. 92% of Swimply bookings are done by locals 5 miles from their hosts. 70% of the bookings are made by moms for their kids and families.
Using Swimply’s website, iOS app, and Android app, users can view listings and make reservations, with all communications, amenity selection, and payment handled through the Swimply website or mobile apps. Swimply currently operates in the United States, Canada, and Australia.
Like most hospitality sites, Swimply relies heavily on images and videos. From user-generated images, such as listing photos and user avatars, to marketing images on the homepage, Swimply serves 210,000 monthly origin images and a staggering 680 million image requests in the high seasons. Around 40% of traffic comes from mobile apps, 30% from mobile web, and the rest from desktops.
"Consumers make decisions - quick decisions - just based on whether they like that property, or like the swimming pool. So, that's why images are at the front and center of our application. For most of our customers, how the pool or tennis court looks is as important as the pricing. That is why it is very important for us to have actually very stable and reliable image processing and delivery."- Kaan Merelan, VP of Engineering
The Challenge
Swimply’s hosts and guests access it from a diverse set of devices and applications. Before using imgix, each image, some at almost half an MB, was served as was regardless of the device or browser environment. Additionally, Swimply only served images as JPEGs, instead of next-gen image formats like AVIF and WebP. Finally, the user-generated images came in a large variety of formats but often in very high resolutions. This means the images were much bigger than needed, especially on mobile. This was contributing negatively to the Core Web Vitals (CWV), which in turn, negatively impacted their SEO.
Having worked with other solutions before, the Swimply engineering team wanted to avoid backend processing tools like ImageMagick or Thumbor, which can cost a large amount of engineering time and effort to set up and maintain. Additionally, building an image pipeline using open-source packages was just not scalable for Swimply’s needs. To focus on building its core application, the team decided to look for a solution that could process images on the fly.
"Depending on tools like imgix nowadays helps you not only save time and money, but also it helps you keep your team nimble and productive."
- Kaan Merelan, VP of Engineering
The Solution
Swimply deployed imgix in 2021 to optimize and process all of its user-generated images. Since then, it has leveraged a full suite of sophisticated features, which include the following:
- react-imgix automatically generates srcset Attributes, so different-sized images can be rendered and served based on the browser viewport width (fluid-width srcset) or device pixel density (fixed-width srcset).
- Variable q parameter adjusts the compression quality based on the device pixel ratio when fixed-width srcset is generated, so each image is served at the optimal file size and visual quality.
- fit=min resizes images to match the aspect ratio of the requested width and height while staying within the original width and height of the image.
- auto=format,compress applies best-effort compression and image-format conversion. With auto=format, images will be served in the AVIF format whenever possible. In addition to imgix, they also use lazy loading to help with the page performance as it defers offscreen images from loading until the visitor scrolls and the images enter the viewport.
The Results
With imgix, Swimply decreased the average image file size by 38% and the average image response time by 50%, from 325 milliseconds to 163 milliseconds. These performance improvements give the team the reassurance that their page weight and loading speed are optimized to handle the rapid growth in listings and images.
In addition, the team is able to improve efficiency and focus more of their attention on developing and improving the core platform product itself. While image processing and delivery are essential to their business, it’s a workflow that the team can offload with peace of mind.
"This saves us a lot of time, so we can actually spend our time on features and other things rather than worrying about whether there is a new format we must accommodate or how best to optimize our images, or how to change a wrong format. It’s very easy with imgix."
- Kaan Merelan, VP of Engineering