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=>{:font_family=>"arial", :font_size=>50, :text=>"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"=>array("font_family"=>"arial", "font_size"=>50, "text"=>"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': {'font_family': "arial", 'font_size': 50, 'text': "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: {font_family: "arial", font_size: 50, text: "Love%20U"}, gravity: "north", y: 20}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(400).height(400).gravity("auto").radius("max").crop("crop").chain()
  .overlay(new Layer().publicId("heart")).width(100).gravity("south").y(20).chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(50).text("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: new cloudinary.Layer().publicId("heart"), width: 100, gravity: "south", y: 20},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(50).text("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: new cloudinary.Layer().publicId("heart"), width: 100, gravity: "south", y: 20},
  {overlay: new cloudinary.TextLayer().fontFamily("arial").fontSize(50).text("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={{fontFamily: "arial", fontSize: 50, text: "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(new Layer().PublicId("heart")).Width(100).Gravity("south").Y(20).Chain()
  .Overlay(new TextLayer().FontFamily("arial").FontSize(50).Text("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(new Layer().publicId("heart")).width(100).gravity("south").y(20).chain()
  .overlay(new TextLayer().fontFamily("arial").fontSize(50).text("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)
Nice Couple

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)
Nice Couple

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)
Nice Couple

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

Video Manipulations and Delivery for Angular Video Apps

On social media, videos posted by users constitute a significant amount of the content appeal on those platforms. From upload to manipulation to delivery, a smooth, efficient, and effective pipeline for the posting process is mandatory to ensure consistent user sessions and their steadily increasing volume. However, building such an infrastructure is a complex, labor-intensive, and problem-prone undertaking.

Read more
Green Screen Queen: Dynamic Video Transparency Fit For Royalty

If you were reading your social media or news feeds on or around June 11 this year, no doubt you came across your fair share of posts about Queen Elizabeth and her outfit-color faux pas. For her 90th birthday, she chose a solid neon green suit, and it didn't take long for Photoshop fanatics to suggest alternative designs for the Queen's green-screen threads.

Read more
Content-Aware Automatic Cropping for Video

Delivering videos according to the aspect ratios defined by social media for multiple devices and platforms is a growing challenge. The continuously rising volume of vertical videos and the corresponding increase in video traffic on mobile devices (now up to 57% of online videos watched) have only exacerbated the situation, with no letup in sight.

Read more
Use a custom function in the image delivery pipeline

Cloudinary offers a wide array of image manipulations and effects to apply to images as part of our image-processing pipeline, helping to ensure that your images fit the graphic design of your website or mobile application. Cloudinary is an open platform, and you can use our APIs, Widgets and UI to build the media management flow that matches your needs.

Read more
OpenText™ TeamSite – Cloudinary Plugin

Tired of depending on other teams or software to create assets in multiple sizes for your responsive web site?

Does importing asset files into TeamSite slow down your web content publishing?

Klish Group is pleased to introduce the OpenText TM TeamSite – Cloudinary connector. Customers of the OpenText TM TeamSite web content management platform can now browse and select images in the same way they always have. Authors can just browse and select the image they want to use and Cloudinary will automatically deliver it in the optimal format and quality to the customer requesting it.

Read more