I am trying to use markdown with pandoc to convert a single document into html, pdf, and docx. It's an extremely simple document containing only math-less text and a few images. The images are in PNG format. I include an image using this in markdown source:

<div style="float:center" markdown="1">

![my caption](./figures/myimage.png)


and compile it as:

# html
pandoc myarticle.md -c mystyle.css -o myarticle.html
# pdf
pandoc myarticle.md -V geometry:margin=1in -o myarticle.pdf
# docx
pandoc myarticle.md -o myarticle.docx

I noticed that some PNG images that have the same dimensions get sized differently in HTML and PDF formats. A PNG that is 250x256 px with low resolution (72 px/in) will appear in PDF as the correct size roughly on page, and appear in a reasonable size in html, but a PNG that has the same dimensions (250x256 px) but is high-res (300 px/in) get resized to be tiny on the page in the PDF output. I want to keep on set of PNG images in a size that I specify and have them appear in that size in both the HTML/PDF/DOCX formats.

I am willing to give up automatic docx support (or deal with a lot of manual formatting after) just to have PDF/HTML.

How can I tell pandoc not to resize PNGs for PDF or image, and have them appear in their correct images? thanks.

  • 2
    A PNG that is 300dpi but only 250x256px should be quite small on the page, shouldn't it? (Less than one inch square.) A PNG with a lower dpi will be bigger on the page. Pandoc takes into account dpi information, as well as pixel size, in sizing the images. And shouldn't it? Perhaps you could use CSS to globally scale down the high-res images in HTML. Aug 14, 2014 at 0:33
  • 1
    @JohnMacFarlane: I see that pandoc's behavior is correct in taking dpi into account - but I want it to ignore dpi and stick with absolute sizes, so that I can keep a single high res PNG for all images. Is the correct way to do this to make lower resolution version of the images, or is there a way to make pandoc simply only use the dimensions of image and ignore resolution? That would be simplest from my end
    – user46976
    Aug 14, 2014 at 19:24

3 Answers 3


Dimensions are converted to pixels for output in HTML-like formats. Use the --dpi option to specify the number of pixels per inch. The default is 96dpi.

Find the most common element in your pictures and use that. Only modify the exceptions.

Examples: dpi, width, height.

If you give it the dpi information:

Add the --dpi option as stated to override the default.

If most of your pictures have a common height or width, that should be easily corrected.

For example, you changed the line to:

![my caption](./figures/myimage.png){ width=250px }


![my caption](./figures/myimage.png){ height=256px }

Or do this in straight HTML markup:

<img src="./figures/myimage.png" alt="my caption" style="width: 250px;"/>


<img src="./figures/myimage.png" alt="my caption" style="height: 256px;"/>

and the ratio will be correct.

Reference: Pandoc Readme

For HTML and EPUB, all attributes except width and height (but including srcset and sizes) are passed through as is. The other writers ignore attributes that are not supported by their output format.

The width and height attributes on images are treated specially. When used without a unit, the unit is assumed to be pixels. However, any of the following unit identifiers can be used: px, cm, mm, in, inch and %. There must not be any spaces between the number and the unit.

Dimensions are converted to inches for output in page-based formats like LaTeX. Dimensions are converted to pixels for output in HTML-like formats. Use the --dpi option to specify the number of pixels per inch. The default is 96dpi.

The % unit is generally relative to some available space. For example the above example will render to:

  1. <img href="file.jpg" style="width: 50%;" /> (HTML),
  2. \includegraphics[width=0.5\textwidth]{file.jpg} (LaTeX), or
  3. \externalfigure[file.jpg][width=0.5\textwidth] (ConTeXt).

Some output formats have a notion of a class (ConTeXt) or a unique identifier (LaTeX \caption), or both (HTML).

When no width or height attributes are specified, the fallback is to look at the image resolution and the dpi metadata embedded in the image file.

Note that there should not be spaces between the number and the unit, nor the field and its property, i.e. both of these will not work:

![image](/path/to/image){ width = 100% }
![image](/path/to/image){ width=100 px }

If you have spaces, the tag is ignored and will be published as regular text in your document.

  • 11
    One can also use { width=100% } for relative widths to the overall screen/page/linewidth size.
    – rriemann
    May 4, 2018 at 12:33
  • Can this be used with pandoc-crossrefs {#fig:refname} syntax?
    – oarfish
    Oct 8, 2018 at 15:58
  • 8
    Answering my own comment: {#fig:refname width=50%} works.
    – oarfish
    Oct 8, 2018 at 16:06

Apply style to image, plz try this
css style

img[src*="#thumbnail"] {
img[title="thumbnail"] {

md coding style

![img](link#thumbnail) <!-- src = link#thumbnail -->
![img](link "thumbnail") <!-- title = thumbnail -->
![img -thumbnail](link) <!-- alt = img -thumbnail -->

Using markdown files you can set image width heights as below. This gives you set different dimensions for each image.

![Title](YOUR_IMAGE_PATH){width=150px height=100px}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .