Posts by Nadav Soferman

Overlaying text on images is a versatile and effective way in which to spotlight captions, names, copyright watermarks, and such. You can also overlay text over dynamic images (advertisement banners, coupons, greeting cards, business cards) in e-commerce-oriented emails. Our customers frequently ask about how to dynamically overlay text on…

Updates since publication: Following Google’s shutdown of its legacy Google+ API in March 2019, the Google+ (gplus) option is no longer available. Following changes made by Instagram in June 2020, the Instagram (instagram_name) option is no longer available. Many modern web and mobile applications include integral social aspects as…

Adding watermarks to images and videos, a common practice at major news outlets and blogs, ensures that no one can circulate those media without owner authorization and that no one takes undue credit for their creation. Watermarks are also a must for stock-photo sites that offer previews of images and…

Every image is unique, so are website visitors. In a perfect world, we would adapt images to be “just right” for all users, i.e., perfectly cropped with responsive dimensions, correct encoding settings, and optimal quality in the most suitable format. See this example of a photo of a cat:…

Short videos of animated GIFs are spreading like wildfire around the web, especially in media and news sites, and people frequently share animated GIFs on social apps. However, because those GIFs are not optimized, their sizes are huge, consuming heavy bandwidth and slowing down page loads. Also, resizing and…

Images. More likely than not, your web or mobile app is filled to the brim with images, which, from graphical appeal to size and access times, figure prominently in the browsing experience. Image appeal could motivate visitors to return and, in the case of e-commerce, become customers.   No…

Modern websites and mobile apps frequently showcase images of various dimensions, sometimes varying the graphics, resolutions, and look and feel for different devices (desktop, mobile, etc.); and revamping the graphics with upgrades. A key benefit Cloudinary offers is an easy, intuitive, and flexible process of modifying images. A case in…

Videos in web sites and apps are starting to catch up with images in terms of popularity and they are a constantly growing part of the media strategy for most organizations. This means bigger challenges for developers who need to handle these videos in their web sites and mobile…

As developers of web apps, you often need to let users upload files to your app – mainly images and videos. You want the upload interface you provide to offer an intuitive user experience, including the ability to drag & drop multiple media files, preview thumbnails of selected images and…

The number of different devices available and their potential screen resolutions keep increasing, and to support this wide range of resolutions and devices, responsive website design is now the standard. A website’s markup must adapt itself to look perfect on all the different devices and in various resolutions, pixel densities…

As the end of 2015 approaches, we wanted to share a quick summary of Cloudinary’s accomplishment this year and some of our plans for next year. We couldn’t possibly do this without including an image transformation example! That’s our hat trick in the title 🙂 Looking back at 2015 2015…

Shortcut to Cloudinary’s solution A fresh new lossless image format has recently been introduced. It is called FLIF, which is an acronym for Free Lossless Image Format. According to the creators of FLIF, it is supposed to significantly outperform the other image…

As a website/app developer or owner, you’ve undoubtedly experienced your fair share of glitches and mishaps when it comes to users or site visitors sharing your content. Many outlets such as news and media sites, social networks, or eCommerce sites include the option to “like” or “share” content such as…

The Internet was abuzz last week after the announcement of Google’s new logo. What caught our eyes more than the artistic changes was this sentence on Google’s blog: “building a special variant of our full-color logo that is only 305 bytes, compared to our existing logo at ~14,000 bytes”.

Last month I was invited to speak at Daho.am, Munich’s developers conference. This conference was organized by Stylight, a very successful fashion technology startup.  Stylight signed up for a free Cloudinary account about 3 years ago and similarly to Cloudinary back then, Stylight were quite a young startup.

They say that a picture is worth a thousand words. For modern websites, a video surely takes the visual impact to a whole new level. Nowadays, people enjoy the amazing capability of shooting videos with smartphone cameras that easily fit in their back pockets and are accessible nearly everywhere. Modern…

Rails is a great web development framework that was recently considered the coolest framework around. While other frameworks have gained popularity over time, Rails remains one of the most popular web development frameworks to date.. Cloudinary’s Rails community includes active Ruby on Rails developers who use Cloudinary’s APIs to streamline…

Update – April 2016: The add-on described in this post is no longer available since ReKognition terminated their services. However, all features described here are still available via a different and even better add-on by Microsoft. See Facial attribute detection with Microsoft’s Face API and the Advanced facial…

Social networking sites allow users to upload images or other types of files that are immediately available to other users via news feeds or notifications. In some cases, attackers can directly spread infected files, but more commonly, they leverage the viral effect and the fact that users are simply…

It is common for e-commerce, media, and news sites to remove image backgrounds or make them transparent in order to place the main element of the image on either white or color backgrounds. The final result better integrates an image into a site or specific page’s graphic design. For example,…

Front end developers may want to combine multiple images into a single image. For example, when creating and adding watermarks to stock photos, adding shapes or badges, preparing content for print (e.g. placing a logo on a t-shirt or a mug), adding a caption, and so on. Multiple images can…

Image URLs tend to appear as a long list of random characters that are not intended for viewers and are not very useful to search engines. Concise and meaningful image file names are better for search engines to extract information about an image, therefore supporting your site’s SEO ranking. Often…

Photos today can be easily edited by means of resizing, cropping, adjusting the contrast, or changing an image’s format. As a result, new images are created that are similar to the original ones. Websites, web applications and mobile apps that allow user generated content uploads can benefit from identifying similar…

Many websites and mobile applications support user uploaded images and other files. This requires a service to receive and process the uploads, store them safely, transform them to match the website or app’s design, and deliver them to your users. This also requires a user interface within your site or…

Many websites and mobile applications with user generated content allow you to upload all kinds of files. Images, PDFs, and Microsoft Office files, such as Word, Excel, and PowerPoint are all common types of uploads. Web or mobile developers may want to build   applications that allow users to download PDFs,…

Web development was much simpler only a few years ago, when we were building HTML pages that included images and photos, and all elements shared the same resolution units. If for example, you aimed at a standard 1024×768 screen, you knew these were exactly the number of pixels available for…

If your web or mobile application involves user-generated content, you may encounter users who upload inappropriate photos or images to your application. These could be images which offend other users – adult content, violent photos, etc. – or images which cause your site to violate laws or regulations. There are…

Handling user uploaded images and other files on your website can be a time consuming task. As images grow larger, uploading and processing them becomes more and more complex. For example, common upload issues for images and other files may relate to browser limitations, server configuration issues, memory and…

Fashion isn’t something you’d expect to repeat itself in the technology world – technology advances quickly and hardly ever circles back. But where animated GIFs are involved, it seems like the 90s are here again. Animated GIFs are everywhere, and not only on strange, cheesy web sites – they’ve become…

There are many options to consider when allowing a user to upload an image to your website or mobile app. You might wish to limit the size and format of the uploaded images. You may want to apply specific transformations to the images, such as cropping, resizing and adapting the…

Image optimization is an important step to reducing page load times, improving user experience and reducing bandwidth costs. When using the JPEG image format, which is best used for photos, the most common optimization is controlling the JPEG quality level. By lowering JPEG quality, say to 90%, 80% or…

Many websites and mobile apps today allow their visitors to share their own photos. Users upload their profile images to dating sites, photos of their personal belongings to second hand market websites and real estate billboards. Users share their personal photos on social networks, and upload images to their favorite…

It’s a common challenge in many mobile and web applications: how do you allow users to upload their own images, while automatically adapting these images to a fixed graphic design? Cropping images at scale A classic example is a user uploading a profile picture, but instead of providing a headshot,…

There are many ways to optimize PNG files, but one optimization which is commonly overlooked involves the PNG’s transparent background. If you’ve chosen to use PNGs instead of a more compact format like JPG, mainly for the PNG’s support of a transparent background (alpha channel), read on…

Thumbnails of website screenshots are a common visual design element. Search engines, such as Google, display webpage screenshots in their search results. Social news sites, such as DZone, embed screenshot thumbnails of shared pages. Bloggers and technology news sites embed screenshots of company websites and online services they discuss in…

Website developers and administrators today tend to find themselves managing quite a few files, images and other media assets. Whether you upload content to your web application yourself, allow your users to upload files or have files imported from content partners, you’ll need to handle the upload process, storage, and…

The modern world of mobile applications and dynamic websites is incredibly rich with images.    Major online newspapers are overhauling their UI design with wall to wall photographs. Social network feeds are chock-full of shared pictures, and eCommerce solutions are constantly improving their viewing widgets with additional product images.  …

Website owners and application developers know that analytics and usage monitoring tools play a major role in growing their products and making them effective, and highly tuned to their customers needs. We all use Google Analytics (or similar tools) to check how our visitors use our site, the path they…

Online advertising is one of the most popular tools to drive traffic to your website and mobile application in a consistent and cost-effective manner. Online text ads play a very big role in this strategy. Building an effective ad campaign usually involves the write-up of different textual content to perfectly…

Modern image compression techniques have had a large impact on our lifestyle. Digital cameras can save thousands of high-quality photos on a single memory card, smartphones can quickly share high resolution images on-the-fly, and websites and mobile apps can show rich media quickly. All of this just couldn’t have worked…

Two decades ago websites had such a simple usage flow. Web servers returned complete HTML pages and each user action required that a new HTML page be reloaded from the server. Later on Ajax joined the game allowing dynamic updating of specific web page fragments via simple Javascript requests to…

Do you like to show your photos exactly as they were taken or do you usually tweak them a little to get that extra punch? Just a few years ago, almost all photos were displayed and shared as-is. Image transformations and improvements were left to the Photoshop experts. Then came the…

Cloudinary’s image management service is used by thousands of world-wide websites and mobile apps. For many of our clients, Cloudinary has become a central, mission-critical component used for managing image uploads, transformations and delivery.   This is why we’ve built Cloudinary from the ground up to be a very robust…

Call us prejudice, but as a hardcore Linux guys, the name Microsoft always caused us to flinch a little. That was our initial reaction when we were approached by the Azure team. We have been integrating Cloudinary with many PaaS providers to make our platform as accessible as possible, and…

Modifying an image opacity so the image is semi-transparent is a common requirement when implementing modern graphics design. Reducing image opacity allows background images to feel less dominant. Reducing opacity also allows layering of multiple images one on top of the other, an important step when adding watermarks, badges and…

In a previous post we’ve shown how you can easily manage your Ruby on Rails image uploads with CarrierWave and Cloudinary. Many of our Rails readers found this very useful, as it depicted a powerful image management solution that is trivial to integrate – use the popular…

Graphic designers often contemplate whether to add borders to their website elements. The decision of whether to add borders around frames, buttons and text elements really depends on the feeling the designer is trying to convey through the design. In this blog post we wanted to tell you about a…

When images are involved, web developers have a large set of relevant tools at their disposal. You can display images in your web sites and mobile applications. You can transform and transform such images using image editing and transformation software or cloud-based solutions like Cloudinary. But there…

When developing a website you are required for a somewhat tedious work of handling dynamically uploaded content. The constantly added content includes images uploaded by your users and content administrator, user documents and other files.   As a developer, you’ll be responsible for adding integration of attachments to your application’s…

After our recent, somewhat technical posts, we wanted to lighten things up with Cloudinary’s latest (cool) semantic image transformation feature. Keeping people privacy in photos by automatically blurring their faces.  Pixelate Effect We previously detailed in length about Cloudinary’s cloud-based API for applying effects…

Where do you host all of your website’s assets – still on your own web servers? In modern websites, images alone contribute to more than 50% of a website’s load time, and recent studies show that even a 1 second delay in a page’s load speed can result in more…

Websites, blogs and web applications regularly embed video content from various video service providers such as YouTube and Vimeo. Videos are usually depicted using image thumbnails, tweaked to fit the graphics design of the website. When a video thumbnail is clicked, the actual video content starts playing. In this…

As a website owner, you know the importance of having a robust web-based service. When a downtime may result in lost revenues, you strive to keep a highly available online solution. A major part of having a robust service is a good contingency plan, that ultimately depends on regular backups…

Most web sites enrich their graphics by embedding pictures and photos of their model entities – users, articles, movies, etc. The graphic design of such web sites assumes that all these entities have associated pictures, otherwise the result will not look as satisfactory as intended. The graphics designer will not…

If you heard of Cloudinary before, you probably already know how useful Cloudinary is with managing all your dynamically uploaded images, transforming these to their required dimensions, performing image optimization to ensure files are have the optimal quality and parameters, and delivering them through a fast CDN.

UPDATE (Jul 2018):   The information in this blog post was relevant and value at the time of publishing. However, multiple subdomains is no longer necessary now that Cloudinary delivers via HTTP/2 and it can actually degrade the performance of your site.

When we conceived Cloudinary, our vision was to help with website asset management (images, Javascripts, CSS, etc.) in the cloud, easily and effectively. Our initial focus was on image management in the cloud since we’ve felt that this particular area was significantly underdeveloped. We figured that every web developer would…

Cloudinary provides many built-in image resizing and cropping options: filling or fitting to required dimensions, scaling image up or down, cropping to a thumbnail, and so forth. When cropping you’ll need to specify an anchor, or gravity. The image crop can be anchored to the image’s center, top, left, etc.

Twitter and Facebook. One adds rounded corners to their user’s profile pictures. The other doesn’t. Can you recall which service is the one adding rounded corners? At the moment, the right answer is Twitter, though if you guessed Facebook you weren’t far off. Both services have on-and-off relations with rounded…

When we set to develop Cloudinary’s Rails integration Gem, it was obvious to us that we’ll base it on CarrierWave. Here’s why. Photos are a major part of your website. Your…

Cloudinary’s roots go back to when we needed to embed users’ uploaded images and profile pictures for web projects we’ve developed. We had to show people and faces of users in various dimensions and perspectives, and the process proved cumbersome. These days, Cloudinary…