eCommerce is a dynamic business. Visitors are constantly checking sites for the best deals or their favorite products, adding to their wishlists and exploring product recommendations from friends and influencers. At the same time, online vendors rely on numerous techniques - such as optimizing page load time, using sharp product images and aggressively targeting ads - to draw in shoppers and convert clicks into cash.
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 videos, view upload progress indication and more. Since we now all live in the cloud era, chances are that many of your users also store media files in the cloud rather than only locally on hard drives and mobile devices, so the option to pick files from social networks like Facebook, cloud storage services such as Dropbox, photo services like Google Photos and more is a big advantage.
Have you ever noticed that home pages are slow to load? Sliders could be to blame. Many modern homepages use a slider or carousel design element to show several rotating images that provide different offers or present various aspects of the brand. A common choice for implementing these sliders is JQuery. While JQuery itself is not a performance killer, the large images displayed by the slider can be responsible for slowing down a home page’s load time.
It's great to have the capability to manipulate images on the fly by using dynamic URLs to customize the images to fit the graphic design of your site or mobile application. However, what if you want to manipulate an image depending on a specific image characteristic (like its width or aspect ratio) or its contents (does it contain a face?). What you need is a way to apply a transformation to an image only if a specific condition is met. Take for example a situation where you have allocated space on your page for a user uploaded image with a width and height of 200 pixels. Furthermore, if the image contains a face you would like to zoom in and focus on the face itself, otherwise you would like to fit the entire image into the available space:
Many of the photos displayed on the internet these days are of people. If your website or mobile application displays photos that include people, you will want to make sure that their faces are included in the delivered images when cropping and manipulating them to fit your graphic design and responsive layout. You may even want to further manipulate an image according to the faces present, for example, adding a harlequin mask overlay on all of their eyes, where each mask is adjusted to the correct size and orientation (although not a typical use case, it's a cool example of using advanced facial attribute detection):
Cloudinary’s JavaScript library accelerates web development by providing automated JavaScript image manipulation and management with a few lines of code. The newly released version streamlines the library by providing a much requested jQuery-free core library. At the same time it is fully backward compatible with previous versions. The new library is further enhanced with classes and a chainable API, making the implementation of Cloudinary functionality in your application easier (and more enjoyable!).
