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

Hipcamp Optimizes Images and Improves Page Load Times With Cloudinary

When creating a website that allows campers to discover great destinations, Hipcamp put a strong emphasis on featuring high-quality images that showcased the list of beautiful locations, regardless of whether users accessed the site on a desktop, tablet, or phone. Since 2015, Hipcamp has relied on Cloudinary’s image management solution to automate cropping and image optimization, enabling instant public delivery of photos, automatic tagging based on content recognition, and faster loading of webpages. In addition, Hipcamp was able to maintain the high standards it holds for the look and feel of its website.

Read more
New Image File Format: FUIF: Why Do We Need a New Image Format

In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.

Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.

Read more
 New Image File Format: FUIF:Lossy, Lossless, and Free

I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.

Read more