1. Home
  2. Articles
  3. Graphic Design
  4. Images
  5. Web Image Formats
  6. Web Image DPI and Retina Displays
Read about images on high resolution displays

Web Image DPI and Retina Displays

Published:

Share

Description

Recently I was discussing the topic of DPI with a friend. At times we both do digital photography and the topic is important when talking about printing the best quality photos. Part way through this conversation I mentioned that web images of the past have focused around a 72 and 96 DPI standard. Upon saying this, I started thinking of another standard for my best practices list. How does DPI, resolution and image format apply to the newer high resolution and retina devices?

Article

In general, if mobile is not something that intestest you, a DPI of 72 or 96 will work. Once mobile and high definition displays enter the picture, a range of images can be provided. To balance overhead and time involved, I am settling on providing an alternate image that is twice the size of the non-mobile image. Implementation will be via the HTML 5 image set attribute.

<img alt="Example Image" src="/images/example.png" srcset="example2x.png 2x" width="600" height="600" title="An example of an image using HTML 5 scrset to provide an image for high resolution displays">

The following links provide great information.

Author

Profile Picture of Bryan Myers - The Web Guy

Bryan Myers - "The Web Guy"

Advanced Digital Channel Engineer

Tags

  1. Articles discussing web related topics and technologies.Articles
  2. Articles related to website graphic design.Graphic Design
  3. Articles about images used in graphic design and web design.Images
  4. Articles covering web image formats including png, jpg, svg, webp and gif.Web Image Formats

Related Articles

Go Back
Copyright 2018 End Head. All rights reserved.