Cloudinary Blog

Hipcamp Heads Outdoors to Optimize Images, Improve Page Load Time With Cloudinary

Hipcamp Optimizes Images and Improves Page Load Times With Cloudinary

Solution

When creating a website that allows campers to discover great destinations, Hipcamp put a strong emphasis on featuring high-quality images that showcased the list of beautiful locations, regardless of whether users accessed the site on a desktop, tablet, or phone. Since 2015, Hipcamp has relied on Cloudinary’s image management solution to automate cropping and image optimization, enabling instant public delivery of photos, automatic tagging based on content recognition, and faster loading of webpages. In addition, Hipcamp was able to maintain the high standards it holds for the look and feel of its website.

Results:

Half a second page load time on desktop

Faster time to market due to reduced dependencies

Improved SEO for images

Company

Hipcamp has a mission of getting more people outside, and inspiring the next generation of individuals who are passionate about exploring and protecting our lands. This starts with access, both to land, and the information about where they can experience the land through camping. Hipcamp takes the complexity out of planning camping trips, making it quick and easy to find and book campsites in a variety of locations. Hipcamp’s site features unique camping experiences at more than 7,800 parks, 16,300 campgrounds and 346,200 campsites across the United States, including ranches, vineyards, and public parks.

The Challenge: Managing Thousands of Images and Delivering in High Quality

Across All Viewports Creating a visually engaging site is of great importance for Hipcamp, which likens itself to Airbnb for campers. “Images are mission critical to the Hipcamp site, showing campers what they can find at private camping areas, public campsites, state parks, and national forests,” said Pierre Alvan, one of Hipcamp’s senior software engineers.

To populate its website with images, Hipcamp relies on campsite hosts to upload images of their properties and campers to share pictures of their favorite locales. The company also has a team of photographers who go around the country taking professional photos of the featured destinations.

“We maintain a very special imagery philosophy in terms of digital content quality. We have guidelines for our photographers, which are attached to the way we like to present photos on the website,” added Alvan. These high standards caused some challenges when dealing with photos of varying quality, size, and format, uploaded by campers and property owners. Developers had quite a task to individually reformat, crop and resize each photo to meet Hipcamp’s quality standards. To ensure these images appeared correctly, regardless of how the visitors were viewing them, developers had to make multiple versions of images, designed specifically for desktops, tablets, or phone viewing.

But with a team of only 11 engineers, who work on the full stack, managing images could be a full time job, leaving them less time to focus on continually innovating the company’s offerings to its users.

The Cloudinary Solution: Automating and Maintaining Consistent Quality

Using Cloudinary’s upload widget, Hipcamp developed a dashboard through which hosts can upload photos for their listing pages. A Cloudinary JS plug-in enables uploads of 12 photos at a time by hosts and campers. When they upload an image, it is contained within the experience of that campsite listing, which enables the system to easily assign a Cloudinary ID to the photo that is internal to the Hipcamp system. From there, developers can link photos to what it represents on the website.

For the production shoots done by professional photographers, Hipcamp relies on a Ruby on Rails app, using Carrier Wave, that enables them to upload hundreds of photos at one time. Whether user generated or delivered by a professional, Hipcamp wants to make sure images have a consistent look and feel across the site. “We have a list of the different formats we want to keep, and Cloudinary serves any format instantaneously, like a live transformation,” said Alvan. “We like to keep our formats consistent across the site – one gallery size, one carousel – so our site doesn’t look messy.”

Cloudinary enables Hipcamp to serve JPEG or WebP versions, using the f_auto functionality to determine the best version to serve based on the web browser being used by visitors. Hipcamp also controls the quality of the photo, using Cloudinary’s q_auto feature, for image optimization, ensuring that all pages load fast and deliver the highest quality image possible.

Cloudinary helps Hipcamp smartly crop photos to appear exactly how it wants within a frame. “We generally show a 2x bigger photo than the container, to account for retina displays, then apply a 40 percent reduction,” Alvan added.

The Results: Streamlined Image Optimization and Fast Page Load Speeds

Hipcamp developers have saved hundreds of hours managing and transforming the 3.8 million of images on the site since implementing Cloudinary.

“I’ve worked with other solutions where every design or user interface change impacts how images are served, and it’s a pain to implement,” said Alvan. “Cloudinary is definitely a big time saver".

Cloudinary makes it intuitive for the engineers to store and access images, and add new formats, such as WebP, which has helped to reduce file sizes even more. “WebP is not easy to implement,” he noted, “We would not have been able to do it, if it weren’t for Cloudinary’s f_auto functionality.”

Lastly, the ability to auto-tag images based on their content allowed Hipcamp to implement a dynamic file naming system based on those tags. Recent image files served on Hipcamp are named after what the photo represents; tent oceancliff.jpg is a much better file name for SEO than a random character string. The fact that Cloudinary now offers image recognition through Google Vision, Amazon Rekognition and Imagga, helped Hipcamp streamline this process.

Recent Blog Posts

Auto-Generate Video Previews with Great Results Every Time

If you are an avid YouTube viewer or a Netflix binger, you might have noticed some fascinating changes in their latest preview thumbnails. They sure are attention grabbing, aren’t they?

Video previews are becoming more and more popular, not the least because they entice viewers, attract clickthroughs and, more often than not, gain a happy and loyal audience. Problem is, the task sounds like an art in itself. Just how can you go about creating appealing video previews without having to rely on movie professionals? Have you ever wished that you could quickly create video previews like those on YouTube and Netflix, but still rest assured that they'll include the good stuff?

Read more
New Image File Format: FUIF: Why Do We Need a New Image Format

In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.

Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.

Read more
 New Image File Format: FUIF:Lossy, Lossless, and Free

I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.

Read more