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", fetch_format: "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" fetch_format="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

Give your mobile app a boost: pre-upload image processing

As a mobile developer, enabling users to upload images and share them with other users is a very common requirement. When developing those capabilities, we need to take into account that most users won't think twice about uploading the massive images that their high-resolution mobile cameras capture. Those huge files are not only overkill for on-screen display, but can also cause significant slow downs in upload and delivery times. And of course those same users wouldn't think twice about complaining or abandoning our app if their overall user experience wasn't smooth and fast.

Read more
Cloudinary Helps Hinge Keep Modern Romance Real

To create a profile, Hinge users initially had to connect their Facebook and/or Instagram accounts to the app, which would import images to the users’ Hinge profiles. Hinge stored those images with a URL that expired after two months, unless the user logged into the app regularly. This aspect of the app was frustrating for users because the photos would become inaccessible for others to view.

Read more
Building a Smart AI Image Search Tool Using React

In our first article, we built a part of the front-end of our image search tool with the focus mainly on the parent App.js stateful component.

In this article - part two of a series - we will continue developing a Smart Search App, in which users can search for content in an image, not just the description. The app is built with React for UI interaction, Cloudinary for image upload and management and Algolia for search.

Read more
Engineering Better Google Mobile Search Ranking Through Image Optimization

Search ranking algorithms utilize various signals to determine how websites rank against each other on the internet either via desktop or mobile searches. One such signal is Site speed. In 2010, Google introduced Site speed as a signal in their search ranking algorithms. However, this only applied to web search ranking. Starting in July 2018, site speed will be a ranking factor of mobile searches. This change is another signal that developers must wake up and focus on improving the performance of their applications, since speed and load time affects a user’s experience of your page.

Read more