Cloudinary Blog

TedsVintageArt.com Automates Generation of Captivating Product Images on Cloudinary

TedsVintageArt.com Automates Generation of Captivating Product Images on Cloudinary

At TedsVintageArt.com, we digitally restore historic maps and sell their art prints on multiple platforms, such as Amazon, Etsy, eBay, and Houzz. As our operations ramped up years ago, it took an inordinately long time to generate custom images for our products. Plus, since we sell art, it behooves us to produce multiple high-quality images for each print, which was another time-consuming task.

Instead of just creating a few default images for promotion on marketplaces and social media, we opted to optimize all the images. That meant a total of over 20 images for cropping and dimension changes—a labor-intensive and time-consuming undertaking if done manually. Automation was the obvious answer.

After spending a few weeks mapping out a new workflow and researching solutions, we picked Cloudinary as the partner for automation and as a host for our media operations. That turned out to be an excellent decision.

Start With One Beautiful Image

Our major focus is to digitally restore old map prints. As a start, we manually remove tears, markings, creases, or other discolorations on Photoshop, after which the designer uploads the final, high-resolution image to a Google Drive folder, where magic happens.

Automate, Organize, and Deliver

Three vendors serve as the backbone of our automation process: Airtable, Zapier, and Cloudinary.

Airtable and Zapier

Airtable, a versatile tool that integrates with most cloud-based web apps, stores our products’ metadata, images, and nearly 80 other data points.

Zapier performs several automation tasks, such as uploading the main image to Cloudinary, grabbing image data from there, adding them to Airtable, and creating product titles and descriptions. Read more here.

Cloudinary

Cloudinary specializes in image hosting, transformation, and delivery.

Create Multiple Images Through Transformation

By leveraging Cloudinary’s transformation capabilities, we have created templates for automatically generating multiple images for each product—with only one image as the starting point. Here are the templates:

  • A main map image mocked up in a black frame set against a brick wall
  • A main map image with no background
  • Five map images that, through custom zooms, show a high level of detail
  • Variations of product images optimized for the largest display on Amazon, Etsy, eBay, and Houzz
  • An addition of a Ted’s Vintage Art watermark to all generated images
  • A resized version of our high-resolution image, custom-“stretched” to perfectly fit into frames for an 8x10, 12x18, 18x24, or 24x36 map

Transform Optimized Images for Social Sharing

An initial challenge we faced was that different social-media sites mandate different default image sizes for feeds. Failure to share images in the proper dimensions often results in no display or distorted images. So, a separate version of each image for Twitter, Facebook, Instagram, Pinterest, and Reddit becomes necessary.

Cloudinary enables us to custom-transform and resize images according to the exact dimensions that work best for each of the social-media channels. Afterwards, we store within Airtable the URLs for all the generated image variations.

Host High-Resolution Images

Cloudinary is perfect for hosting large images for fast loading.

Before adopting Cloudinary, we heard from many users that even though they loved our maps, they couldn’t zoom in close enough to see the names or other details. With Cloudinary, we were able to offer the ability to click and view a deep-zoom version of map prints, enabling users to navigate around, zooming in and out for all the nuances.

Another problem we encountered was hosting the large maps, some approaching 100 MB in size, for fast downloads. What a pleasant surprise it was to discover that Cloudinary can host high-resolution images and speedily display them—along with zooming!

We are extremely happy with Cloudinary, which is saving us over 60 work hours per week, freeing us up to focus on growth projects, such as marketing and sourcing. Best of all, it took less than a weekend to set up an integrated workflow with Cloudinary. Simply amazing!

Recent Blog Posts

Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more
How Quality and Quantity can go Hand in Hand

When it comes to quality versus quantity, you’ll often hear people say, “It’s the quality that counts, not the quantity”. While that’s true in many situations, there are also cases where you want both quality and quantity. You may have thousands of images on your website and you want them all to look great. This is especially important if your website allows users to upload their own content, for example, to sell their own products or services. You don't want their poor quality images to reflect badly on your brand.

Read more