PDFs as Images

PDFs are vector documents but are also valid images sources in modern browsers.

I had been looking for a solution to display PDFs in an HTML page, rather than just provide a link to view or download it separately. Browsers used plugins in the past, and there are some good JavaScript solutions to display multi-page PDFs like Mozilla’s pdf.js. But my need at the time was simple. I wanted a visual of the PDF but I didn’t want to convert the PDF to a destructive image format. I was pleased to learn that I could make a PDF file the src of an <img> tag in HTML.

Limitations: Only the first page of a PDF will be displayed inline. This restriction is according to the specs. And you cannot point to a specific page of a multi-page PDF document like you can with an anchor link (ex. <a href="....pdf#page=2>).

So this technique is good for one-page PDFs or to display the first page of a multi-page PDF as a preview image, linked to the full document. If you use a Markdown editor like Ulysses, know that you can similarly use a PDF as an image.