Best DPI for Web Images: Resolution Guide for Websites

Why DPI Is Irrelevant for Web

Web browsers completely ignore the DPI (or PPI) metadata embedded in image files. When a browser renders an image, it uses only the pixel dimensions. A 1200 × 800 image saved at 72 DPI is rendered identically to the same image saved at 300 DPI. The files may differ slightly in metadata size, but the visual output is the same.

This is a common source of confusion: designers accustomed to print workflows assume they should set web images to 72 or 96 DPI. In reality, you can save at any DPI - it will not affect rendering, file size, or quality.

What Actually Matters for Web Images

• Pixel dimensions: Serve images at the size they will display (or 2× for retina). A hero image displayed at 1200 CSS pixels wide should be 1200 px (standard) or 2400 px (retina).
• File format: Use WebP for broad compatibility with excellent compression. Use AVIF for even better compression where supported. Fall back to JPEG for photos and PNG for graphics with transparency.
• Compression: A well-compressed WebP image can be 25 - 35% smaller than an equivalent JPEG with no visible quality loss.
• Lazy loading: Add loading="lazy" to images below the fold to defer loading until they enter the viewport.

Responsive Images for HiDPI Screens

On retina (2×) and high-density (3×) screens, images need more pixels to appear sharp. Use the HTML srcset attribute to serve different resolutions:

The browser selects the appropriate image based on the viewport width and device pixel ratio, ensuring sharp images without wasting bandwidth on standard displays.

<img
  src="hero-800w.webp"
  srcset="hero-800w.webp 800w,
          hero-1200w.webp 1200w,
          hero-2400w.webp 2400w"
  sizes="(max-width: 600px) 100vw, 1200px"
  alt="Hero image"
  loading="lazy"
/>

Web Image Optimization Checklist

Calculate the exact pixel dimensions you need for any layout with our Image Size Calculator.

• Resize images to their maximum display size (do not serve a 4000 px image for a 1200 px container).
• Use WebP or AVIF format with quality setting of 75 - 85%.
• Provide 1× and 2× versions via srcset.
• Add width and height attributes to prevent layout shift.
• Use lazy loading for images below the initial viewport.
• Consider using a CDN with automatic format negotiation.

Common Web Image Sizes by Use Case

Unlike print, web image sizing is driven by layout requirements, not DPI. The table below shows recommended pixel dimensions for typical web image placements. For retina screens, double the pixel width to avoid blurry output on high-density displays.

Exporting Images for Web in Design Software

When exporting from Photoshop, Illustrator, or Figma, the DPI setting in the export dialog does not affect how the image renders in a browser. What matters is the pixel dimensions and the output format.

In Photoshop: use Image > Export > Export As and choose WebP or JPEG. Set quality to 75-85%. The resolution field only affects print output and can be ignored for web.

In Figma: export at 1x for standard screens and 2x for retina. The DPI property is irrelevant; only the multiplier changes the final pixel dimensions.

In Illustrator: use Export > Export for Screens. Select pixels as the unit and match the target container size in your CSS layout.

In Canva: download as WebP or JPEG. Canva automatically sets an appropriate resolution. The download size slider controls compression, not DPI.