Cloudinary Blog

Uploading, converting and generating thumbnails for PDF documents

How to Create PDF Thumbnails Automatically
Web applications that manage user data, commonly allow their users to upload such data as PDF documents. A common UI practice employed by such services is to show a thumbnail of the PDF cover letter for quick identification, and thumbnails of the different PDF pages for fast access.
 
Using Cloudinary, you can accomplish such tasks with ease. 
 
In this blog post we wanted to showcase some of Cloudinary’s powerful PDF (and multi-page TIFF) management capabilities.
 

Uploading PDF files

From a website’s perspective, PDF assets share many usability characteristics as regular image files, and so we treat them quite the same as images. You can simply use our standard upload API for uploading PDF files.

Ruby on Rails:
Cloudinary::Uploader.upload("SinglePageSample.pdf", :public_id => "single_page_pdf"
Python:
cloudinary.uploader.upload("SinglePageSample.pdf", public_id = 'single_page_pdf')
Node.js:
cloudinary.uploader.upload("SinglePageSample.pdf", function(result) { }, 
                           {public_id: 'single_page_pdf'})
PHP:
\Cloudinary\Uploader::upload("SinglePageSample.pdf", "public_id" => 'single_page_pdf')
 The uploaded PDF is available for downloading as-is through a fast CDN:
 

This means that if you allow your users to upload images in multiple formats, they could also upload PDFs.

Generating thumbnails

To generate images and thumbnails from your PDF file, you can simply use Cloudinary’s resize and crop transformations, as you would for regular images.

For example, the following URL converts a PDF into a PNG image, as a 200x250 pixels thumbnail:


 
Same example in Rails: 
<%= cl_image_tag("single_page_pdf.png", :width => 200, :height => 250, :crop => :fill) %>
You can also apply any of Cloudinary’s powerful transformations on your PDFs. For example, here is the same page, but this time rotated and converted to grayscale with a watermark added:
 

 
 
While you can generate any thumbnail your graphics design requires, you can also dynamically generate and deliver a full sized image version of your PDF. To control the image’s quality, you can state the density (DPI) used to convert the PDF to an image. Simply use the new 'density' transformation parameter (or 'dn' for URLs) with an integer value between 1 and 300 (the default is 150).
 
The following examples generate a low density and a high density image versions of the uploaded PDF:
 
 
Same example in Rails:
<%= cl_image_tag("single_page_pdf.png", :density => 50) %>
  

Multi-page support

In the examples above, we’ve shown how to generate an image version of the first page of the PDF. But what about multi-page documents
 
You’ll be happy to hear that Cloudinary allows you to generate images and thumbnails for any page of a multi-page document. You can also use the same APIs to manage multi-page TIFF files.
 
In order to extract a single page out of a document, use the new 'page' parameter (or 'pg' for URLs).
 
The following example delivers a 200x300 JPG thumbnail created from the second page of the 'multi_page_pdf' PDF file.
 
 
 
Same example in Rails:
<%= cl_image_tag("multi_page_pdf.jpg", :width => 200, :height => 250,
                 :crop => :fill, :page => 2) %>
In the following example we also reduced quality to 50% to generate a smaller file that can be downloaded faster.
 
 
 

Tips and tricks

Cloudinary offers many additional features in the PDF management department, and you can also mix and match these with all of Cloudinary’s existing image manipulation and delivery capabilities. Following are a few quick ideas.
 
Using Cloudinary, it is easy to extract a single page from a multi-page PDF while returning it as a new PDF:
 
You can also convert arbitrary images to PDFs. For example, consider the following image depicting grazing horses:
 
 
Simply change this image’s suffix to .PDF and Cloudinary will convert the image to PDF and return it as a PDF file.
 
Cloudinary can even programmatically tell you how many pages are available in an uploaded PDF. Our upload API returns this number as its 'pages' parameter:
{  
"public_id":"multi_page_pdf",
"version":1343305663,
"width":612,
"height":792,
"format":"pdf",
"pages":3,
"url":"https://res.cloudinary.com/demo/image/upload/v1343305663/multi_page_pdf.pdf",
...
}
You can also upload a PDF as JPG, storing only the JPG on Cloudinary. This will require less storage and make sure that the image is available immediately on upload, rather than created lazily on demand. The following code sample converts an uploaded PDF to JPG while uploading, before storing it in the cloud and generating additional transformed versions. 

PHP:
\Cloudinary\Uploader::upload("SinglePageSample.pdf", "public_id" => 'single_page_pdf', 
                             "format" => 'jpg')
As usual with Cloudinary, all generated images, documents and thumbnails are cached and delivered through thousands of worldwide CDN servers (currently leveraging Amazon CloudFront).
 
PDF upload, thumbnail creation and transformations, together with multi-page document support, are all available now for both of our free and paid plans. Click here to quickly set up an account if you don't already have one.
 
Additional resources about generating PDF files from images using PHP, JavaScript and how to build a PDF viewer.
 
 

Recent Blog Posts

Hipcamp Optimizes Images and Improves Page Load Times With Cloudinary

When creating a website that allows campers to discover great destinations, Hipcamp put a strong emphasis on featuring high-quality images that showcased the list of beautiful locations, regardless of whether users accessed the site on a desktop, tablet, or phone. Since 2015, Hipcamp has relied on Cloudinary’s image management solution to automate cropping and image optimization, enabling instant public delivery of photos, automatic tagging based on content recognition, and faster loading of webpages. In addition, Hipcamp was able to maintain the high standards it holds for the look and feel of its website.

Read more
New Image File Format: FUIF: Why Do We Need a New Image Format

In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.

Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.

Read more
 New Image File Format: FUIF:Lossy, Lossless, and Free

I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.

Read more
Optimizing Video Streaming and Delivery: Q&A with Doug Sillars

Doug Sillars, a digital nomad and a freelance mobile-performance expert, answers questions about video streaming and delivery, website optimization, and more.

Doug Sillars, a freelance mobile-performance expert and developer advocate, is a Google Developer Expert and the author of O’Reilly’s High Performance Android Apps. Given his extensive travels across the globe—from the UK to Siberia—with his wife, kids, and 11-year-old dog, Max, he has been referred to as a “digital nomad.” So far in 2018, Doug has spoken at more than 75 meetups and conferences!

Read more