Converting PDF pages to images for a website requires specific pixel dimensions, not a generic DPI setting. A PDF page converted at 300 DPI produces an image that is thousands of pixels wide, far larger than any website layout can display. Uploading that image to a website wastes bandwidth and slows page loading. Converting at the exact pixel dimensions needed for the website's layout produces images that load quickly and display sharply. PDF to Image conversion for web use is about matching output dimensions to the specific place the image will occupy on the page.
Key Takeaways
Website image dimensions are measured in pixels, not inches. To convert a PDF page to the correct pixel size, determine the maximum display width of the image on the website, then set the conversion output to that width while maintaining the page's aspect ratio. Standard website content widths range from 720 pixels for mobile-optimized layouts to 1920 pixels for full-width desktop layouts. Converting at these specific dimensions produces images that are neither unnecessarily large nor disappointingly blurry.
Determine the Exact Pixel Dimensions Your Website Needs
For websites that use a content management system with automatic image resizing, convert at a resolution higher than the display size and let the CMS handle resizing. A CMS that generates multiple sizes from a single upload needs a source image large enough to support the largest generated size. Converting at twice the largest CMS-generated size ensures all generated variants are sharp.
For responsive websites, the image display width changes at different screen sizes. Convert at the largest width the image will appear at, which is typically the desktop breakpoint of 1200 to 1400 pixels for content images. The browser scales images down for smaller screens efficiently. The extra file size from the larger conversion is served to all users, including mobile users who will see a scaled-down version. For bandwidth-sensitive implementations, use responsive image markup to serve different image sizes at different breakpoints.
Measure the content area width of your website in pixels. Open the website in a browser, right-click the content area, and select Inspect to open the developer tools. The computed width of the content container is displayed in the box model diagram. This is the maximum width your images should be. If your website is responsive and adapts to different screen sizes, choose the widest breakpoint, typically the desktop layout at 1200 to 1400 pixels wide. Images at this width will look sharp on desktop and will be scaled down proportionally on tablets and phones.
For image galleries and lightboxes, convert at a higher resolution to support full-screen viewing. A gallery image that displays at 400 pixels wide in a grid layout may need to expand to 1600 pixels wide when clicked for full-screen viewing. Converting at the full-screen display size ensures the enlarged image is sharp. The grid view loads a scaled-down version, which browsers handle well. Converting at the gallery display size and serving the same image for full-screen viewing results in a blurry enlargement. Consider your website's maximum display scenario, not just the default view.
Convert PDF Pages at Exact Pixel Dimensions
For PDF pages that contain both text and images, converting at 2x the display width preserves text sharpness on high-DPI screens. Text rendered at 1x display width can look slightly soft on Retina displays because the fine strokes of letterforms benefit from the extra pixel density. The 2x conversion roughly doubles the file size, which is a worthwhile tradeoff for document pages where text readability is the priority. For pages that are primarily photographs, 1x conversion is sufficient because the eye is less sensitive to resolution differences in photographic content.
Open your PDF-to-image conversion tool and look for output size settings. Some tools use pixel dimensions, such as 1200 pixels wide. Others use DPI combined with physical page size. If the tool uses DPI, calculate the required DPI by dividing the target pixel width by the page width in inches. A Letter-size page is 8.5 inches wide. To produce an image 1200 pixels wide, set the DPI to 1200 divided by 8.5, which equals approximately 141 DPI. Entering 141 DPI produces the exact 1200-pixel width needed for the website.
For Digital Publishing where images are embedded in articles or blog posts, convert at 2x the display width to support high-DPI Retina and similar displays. A content area that displays images at 800 pixels wide needs source images at 1600 pixels wide. The browser serves the 2x image to high-DPI screens and scales it down to the 800-pixel display area, producing sharper text and graphics than an 800-pixel source image. The 2x conversion doubles the file size but produces visibly better quality on modern screens. WukongPDF's PDF-to-image converter accepts pixel width as a direct input, so you enter the target width and the tool calculates the corresponding DPI automatically.
Choose the Right Image Format for Website Delivery
| Format | Best For | Compression | Notes |
|---|---|---|---|
| PNG | Text, charts, line art | Lossless | Larger files, sharp text, supports transparency |
| JPEG | Photographs, scanned pages | Lossy | Smaller files, photo-realistic, no transparency |
| WebP | Modern websites, all content | Both | Best compression, not supported by very old browsers |
| AVIF | Cutting-edge web performance | Both | Smallest files, limited tool support for PDF conversion |
For most PDF-to-website conversions, WebP offers the best balance of quality and file size. A 1200-pixel-wide WebP image of a typical document page is 40 to 60 percent smaller than the equivalent PNG while maintaining visually identical quality. If your website does not support WebP, PNG is the next best choice for document pages containing text, and JPEG at 85 to 90 percent quality is the next best choice for pages containing photographs.
Batch Convert Multi-Page PDFs for Website Galleries
For very large PDFs with hundreds of pages, break the batch conversion into groups of 50 pages. Some conversion tools have memory limits that cause failures on very large batches. Processing in smaller groups takes the same total time but avoids the frustration of a failed conversion at page 347 of 400 that requires restarting the entire batch.
For a multi-page PDF that will become a website image gallery, convert all pages in one batch operation with the same pixel dimensions. The batch produces consistently sized images that display uniformly in the gallery layout. Name the output files with a consistent naming convention that includes the page number, such as document-page-01.webp, document-page-02.webp, and so on. This naming convention integrates easily with gallery plugins and custom JavaScript that expects sequentially numbered image files.
After conversion, run the images through an image optimization tool to further reduce file size without visible quality loss. Tools like ImageOptim, TinyPNG, and Squoosh apply additional compression that the PDF converter may not have applied. The second compression pass can reduce file size by an additional 20 to 40 percent on PNG and JPEG files. For a gallery of 50 document pages, the cumulative bandwidth savings are meaningful for both the website's hosting costs and the visitor's page load time.
Frequently Asked Questions
Should I convert PDF pages to images in the sRGB color space for web use? Yes. Most website images should be in the sRGB color space because it is the standard color space for web browsers. Converting to sRGB ensures consistent color appearance across different browsers and operating systems. If the PDF uses a CMYK or Adobe RGB color space, the conversion to sRGB may cause slight color shifts. Preview the converted image in a browser before publishing to confirm the colors are acceptable.
What if my website is responsive and the image display width changes with screen size?
Convert at the largest display width the image will appear at, typically the desktop breakpoint. The browser scales the image down for smaller screens automatically. A 1200-pixel-wide image displayed at 400 pixels on a phone looks sharp because it is being scaled down, not up. The extra file size from the desktop-optimized conversion is served to all users, which is the tradeoff for supporting the full resolution range. For bandwidth-sensitive implementations, use responsive image markup that serves different image sizes at different breakpoints.
Can I convert a PDF page to an image with a transparent background?
Only if the PDF page itself has no background. Most PDF pages have an explicit white background, which converts as a white background in the image. To produce an image with a transparent background, remove the page background from the PDF before converting. This requires a PDF editor that can delete the background object from the page content stream. The resulting PDF page will have a transparent background, and converting it to PNG will preserve the transparency.
Should I convert PDF pages to images at 72 DPI for web use as is commonly recommended?
The 72 DPI recommendation is outdated. It originated when most computer monitors had a physical pixel density of approximately 72 pixels per inch. Modern monitors have pixel densities of 100 to 200 or more pixels per inch. Converting a PDF page at 72 DPI and displaying it at 100 percent zoom on a modern monitor produces a visibly soft image. Use the pixel dimension method described above instead of a fixed DPI. The correct DPI is whatever produces the right pixel dimensions for your specific website layout.