Smart Image Management
Your website's images are most likely the major contributor to download requests and bandwidth consumption. Managing your web application images’ upload process and transformation flow is a time-consuming development and IT task and also a CPU intensive process as a whole.
Cloudinary provides a complete solution for managing your images:
- Cloudinary manages the process of uploading your static and dynamic images to the cloud.
- Automatically deliver your images through high-performance storage engines and Content Delivery Networks (CDN).
- Easily transform your images to any dimension and format required.
- Easily create complex graphical transformations.
- Retrieve social network profile pictures (e.g., Facebook, Twitter) in any size required.
- Automatically generate smart ‘sprites’ for optimized site loading time and better user experience.
Image upload management
Cloudinary allows you to move your regular image manipulation process flow to the cloud:
- Use a secure API for uploading images of any format to Cloudinary.
- Define complex image transformations to matches the design of your site. Resize or crop images to any dimension in various modes (fit, fill, scale, pad and more).
- Convert image formats to optimize delivery time.
- Images are automatically stored in Amazon’s high performance storage servers.
- Images are automatically distributed to Content Delivery Networks (CDN). Your users will enjoy a highly responsive image downloading experience.
- Modern cache techniques are used across all transport layers to optimize data transfer and further improve the user’s experience.
- Tag your images and perform tag-based group actions such as sprite generation.
- Integrate with the existing upload libraries of your web development framework.
See our Upload images documentation for more technical details.
URL based transformations
Cloudinary’s URL-based resource access protocol dramatically simplifies access to your web applications’ resources:
- Automatically mapped to popular Content Delivery Networks.
- Retrieved via Cloudinary’s scalable high-performance servers.
- Dynamically creates transformed images, on-demand.
For example, assume that you’ve uploaded the sample.jpg file, simply point to the following address URL:
In order to match your website’s design, you will need a PNG file of a smaller size of 150x100 pixels cropped to fit dimensions. Simply point to the following address URL:
The sample.jpg will be automatically transformed to your desired size and format, stored for future downloads and distributed to global content networks.
See Image transformations for full details.
Social networks profile pictures
Many web applications nowadays integrate with social networks such as Facebook and Twitter for authentication, user identity and social sharing. These applications will want to display the profile pictures of their users and their friends. Those profile pictures are taken from the social networks’ servers (e.g., Facebook, Twitter).
However, each website has its own design and look & feel. This means that each site needs multiple different dimensions and proportions of displayed profile pictures. Doing this correctly requires accessing the social network’s APIs, downloading profile pictures, resizing and cropping them, saving them locally, backing them up and synchronizing between servers, detecting when users change their profile pictures, rinse and repeat.
Cloudinary provides a complete solution for integrating social network profile images into your website:
- Simple address URLs for accessing profile pictures based on social network user IDs.
- Dynamically create multiple versions of the pictures in any size and format you require.
- Profile pictures are automatically updated when users change their pictures on the social networks.
- Automatically distributed using global delivery networks and smartly cached.
For example, to display the Facebook profile picture of Bill Clinton scaled to 73x73, simply point to:
Another example: To display the Twitter profile picture of Bill Clinton filling a 80x100 rectangle, simply point to:
Modern graphically-rich websites include many images. Having too many images in a single web page will degrade the user’s experience. Your visitors will need to wait for their browsers to finish downloading all these small images and your server might become unresponsive, processing many download requests for those images. Your visitors might even give up on the waiting and leave your website altogether.
A known solution for this problem is using Sprites. A sprite is a single image that contains many smaller images. The web page is modified to download only a single image from the server and the page’s HTML uses alternative CSS class names to point to the small images within the larger image.
A good illustration for this technique is shown in Google Search results pages we all use every day. These pages look very clean with almost no graphic elements, right? You might be surprised to know that there are more than 80 (!) small images displayed in those simple search result pages. Downloading 80 pictures when visiting a search result page will simply take too long. If you take a look behind the scenes of Google’s search results pages, you will see the following single sprite image. Your browser will quickly download (and cache) this single image from Google’s servers and all images will immediately be visible.
Cloudinary provides automatic smart sprite generation quite similar to the one used by Google:
- Upload your images to Cloudinary and tag them.
- Transform all images to your desired size and format prior to generating the merged sprite.
- Create a sprite image and smart CSS for all images with a given tag.
- Use either high-level or URL-based APIs to dynamically create sprites, on demand.
- Automatically distribute the sprites using global delivery networks.
- Maintain sprite versions and update the sprite when any contained image is updated.
For example, let's say you uploaded multiple logo images to Cloudinary and gave them the tag 'logo'. Simply point to the following address URLs to download a newly created sprite image and CSS containing all your logos:
And this is just a small example. Cloudinary offers plenty more advanced Sprite creation and management capabilities.
See our Sprite generation documentation for more details