Files are processed in your browser, not uploaded. Privacy →
Deckle
Open a PDF
Skip to guide

PDF to images

How to export a chart from a PDF as an image for the web

By DeckleUpdated

To use a chart from a PDF on a web page, open PDF to PNG, choose Choose pages and type the chart's page, set Resolution to Standard or Print, then choose Export images. Crop the PNG to the chart in an image editor and check its labels at the width your site shows it. PNG keeps chart lines and small labels sharp, and your PDF is not changed.

PDF to PNG

Export the page, then prepare the chart

PDF page image

Check resolution, background and labels

Web placement

Crop separately if needed; add a text equivalent

A sharp image alone does not make a chart accessible

Conceptual workflow · page export does not automatically isolate a chart or provide an accessible description.

How to export a PDF chart for the web

  1. Find the chart's page position in the PDF. Use the position in the file, not the number printed on the page.
  2. Open PDF to PNG and choose your PDF, or drop it onto the page.
  3. Under Resolution, choose Print (300 DPI) if the chart takes up a small part of the page, or Standard (150 DPI) if it fills most of it.
  4. Under Pages, choose Choose pages and type the page number, such as 14.
  5. Choose Export images and download the PNG.
  6. Open it in an image editor, crop to the chart, and resize it to the width it will be shown.
  7. Preview the image on the page, on a laptop and on a phone, and read the smallest label.

The export is always the whole page. Cropping is a separate step, and the extra pixels from Print are what keep the cropped chart sharp.

Choose the resolution from the chart's size on the page

A chart that fills half the width of an A4 page is about 4 inches wide. Its width in pixels is about 4 × the DPI:

Chart width on the page Standard (150 DPI) Print (300 DPI)
Full width, about 6.5 in about 975 px about 1950 px
Half width, about 4 in about 600 px about 1200 px
Quarter page, about 3 in about 450 px about 900 px

Compare that with the width your site shows the chart. Most article columns are 600–900 pixels wide; for sharp display on high-density screens, aim for roughly twice the column width. A half-width chart in an 800-pixel column therefore needs Print.

Example: a quarterly report has a bar chart on page 14, half the page wide, with 8-point axis labels. You want it in a blog post with an 800-pixel column. Export page 14 at Print, and crop to the chart. The crop is about 1200 pixels wide, half as much again as the column, so do not enlarge it further. The labels stay readable on a phone and a laptop.

PNG or JPG for charts

Use PNG. Charts are made of flat colour, thin lines and small text, which PNG stores sharply and compactly. JPG blurs the edges of text and lines and adds faint blotches around solid colours. Use PDF to JPG only when the "chart" is really a photograph or a heat map with smooth shading, where JPG is much smaller. PDF to PNG or JPG compares them in detail.

Make the chart work on the page

An image of a chart is just pixels to a screen reader or search engine. Give it alt text that states what the chart shows, such as "Bar chart: revenue grew from 2.1 to 2.8 million between Q1 and Q4". If readers need the exact figures, put them in the text or a table next to the image. PDF to text can pull the numbers out of the PDF so you do not have to retype them.

Tips

  • Ask for the source file first. A chart made in a spreadsheet or design tool can be exported as SVG or a larger PNG directly.
  • Crop tight, keep the labels. Leave the axis titles and legend in the crop; cut page headers, footers and page numbers.
  • Name the file for the chart. q4-revenue-by-region.png beats report-014.png for search and for your own files.
  • Check it on a phone. A chart that reads well at 800 pixels can be unreadable at 360.

Frequently asked questions

Can I export just the chart, not the whole page?

Not directly. Deckle exports whole pages. Export the page at Print and crop the chart in an image editor.

What resolution should a chart image be for a website?

About twice the width it is displayed at, so it is sharp on high-density screens. Use Print for charts that are small on the page.

Will the chart stay sharp if I make it bigger?

Only up to its pixel size. Export at Print if you expect to show it large.

Can I keep the chart as a vector?

Not with an image export. PNG and JPG are pixel formats; ask for the chart's source file if you need a vector.

Related tools

  • PDF to PNG to export the chart's page as a sharp image
  • PDF to JPG for photo-like charts and heat maps
  • PDF to text to copy the chart's figures for alt text or a table

Sources