Cloudinary Blog

Cloud-based animated GIF generation

Create Cloud-Based Animation Sequence GIFs
*Update (2015): Before you can use a delivery URL such as the ones described in this post, you must first pre-generate the GIF with a call to the multi method of the upload API. The delivery URLs described in this blog post are used to display the pre-generated animated GIFs. For details, see Creating animated GIFs in the Cloudinary documentation
 
Back in the 1990s, websites mainly comprised of static textual pages dashed with a few images to make them slightly more appealing. You could even disable image downloading in your browser to make pages load faster, quite unthinkable in today's websites.
 
In order to make web pages look more alive, developers started looking for animation solutions. Proprietary browser plugins started to appear, followed by a real usability breakthrough - the enhanced, 89a GIF format. As part of its many enhancements, this new format allowed for simple animation sequences. While initially supported only by the Netscape browser, using GIF to add animations has proved quite straightforward and soon became very popular.
 
The modern web supports animations using Flash and HTML5 techniques, but animated GIFs still persist as a way to to create simple, efficient, cross-browser animations. A recent example can be seen at one of the Internet’s greatest innovators and biggest HTML5 early adopter - Apple itself. If you scroll through Apple's iPad features page, you will notice animation scenes depicting the new iPad's capabilities. These animations aren't based on the HTML5 Video format. They are based on dozens of separate JPG images that are pre-loaded and displayed programmatically to achieve a smooth animation effect. In the Design page of Apple's iPhone 5, if you scroll down to the earbuds section, you will notice a smooth animation of rotating earbuds. Again, no videos were used here. This time a more complex solution based on HTML Canvas, JPG images and Javascript is used.
 
In this blog post we wanted to show you how to easily generate simple animations with Cloudinary and how to generate animated GIF files that are still very useful for short animation sequences.
 
 

Animation building blocks 

Consider the following two images that were uploaded to Cloudinary - a blue cloud icon and three arrows:
 
 
 
With Cloudinary overlays and chained transformations it is very easy to generate an image where the arrows appear above the cloud icon. The following URL first expands the cloud icon to a 280x150 image with white padding and then adds an overlay with the arrows in the top left corner:
 
 
 
We can use the custom overlay coordinates to position the arrows in a different location. We can also apply a brightness effect as the following example shows. The arrows are now positioned 150 pixels from the left. We also applied another cropping transformation to make sure that the final image remains 280x150 even if the arrows overflow outside the original canvas.
 
 
 
Quick side-note - don't you think it's quite amazing what you can accomplish so easily with Cloudinary? If you don't have an account already, you can go ahead and sign up for a free account, we'll wait... (and if we were back in the early 1990s, this link would probably be flashing red :-)
 

Generating Animations

You could probably already guess where we're aiming at. Using the previous overlay concepts and a simple script, we can now create an animation sequence depicting the arrows moving from left to right while growing lighter and lighter until disappearing.
 
The following Ruby script uses Cloudinary's Ruby GEM to generate 34 images that construct the frames of the animation. The same can be easily done using any of our other client libraries (PHP, Python, Node.js, etc.), or directly with our URL-based apis.
 
The script programmatically generates transformation URLs similar to the examples above. Horizontal (X) position of the arrows moving from -50 to 280. Brightness effect increasing while X position increases. The URL is then given to Cloudinary's upload API call to generate a new image based on the given transformation. 
(-5..28).each_with_index do |x, index|
  url = Cloudinary::Utils.cloudinary_url("cloud_icon_right.png", 
   :width => 280, :height => 150, :crop => :crop, :gravity => (x < 0 ? :east : :west),
   :transformation => [
     { :width => 280, :height => 150, :gravity => :west, :crop => :pad },
     { :overlay => "arrows_right", :x => x * 10, :y => 0, :gravity => :west, 
       :effect => (x > 7 ? "brightness:#{(x-7)*4}" : nil) }
   ])
 
  Cloudinary::Uploader.upload(url, 
                :public_id => "arrow_animation_#{index.to_s.rjust(2, "0")}", 
                :tags => "arrow_animation")   
end
Executing the script above, generated 34 images in the cloud. All these images have a public ID formatted as arrow_animated_XX. For example, here's the thirteenth generated frame:
 
 
 
All generated images were assigned with the tag arrow_animation. If you are familiar with Cloudinary, you probably know that a tag can be used to generate a 'sprite' - a single image merging together all images of the same tag. Click on the following links to view the sprite image and generated CSS. You can see all the animation frames in this sprite. 
 
 
As mentioned, Cloudinary now supports easy animated GIF generation. All images sharing a tag can be merged into a single animated GIF, sorted alphabetically by their public IDs.
 
And here it is, the animated GIF generated using an amazingly simply URL. As always, the final image is generated on-the-fly* in the cloud and is then cached and delivered through a fast CDN:
 
 
 
This animation might be a little too slow. You can use the 'delay' parameter to change that. The parameter accepts the delay between frames, in milliseconds. Here is a much faster example:
 
 

Summary

Animated GIFs might be a little restrictive with their small 8 bit indexed color space and inefficient lossless compression. Still, these can be quite indispensable in various occasions. 
 
We've shown you how you can programmatically achieve powerful transformations, frame generation and GIF-based animations, easily and efficiently. We hope that these building blocks will be useful for your projects. We're sure that they will give you some interesting ideas of what you can accomplish with Cloudinary!

Recent Blog Posts

CoreMedia Adds Cloudinary to its CoreMedia Studio Platform

Today we’re pleased to announce a new technology partnership with CoreMedia, a leading Content Experience Platform provider. CoreMedia users can now leverage Cloudinary’s web-based digital asset management (DAM) solution to organize, search, manage and optimize their media assets, including images and videos, and to orchestrate, preview and deliver digital experiences consistently and optimized across all channels and browsers. The official press release is available here.

Read more
Facial-Surveillance System for Restricted Zones

In Africa, where Internet access and bandwidth are limited, it’s not cost-effective or feasible to establish and maintain a connectivity for security and surveillance applications. That challenge makes it almost impossible to build a service that detects, with facial-recognition technology, if someone entering a building is authorized to do so. To meet the final-year research requirement for my undergraduate studies, I developed a facial-surveillance system. Armed with a background in computer vision, I decided to push the limits and see if I could build a surveillance system that does not require recording long video footage.

Read more
Complex Networks Case Study

Complex Networks has been using Cloudinary since 2014 to manage and optimize images across seven websites and two mobile apps, making editorial workflow more efficient, improving page performance and load time, and increasing user engagement. Cloudinary was instrumental in enabling Complex Networks to redesign its web properties. Without the flexibility that Cloudinary offers to both creative and development teams, it would not have been possible for Complex Networks to achieve such a fast time to market.

Read more
Automate Placeholder Generation and Accelerate Page Loads

If you run a Google search on LQIP you’ll see very few relevant articles, very little guidance, and definitely no Wikipedia articles. In this post, we’ll discuss some of the feedback on LQIP we have gathered from the community and suggest and open for conversation a few approaches based on the built-in capabilities of the Cloudinary service. Specifically, we’ll explain what LQIP are, where they are best used, and how you can leverage them to accelerate page loads and optimize user experience.

Read more
Best Practices for Optimizing Web Page Speed

If you're like most consumers today, you engage more with pictures or videos on a website than text. The stats don't lie - four times as many visitors would rather watch a video about a product than read about it, and sites with compelling images average twice as many views as text-heavy ones.

Read more
A day of fun with Girls Who Code and Cloudinary

During both my computer science studies and work in the tech field, there have not been a lot of women present. While our ranks have grown, women still make up only a small percentage. In many ways, I think the traditionally male-dominated world can be intimidating to women and girls who may be interested in pursuing these types of tech careers.

Read more