Cloudinary Blog

How to Zip Photos Dynamically With a Single Line of Code

How to Zip Photos Dynamically With a Single Line of Code

As a developer, you want to allow your users to download multiple files in a single click. An easy way to download multiple files and share them is to generate a ZIP file. When images are involved, you may also want to normalize the original images before including them in the ZIP file, by scaling them down to the same maximum resolution or converting them to the same format.

In the following simple example, 3 images of cats have been uploaded to the cloud.

fat_cat.jpg fat_cat kitten.jpg kitten hungry_cat.jpg hungry_cat

With one line of code, you can generate a dynamic URL that, for example, automatically creates and then delivers a ZIP file containing the cat images, all scaled down to a width of 200 pixels (this is just a sample URL):

https://api.cloudinary.com/v1\_1/demo/image/generate\_archive?api\_key=373364719177799&expires\_at=1557919777&mode=download&public\_ids%5B%5D=fat\_cat&public\_ids%5B%5D=kitten&public\_ids%5B%5D=hungry\_cat&signature=a2f86b73d32d2a778493d6759d59059d0a30076d&timestamp=1464179836&transformations=c\_scale%2Cw\_200


Sign up for Cloudinary free today!


The ability to dynamically generate and deliver ZIP files to your users by including one line of code can be useful for developers in a number of ways. For example:

  • Social and messaging apps that allow users to select multiple files to send to another recipient, who subsequently receives all the files in one ZIP file (e.g., the Gmail feature where you can download all attachments as a single ZIP file).
  • Applications that include image galleries and allow users to select multiple images and then download a ZIP file with all the selected images (e.g., as Google Photos has implemented).
  • Allowing your users to download multiple images simultaneously in a single ZIP file, where all the images have been normalized to a certain size, format or quality, (or any other image transformation you want to apply to all the images).

Generating ZIP files of images in the cloud

Cloudinary supports generating ZIP files using the generate_archive Upload API method, which can include any type of file, and offers various options for determining which files to include in the ZIP file (e.g., according to the file's name, all files in the same folder, etc). The method also allows you to apply transformations to all the images before including them in the file and set various options for generating the ZIP file (e.g., naming the file). For more information on all the options available for generating ZIP files, see the generate_archive documentation.

Cloudinary enables you to create and deliver ZIP files in one of the following two ways: * Pre-create the ZIP file and upload it to the cloud. * Generate a dynamic URL for creating and downloading a ZIP file on demand.

The Cloudinary SDKs wrap the generate_archive API method and provide 2 separate methods that accomplish these two goals.

Create a ZIP file of images

To pre-create a ZIP file, use the create_zip SDK method, which also automatically uploads the ZIP file to the cloud, and then gives your users a link for downloading it. This option is best if multiple users will be downloading the resulting ZIP file.

For example, to create a ZIP file called small_cats.zip that contains small (50x50) thumbnails of all of the images in your account that have been tagged as "cats":

Ruby:
Copy to clipboard
Cloudinary::Uploader.create_zip(:tags => 'cats', 
    :resource_type => 'image', :target_public_id => 'small_cats.zip',
    :transformations => {:width => 50, :height => 50, :crop => :fill})
PHP:
Copy to clipboard
\Cloudinary\Uploader::create_zip(array(
    'tags' => 'cats', 'resource_type' => 'image', 
    'target_public_id' => 'small_cats.zip', 'transformations' => array(
        'width' => 50, 'height' => 50, 'crop' => 'fill')));
Python:
Copy to clipboard
cloudinary.uploader.create_zip(
    tags = 'cats', resource_type = 'image', 
    target_public_id = 'small_cats.zip', transformations = {
        width = 50, height = 50, crop => 'fill'})
Node.js:
Copy to clipboard
cloudinary.v2.uploader.create_zip(
    { tags: 'cats', resource_type: 'image', 
    target_public_id: 'small_cats.zip', transformations: {
        width: 50, height: 50, crop: 'fill'}},
    function(error,result) {console.log(result) });
Java:
Copy to clipboard
cloudinary.uploader().createZip(
    ObjectUtils.asMap('tags', 'cats', 'resource_type', 'image',
    'target_public_id', 'small_cats.zip', 'transformations', 
    Arrays.asList(
        new Transformation().width(50).height(50).crop('fill')));
cURL:
Copy to clipboard
curl https://api.cloudinary.com/v1_1/demo/image/generate_archive -X POST --data 'tags=cats$resource_type=image&target_public_id=small_cats.zip&timestamp=173719931&api_key=436464676&signature=a788d68f86a6f868af&transformations=c_fill%2Cw_50%2Ch_50'

The response to the API call includes all pertinent information about the created zip file, including the URL needed to access it, in this case:

Ruby:
Copy to clipboard
cl_image_tag("small_cats.zip")
PHP v1:
Copy to clipboard
cl_image_tag("small_cats.zip")
PHP v2:
Copy to clipboard
(new ImageTag('small_cats.zip'))
  ->assetType(AssetType::RAW);
Python:
Copy to clipboard
CloudinaryImage("small_cats.zip").image()
Node.js:
Copy to clipboard
cloudinary.image("small_cats.zip")
Java:
Copy to clipboard
cloudinary.url().imageTag("small_cats.zip");
JS:
Copy to clipboard
cloudinary.imageTag('small_cats.zip').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("small_cats.zip")
React:
Copy to clipboard
<Image publicId="small_cats.zip" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="small_cats.zip" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="small_cats.zip" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("small_cats.zip")
Android:
Copy to clipboard
MediaManager.get().url().resourceType("raw").generate("small_cats.zip");
iOS:
Copy to clipboard
cloudinary.createUrl().setResourceType("raw").generate("small_cats.zip")

Generate a dynamic URL for downloading a ZIP file on demand

Instead of pre-creating the ZIP file, you can generate a signed URL for creating a ZIP file on-the-fly and on-demand with the download_archive_url method of the Utils API. The ZIP file is created and streamed to your user only when the URL is accessed. The resulting ZIP file is not cached or stored in your Cloudinary account, so this option is best if only a single user downloads the resulting ZIP file and avoids waste if the URL is not accessed by the user.

For example, to generate a signed URL for creating and delivering a ZIP file that contains the 'fat_cat' and 'kitten' images:

Ruby:
Copy to clipboard
Cloudinary::Utils.download_zip_url(
    :public_ids => ['fat_cat', 'kitten'], 
    :resource_type => 'image')
PHP:
Copy to clipboard
\Cloudinary\Utils::download_zip_url(
    array(
        'public_ids' => array('fat_cat', 'kitten'), 
        'resource_type' => 'image'));
Python:
Copy to clipboard
cloudinary.utils.download_zip_url(
    public_ids = ['fat_cat', 'kitten'], 
    resource_type = 'image')
Node.js:
Copy to clipboard
cloudinary.v2.utils.download_zip_url(
    { public_ids: ['fat_cat', 'kitten'], resource_type: 'image'},
    function(error,result) {console.log(result) });
Java:
Copy to clipboard
cloudinary.utils().downloadZipUrl(
    ObjectUtils.asMap('public_ids', Arrays.asList('fat_cat', 'kitten'), 
        'resource_type', 'image'));
cURL:
Copy to clipboard
curl https://api.cloudinary.com/v1_1/demo/image/generate_archive -X POST --data 'public_ids[]=fat_cat&public_ids[]=kitten$resource_type=image&mode=download&timestamp=173719931&api_key=436464676&signature=a788d68f86a6f868af'

The API call returns the URL needed to dynamically create and deliver the ZIP file, in this case:

Dynamic ZIP files with a single line of code

Generating ZIP files with a single line of code allows you to organize, streamline, normalize and optimize multiple image delivery to your users. Either create the ZIP file and upload it to the cloud, or generate a dynamic URL that creates and delivers the ZIP file on demand. For more information on all the options available for generating ZIP files, see the generate_archive documentation. The feature is available for use with all Cloudinary accounts, including the free tier.

Recent Blog Posts

Automatically Translating Videos for an International Audience

No matter your business focus—public service, B2B integration, recruitment—multimedia, in particular video, is remarkably effective in communicating with the audience. Before, making video accessible to diverse viewers involved tasks galore, such as eliciting the service of production studios to manually dub, transcribe, and add subtitles. Those operations were costly and slow, especially for globally destined content.

Read more
Cloudinary Helps Minted Manage Its Image-Generation Pipeline at Scale

David first shared his thoughts at our ImageCon coverence last October and this case study is an abbreviated version of Minted’s success using Cloudinary.

Over time, Faithful renderings of the creations of the illustrators, textile designers, painters, packaging designers, marketers, and stay-at-home moms, all of whom are core contributors of the Minted world, was getting harder and harder. Legacy technology wasn’t cutting it any more—and it was time for Cloudinary to step in.

Read more
Highlights on ImageCon 2021 and a Preview of ImageCon 2022

New year, same trend! Visual media will continue to play a monumental role in driving online conversions. To keep up with visual-experience trends and best practices, Cloudinary holds an annual conference called ImageCon, a one-of-a-kind event that helps attendees create the most engaging visual experiences possible.

Read more

New for DAM: Media Library Extension for Chrome

By Sharon Yelenik
A New Media Library Chrome Extension for Cloudinary DAM

With the introduction of the Media Library Extension, a Chrome-browser add-on that streamlines the access to, search for, and management of images and videos, Cloudinary offers yet another effective tool for its Digital Asset Management (DAM) solution. Let’s have a look at how most teams are currently working with media assets and how the new add-on not only boosts efficiency, but also renders the process a pleasure to work with.

Read more
New Features Supercharge Cloudinary’s Digital Asset Management Solution.

Today, I’m thrilled to announce the launch of Apps for Digital Asset Management and a Media Library Extension for the Chrome browser, which enables easy, flexible integration with all web-based applications in addition to making asset discovery more robust and accessible to all.

Read more
Scale and Automate Workflows With Modern Digital Asset Management Systems

With building, growing, and maintaining a strong digital presence being a top priority for all brands, high-quality visual content is paramount. In fact, consumers are 40 times more likely to share visual content on social networks than on other forums. Plus, a recent study from Wyzowl found that 84% of consumers made purchase decisions after watching a video, which explains why many brands are adding more and more visual media to their sites.

Read more