Why do we use 72 dpi images on the web?

why do we use 72 dpi for internet images when the resolution is much higher?

Why 72 DPI for Internet Images

The use of 72 DPI (dots per inch) for internet images is a historical convention that originated from early computer displays. Here’s a breakdown of why this standard has persisted and its relevance today:

1. Historical Context: Early Macintosh computers used 72 PPI (pixels per inch) to match the screen resolution to the printed output. This made it easier for designers to see their work on screen at the same size it would appear when printed.
2. Screen Resolution: Modern screens have much higher pixel densities than early displays. However, the 72 DPI standard stuck around as a simple baseline for web images because it was a familiar and easy-to-use setting for most purposes.
3. File Size and Load Times: Using higher DPI settings for web images doesn’t improve their appearance on most screens but does increase file size. Larger files take longer to load and consume more bandwidth, which can negatively impact user experience, especially on slower connections.
4. Browser and Device Handling: Web browsers and devices handle images in pixels, not inches or DPI. When an image is displayed on a screen, its DPI setting is ignored; what matters are the image’s pixel dimensions. For example, a 300×300 pixel image will always display as 300×300 pixels on the screen regardless of its DPI.
5. Consistency: Keeping a standard like 72 DPI ensures consistency in image preparation and prevents confusion. Designers know what to expect and can prepare images that are optimized for web use without worrying about differing standards.

Practical Example

If you have an image that’s 600×600 pixels:

• At 72 DPI, it will be displayed as 600×600 pixels on the screen.
• At 300 DPI, it will still be displayed as 600×600 pixels on the screen.

In both cases, the pixel dimensions determine how the image appears on a website, not the DPI setting.

Key Takeaways

• DPI is for print: DPI settings are critical for print quality but irrelevant for digital displays.
• Pixels are king: When preparing images for the web, focus on pixel dimensions to ensure proper display and performance.
• File optimization: Stick to lower DPI settings like 72 to maintain smaller file sizes and faster load times without sacrificing on-screen quality.

Understanding these principles helps in optimizing web images effectively, balancing quality and performance for the best user experience.