Cloudinary Blog
Easing media management hassles for startups

Since the Internet boom over a decade ago, the number of new startups established globally has grown consistently. Every year an estimated 1.35 million new tech startups are formed by enthusiastic entrepreneurs, who follow their dreams to build a sustainable and successful business.

Most entrepreneurs would agree that getting a tech startup off the ground is probably the biggest task in their journey. With minimal resources, little funding and a concept that is likely to pivot multiple times, the company’s energy and efforts are, at best, equally distributed between product development and...survival.

Many startup leaders ask themselves how they can remain focused, increase productivity, and allocate, in an optimal manner, scarce development resources to increase their chances of success?

According to research done by CDW, more and more organizations tend to abandon the traditional DIY approach of managing certain tasks in-house and instead opt for outsourcing to third parties known as managed services providers (MSPs). In fact, since 2014, when only 30 percent of startups utilized managed services, this trend has doubled YOY. Moreover, managed services are considered by startups to have great value at the very early stages of building the technological fundamentals of their products, because, as research shows, outsourcing to an MSP can actually cut company IT costs by as much as 40 percent, while doubling operational efficiency.

The main value of an MSP generally lies in its technological expertise and refined processes, which are often far superior to the startup's internal capabilities and beyond the reach of their financial capabilities.

Developing an optimized and responsive media-rich website or app requires a startup to write thousands of lines of code. In this area, Cloudinary offers many advantages as an MSP for image and video management. Startups that have implemented Cloudinary’s API at a relatively early stage of their development cycle repeatedly cite five primary challenges that Cloudinary has helped them address:

1. Time to Market

It’s quite an effort to keep up with new image formats and best practices for responsive design, while continuously supporting dozens of different screen resolutions and new devices. As developers dig deeper into various technologies, the coding gets more complicated and time consuming. Cloudinary enables you to do all of that out of the box. With simple parameters that apply complex algorithms, you can automatically deliver optimized and responsive images to every device and resolution. In addition, there are hundreds of transformation parameters that enable you to easily get the best crop for any aspect ratio, apply special effects and filters, and much more. Cloudinary's large collection of SDKs for the most popular development frameworks enables you to seamlessly integrate Cloudinary functionality with your Web or mobile application code.

All of this functionality can dramatically shorten your development cycle and accelerate release time to production. That means not only an edge on competitors, but also potentially faster time to revenues, something your investors would definitely appreciate.

Here are a few sample transformations:

Thumbnail with dynamic text and image overlays:

Ruby:
cl_image_tag("nice_couple.jpg", :transformation=>[
  {:width=>400, :height=>400, :gravity=>"auto", :radius=>"max", :crop=>"crop"},
  {:overlay=>"heart", :width=>100, :gravity=>"south", :y=>20},
  {:overlay=>"text:arial_50:Love%20U", :gravity=>"north", :y=>20}
  ])
PHP:
cl_image_tag("nice_couple.jpg", array("transformation"=>array(
  array("width"=>400, "height"=>400, "gravity"=>"auto", "radius"=>"max", "crop"=>"crop"),
  array("overlay"=>"heart", "width"=>100, "gravity"=>"south", "y"=>20),
  array("overlay"=>"text:arial_50:Love%20U", "gravity"=>"north", "y"=>20)
  )))
Python:
CloudinaryImage("nice_couple.jpg").image(transformation=[
  {"width": 400, "height": 400, "gravity": "auto", "radius": "max", "crop": "crop"},
  {"overlay": "heart", "width": 100, "gravity": "south", "y": 20},
  {"overlay": "text:arial_50:Love%20U", "gravity": "north", "y": 20}
  ])
Node.js:
cloudinary.image("nice_couple.jpg", {transformation: [
  {width: 400, height: 400, gravity: "auto", radius: "max", crop: "crop"},
  {overlay: "heart", width: 100, gravity: "south", y: 20},
  {overlay: "text:arial_50:Love%20U", gravity: "north", y: 20}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(400).height(400).gravity("auto").radius("max").crop("crop").chain()
  .overlay("heart").width(100).gravity("south").y(20).chain()
  .overlay("text:arial_50:Love%20U").gravity("north").y(20)).imageTag("nice_couple.jpg");
JS:
cloudinary.imageTag('nice_couple.jpg', {transformation: [
  {width: 400, height: 400, gravity: "auto", radius: "max", crop: "crop"},
  {overlay: "heart", width: 100, gravity: "south", y: 20},
  {overlay: "text:arial_50:Love%20U", gravity: "north", y: 20}
  ]}).toHtml();
jQuery:
$.cloudinary.image("nice_couple.jpg", {transformation: [
  {width: 400, height: 400, gravity: "auto", radius: "max", crop: "crop"},
  {overlay: "heart", width: 100, gravity: "south", y: 20},
  {overlay: "text:arial_50:Love%20U", gravity: "north", y: 20}
  ]})
React:
<Image publicId="nice_couple.jpg" >
  <Transformation width="400" height="400" gravity="auto" radius="max" crop="crop" />
  <Transformation overlay="heart" width="100" gravity="south" y="20" />
  <Transformation overlay="text:arial_50:Love%20U" gravity="north" y="20" />
</Image>
Angular:
<cl-image public-id="nice_couple.jpg" >
  <cl-transformation width="400" height="400" gravity="auto" radius="max" crop="crop">
  </cl-transformation>
  <cl-transformation overlay="heart" width="100" gravity="south" y="20">
  </cl-transformation>
  <cl-transformation overlay="text:arial_50:Love%20U" gravity="north" y="20">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(400).Height(400).Gravity("auto").Radius("max").Crop("crop").Chain()
  .Overlay("heart").Width(100).Gravity("south").Y(20).Chain()
  .Overlay("text:arial_50:Love%20U").Gravity("north").Y(20)).BuildImageTag("nice_couple.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(400).height(400).gravity("auto").radius("max").crop("crop").chain()
  .overlay("heart").width(100).gravity("south").y(20).chain()
  .overlay("text:arial_50:Love%20U").gravity("north").y(20)).generate("nice_couple.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(400).setHeight(400).setGravity("auto").setRadius("max").setCrop("crop").chain()
  .setOverlay("heart").setWidth(100).setGravity("south").setY(20).chain()
  .setOverlay("text:arial_50:Love%20U").setGravity("north").setY(20)).generate("nice_couple.jpg")!, cloudinary: cloudinary)

Auto padding with predominant color border:

Ruby:
cl_image_tag("nice_couple.jpg", :width=>400, :height=>400, :background=>"auto:predominant", :crop=>"pad")
PHP:
cl_image_tag("nice_couple.jpg", array("width"=>400, "height"=>400, "background"=>"auto:predominant", "crop"=>"pad"))
Python:
CloudinaryImage("nice_couple.jpg").image(width=400, height=400, background="auto:predominant", crop="pad")
Node.js:
cloudinary.image("nice_couple.jpg", {width: 400, height: 400, background: "auto:predominant", crop: "pad"})
Java:
cloudinary.url().transformation(new Transformation().width(400).height(400).background("auto:predominant").crop("pad")).imageTag("nice_couple.jpg");
JS:
cloudinary.imageTag('nice_couple.jpg', {width: 400, height: 400, background: "auto:predominant", crop: "pad"}).toHtml();
jQuery:
$.cloudinary.image("nice_couple.jpg", {width: 400, height: 400, background: "auto:predominant", crop: "pad"})
React:
<Image publicId="nice_couple.jpg" >
  <Transformation width="400" height="400" background="auto:predominant" crop="pad" />
</Image>
Angular:
<cl-image public-id="nice_couple.jpg" >
  <cl-transformation width="400" height="400" background="auto:predominant" crop="pad">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Height(400).Background("auto:predominant").Crop("pad")).BuildImageTag("nice_couple.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(400).height(400).background("auto:predominant").crop("pad")).generate("nice_couple.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setHeight(400).setBackground("auto:predominant").setCrop("pad")).generate("nice_couple.jpg")!, cloudinary: cloudinary)

Apply effect ‘cartoonify’:

Ruby:
cl_image_tag("nice_couple.jpg", :width=>400, :gravity=>"auto", :height=>400, :effect=>"cartoonify", :crop=>"fill", :fetch_format=>:auto)
PHP:
cl_image_tag("nice_couple.jpg", array("width"=>400, "gravity"=>"auto", "height"=>400, "effect"=>"cartoonify", "crop"=>"fill", "fetch_format"=>"auto"))
Python:
CloudinaryImage("nice_couple.jpg").image(width=400, gravity="auto", height=400, effect="cartoonify", crop="fill", fetch_format="auto")
Node.js:
cloudinary.image("nice_couple.jpg", {width: 400, gravity: "auto", height: 400, effect: "cartoonify", crop: "fill", fetch_format: "auto"})
Java:
cloudinary.url().transformation(new Transformation().width(400).gravity("auto").height(400).effect("cartoonify").crop("fill").fetchFormat("auto")).imageTag("nice_couple.jpg");
JS:
cloudinary.imageTag('nice_couple.jpg', {width: 400, gravity: "auto", height: 400, effect: "cartoonify", crop: "fill", fetchFormat: "auto"}).toHtml();
jQuery:
$.cloudinary.image("nice_couple.jpg", {width: 400, gravity: "auto", height: 400, effect: "cartoonify", crop: "fill", fetch_format: "auto"})
React:
<Image publicId="nice_couple.jpg" >
  <Transformation width="400" gravity="auto" height="400" effect="cartoonify" crop="fill" fetchFormat="auto" />
</Image>
Angular:
<cl-image public-id="nice_couple.jpg" >
  <cl-transformation width="400" gravity="auto" height="400" effect="cartoonify" crop="fill" fetch-format="auto">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(400).Gravity("auto").Height(400).Effect("cartoonify").Crop("fill").FetchFormat("auto")).BuildImageTag("nice_couple.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(400).gravity("auto").height(400).effect("cartoonify").crop("fill").fetchFormat("auto")).generate("nice_couple.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(400).setGravity("auto").setHeight(400).setEffect("cartoonify").setCrop("fill").setFetchFormat("auto")).generate("nice_couple.jpg")!, cloudinary: cloudinary)

2. Scarce Resources

Every dollar counts, particularly for a startup. Few startups have unlimited resources and most technology departments are stretched thin. More startups are choosing to outsource back-end functions or complex, rapidly changing technologies so they can free up their in-house developers for projects that will further advance their core objectives and product innovation, rather than adding resources and spending time and money on recruiting.

3. Scalability, Availability and Support

We all know that in life there’s no second chance for a first impression. Working day and night to build your startup, sweating to convince a new prospect to join your service and then letting them down with a service outage or server crash - this may be one of the biggest nightmares for a startup founder struggling to build a relationship of trust and confidence with clients. For example, Build.com selected Cloudinary to replace its in-house legacy system and support its global expansion and unexpected traffic spikes. With Cloudinary, Build.com has eliminated many of the challenges associated with growth, and now their DevOps can even enjoy a few more hours of sleep...

4. Task Prioritization

How often does your product manager come up with a feature request, only to have it rejected due to a bumped development pipeline? How much time does your head of engineering spend defining the technical specs for these requests and developing a feature that is, after all efforts, only a compromise? Cloudinary provides immediate access to a cutting-edge platform with advanced features available out of the box, such as automatic format selection according to the end-user browser, smart cropping, intelligent quality selection and automated responsive images that puts early-stage startups at the same high-end level of image and video processing as some of the largest and reputable companies out there.

5. Site/App Performance

Reaching an audience that is spread globally requires a high-performance content delivery network (CDN) and efficient caching rules to match (local) performance challenges. While many CDNs exist, only a few have globally deployed local edges that significantly accelerate the visual content delivery. These powerful CDNs, such as Akamai, Cloudfront or Fastly, are not always affordable for early-stage startups and require a team of experts to manage properly. With Cloudinary, startups of any size can immediately enjoy super-fast delivery through these superior CDNs, as they are already available with the Cloudinary platform and seamlessly integrated with Cloudinary’s sophisticated media optimization features.

Beyond CDN delivery, maximizing performance means you must always make sure to deliver the smallest file size possible for the required visual quality of every image. Doing this requires sophisticated optimization algorithms. Cloudinary's automatic quality and automatic format parameters do exactly that. Just add those parameters to any image you deliver to minimize file size, often decreasing file size by well over 100 percent without any visible loss of quality. Cloudinary also provides in-depth usage reports with actionable analysis that can help you further optimize, with a focus on your heaviest and most accessed images.

Want to check the current performance of the images on your own Web pages and find out how much their performance can improve by implementing the above-mentioned optimization options? You can run a free analysis with the Website Speed Test Image Analysis Tool.

With out-of-the-box optimization features and integration with multiple CDN solutions, Cloudinary provides a great head start to startups, enabling them to boost their website or app performance, improve SEO ranking and provide an optimal experience to users across any browser, device or bandwidth.

webspeedtest

Conclusion

As visual assets become an increasingly significant part of each website or mobile app, and as the technology evolves rapidly, hand-in-hand with the rise of user-generated content, the challenges tech startups need to overcome are fierce. Utilizing a third-party cloud-based technology vendor has become more accepted because this approach offers many advantages for companies of all sizes, with specific benefits for startups.

Cloudinary eliminates the hassles and headaches of developing, maintaining and scaling an in-house image and video back-end platform, providing immediate access to sophisticated features and relieving the startup’s development bottleneck.

One of the great strengths of most startups is their propensity to quickly get new projects off the ground. With Cloudinary's simple integration and straightforward setup, it takes only minutes to get a staging environment up and running. Just sign up for a free account, download your choice SDK, take a look at the docs, and hand over all those media management hassles to Cloudinary.

Recent Blog Posts

Reimaging DAM--The Next-Gen DAM for Marketing & Dev

There are great digital asset management (DAM) products out there for uploading, storing, managing, organizing, and sharing digital assets. With Cloudinary's new end-to-end DAM solution, you can also upload and manage your assets efficiently, but the journey doesn't end there. It continues on to the development and delivery stages, so that your assets can be seamlessly manipulated, optimized, and delivered to create an engaging user experience that will in turn, increase conversion and loyalty.

Read more
Integrating Cloudinary with Forestry’s Media Library

At Forestry, we believe that there is a bright future for static HTML sites built with tools like Jekyll and Hugo. These tools can create sites that run well, and are easy to host and maintain, because they don’t require any server-side code.

Read more
Video Optimization With the HTML5 <video> Player

Lack of experience and compression knowhow can cause significant user-experience problems. For instance, on a major retail site, I recently ran into a 48 MB video-hero banner. Pulling out the video and encoding it as an H.264 MP4 reduces the size to 1.9 MB. So, despite the desire for more video content, developers have not yet caught up to best practices. How do we get the best of both worlds without creating a disaster like the one above?

Read more
Build a Facial Emotion Recognition Based Video Suggestion App

Developers are always looking for new and creative ways to deliver content that resonates with the way users feel. Often using the latest technical innovations the market has to offer such as Artificial Intelligence (AI) and Machine Learning (ML). What better way to demonstrate innovative uses of these technology in a consumer market than capturing expressions from your users and then serving content based on that expression!

Read more
Improve Customer Data Protection with GDPR Implementation

TL;DR

Yay! We've done it! Gold-Star for us! We've talked with all the people, made all the changes, paid all the lawyers and checked all the boxes. GDPR? ✅Done!

Not so fast. Of course, conforming to the GDPR regulations introduced in Europe is just the beginning. This is a process and a state of mind that must become part of our long-term cultural ethos.

Read more