Cloudinary Blog

Stencil Draws on Cloudinary to Eliminate Complexity of Image Management

Stencil Draws on Cloudinary to Eliminate Complexity of Image Management

Solution

As Stencil’s founders were developing a web-based design tool for small businesses and other organizations that couldn’t afford to hire a graphic designer, they needed an image management solution that would render, manipulate, and resize images within each design. Cloudinary’s rich set of functionalities enabled Stencil to avoid the hassles and complexity of building their own image management product, while providing users with an easy-to-use means for doing image transformations and delivering final designs that are sized perfectly for their needs.

Results

  • More than 200 hours of development time saved
  • 2.5 times faster serving of derived images

Company

Stencil is a web-based graphic design platform that offers the fastest, easiest, and most efficient way to create visuals for social media, blog posts, emails, presentations and more. An alternative to more complex software, like Photoshop, Stencil allows even novices to design like a pro. Stencil’s tools enable users to create graphic design elements by adding text or applying filters to uploaded or stock images.

The Challenge: Time to Market with a Reliable Image Management Solution

When Oliver Nassar and Adam Rotman were developing their web-based graphic design platform, Stencil, they knew they didn’t want to build an image management and transformation platform themselves.

“I’ve done that in the past, and I know the kinds of problems you can run into,” said Nassar, citing storage and memory issues, managing server farms, and the time it takes to build such a complex system.

They discovered Cloudinary’s image management solution in September 2013, and began integrating it as a fundamental component of Stencil’s functionality from the start.

The Cloudinary Solution: The Foundation for Stencil Image Management

“Cloudinary is the core of our platform,” Nassar noted. The original image – whether it’s a stock photo or one uploaded by users – is retained, untouched, in the Stencil media library, which is hosted on Amazon S3. All image thumbnails shown in the Stencil library are generated by Cloudinary.

In addition, Cloudinary’s unique URL-based API enables Stencil users to manipulate those images within their own designs. “We use Cloudinary every time someone designs with an image, resizes an image within a design, rotates it or otherwise manipulates it,” he added.

Cloudinary’s image manipulation features have served Stencil well for more than five years, but recently some new Cloudinary capabilities enabled the company to offer even more design functionality to its users.

“We were building our own cropping systems and wanted to allow our users to do shapes, such as circles and squares,” Nassar said. “But we discovered Cloudinary’s ‘mask’ and ‘cutter’ feature. That wasn’t in our roadmap, but it made it so much easier to deliver custom cropping options to our users, than trying to build it from scratch ourselves.”

The Cloudinary mask feature enables users to crop only a specific part of an image, while cutter allows Stencil to upload its own PNG shapes and use the masks to feature images within those shapes.

Nassar said that Cloudinary is critical to delivering the finished designs, either as previews or downloads to users’ computers. Stencil offers a “Preview & Share” option, which generates an image link created by Cloudinary, much like Bitly would, to share the preview on social media or send to phones.
Stencil then leverages Cloudinary to resize the raw object of the finished designs and deliver it in the size and dimensions requested by the users.

The Results: Reliable, Feature-Rich Image Manipulation

From its initial implementation of Cloudinary, which was the free offering, Stencil has grown its usage, hosting more than 500,000 images and supporting more than 1.5 million transformations a month.

Nassar estimates that using Cloudinary has saved more than 200 hours of development time. In addition, Cloudinary enables the company to serve transformed images 2.5 times faster than if they were using their own servers, leading to a better user experience.

While the Cloudinary features and functionality are central to the graphic design platform and key to delivering a rich user experience, Stencil also appreciates Cloudinary’s reliability, high availability and uptime. “We’ve had fewer problems with Cloudinary than other services we use,” said Nassar, adding that any time they do have questions, Cloudinary’s support team quickly responds.

While he will occasionally check out other image management solutions available in the market, Nassar said he’s never found any reason to move from Cloudinary. “Graphic images are something we need to do perfectly, so image management is more important than AWS or Google Cloud to us. If we can’t deliver the service, then charging for it doesn’t matter.”

“Because we’re so deeply dependent on our image management solution, we need to make sure we have a top-notch service. Cloudinary is the best image resizing service in the industry. It’s the most reliable, provides the best technical support and has the richest set of features,” Nassar concluded. “We only use a small fraction of Cloudinary offers. It has everything we need, and more.”

Recent Blog Posts

Use a Displacement Map to Manipulate your Images

Cloudinary offers a wide variety of transformations that enable you to to manipulate images on the fly by using dynamic URLs. Web and mobile developers use these transformations on their images to achieve everything from optimization and responsive delivery to a variety of image improvement manipulations, with a huge collection of cool effects to choose between. One of the more robust transformations applies another image as a displacement map to manipulate your base image in a variety of ways. The displacement mapping algorithm evaluates every pixel in the image map and then displaces the pixels in the base image based on the intensity of the corresponding image map pixels.

Read more
Proud to be Named to the Forbes Cloud 100

Last night I attended a very special event honoring companies named to the annual Forbes Cloud 100. It was an incredible night spent with the founders and leaders of many companies I’ve long admired.

I’m grateful for every Cloudinarian and the work they do to support our customers, partners, and culture. We should all feel proud to be on this list and to be on an incredibly unique journey in the industry.

Read more

Three Tips for Faster, Easier Video Delivery

By Doug Sillars
Three Tips for Faster, Easier Video Delivery

Videos make websites more engaging and lively, promising audience “stickiness” and return visits. However, research studies show that slow startup or playback stalls of videos often leads to visitor loss. In fact, Akamai found that after a two-second delay, each additional second of stalling could cost you a 6-percent depletion of audience.

Read more
Rotating Or Removing Image Backgrounds With Cloudinary

As a rule, user interfaces, whether for mobile or desktop apps, encompass a significant amount of visual media (images and videos), necessitating close collaboration among designers and front-end developers. The process for building UIs entails a designer-to-developer handoff, at which the designer transfers to the developer blueprints produced with such tools as Photoshop, InVision, and Sketch. The developer then implements the blueprints with Cascading Style Sheets (CSS).

Read more