{
  "id": 16071676,
  "title": "300 DPI means four times the pixels: budget your canvas before rendering a PDF",
  "url": "https://urgent.news/2026/10/22/300-dpi-means-four-times-the-pixels-budget-your-canvas-before",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-22T16:44:47.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/yanwang/300-dpi-means-four-times-the-pixels-budget-your-canvas-before-rendering-a-pdf-1bm9"
  },
  "original_language": "en",
  "account": "The article explains how to budget the pixel dimensions of an image before rendering it as a PDF. It notes that the JPEG size limit is checked after encoding, and lowering JPEG quality can reduce the downloaded file size while keeping rendering dimensions unchanged. The article provides examples showing that doubling the DPI doubles both the width and height dimensions, resulting in four times the pixel count for the same area. It emphasizes the importance of setting limits on both area and edge length to avoid exceeding browser limits. The provided JavaScript code demonstrates how to calculate the appropriate pixel dimensions based on the requested DPI, maximum edge length, and maximum pixel count. The code includes error handling for invalid inputs and checks if the calculated dimensions fit within the budget. The article concludes by showing how to validate the results using assertions and emphasizing the need to differentiate between the requested resolution and the actual scale used.",
  "summary": "A JPEG size limit is checked after encoding. A canvas has to exist before that encoding can happen. That ordering matters in a browser PDF-to-image pipeline. Lowering JPEG quality can reduce the downloaded file while leaving the rendering dimensions unchanged. It is useful to give the raster its own budget before asking the browser to allocate it. AI disclosure: this article and its examples were…",
  "key_points": [
    "Doubling DPI quadruples pixel count for same area",
    "JPEG size limit checked after encoding",
    "JavaScript code calculates pixel dimensions based on DPI limits"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}