{"id":24162,"date":"2022-06-09T07:30:00","date_gmt":"2022-06-09T14:30:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=24162"},"modified":"2025-02-16T13:45:48","modified_gmt":"2025-02-16T21:45:48","slug":"add-motion-to-your-pictures","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/add-motion-to-your-pictures","title":{"rendered":"Add Motion to Your Pictures"},"content":{"rendered":"

Here at Cloudinary we often talk about visual storytelling. It\u2019s the concept of using images and videos to communicate your message – it\u2019s a new spin on the old adage, \u201ca picture is worth a thousand words\u201d. Although images by themselves are powerful, videos are even more effective. A product page featuring a video is more likely to engage more customers and lead to more conversions.<\/p>\n

As video is expensive to produce, we\u2019ve come up with a quick and easy way to turn your images into videos – the zoompan<\/code> effect! Also known as the Ken Burns effect<\/a>, this transformation applies zooming and\/or panning to an image, resulting in a video or animated GIF (depending on the format you specify). The technique is often used in documentaries, where still photographs are brought to life by slowly zooming in or out of them, and panning across areas of interest.<\/p>\n

This is part of a series of articles about Responsive Images<\/a>.<\/p>\n

Visual Storytelling Taken Literally<\/h2>\n

Children\u2019s storytelling programs use zooming and panning techniques to reveal the illustrations in a book as the narrator reads. Here\u2019s an example of these techniques – me literally visually storytelling, reading one of my favorite books, The Cat in the Hat<\/em>:<\/p>\n

\n Loading code examples<\/span>\n <\/cld-code-widget><\/p>\n

\n\n

Delving into the technical details, you\u2019ll see that we created this video simply by adding parameters to the delivery URL<\/a> (you can do this directly, or using an SDK<\/a>). The original asset is a JPG image<\/a>, and we\u2019ve turned it into an MP4 video by specifying mp4<\/code> for the extension and using the zoompan<\/code> effect, which is constructed as follows:<\/p>\n