What DPI or PPI for the web?
Web image Viewing!
The images above were uploaded at the resolution 72 dpi (Left) and 300 dpi (Right). They are the same in pixel size but are in-fact now seen at 96 dpi because of the compression by WordPress.
“I use to be the Art Director for Bizarre Magazine, then moved on to become the Senior Art Director for one of the biggest members website on the internet with over 20,000 memberships and a very large collection of image galleries, Danni’s Hard Drive. I was also employed by Perfect 10 magazine to be an expert web image specialist in a law suite against Yardex who had been engaging in using images from the perfect 10’s website which is a copyright violation as Yardex was using them for advertising.” André Felix
Digital viewing requires an appropriate balance between the file size, display potential, and visual quality. You want a resolution that is suitable for every screen without weighing your user’s equipment down, while still looking detailed.
The recommended image resolution for the web is 72dpi, seeing that almost all monitors can display this without going too low and losing visual quality. Going over this won’t only present a worse-looking image, it will also be bad for SEO, as high DPI also means a larger file size, and as such, longer loading time. You can use plugins that optimize and compress your image size without harming the quality too much, a CMS like WordPress will do the compressing for you. Another factor that will affect your image quality is the format in which you save your files — JPEG and WebP are recommended, as their size is usually smaller than other picture formats such as PNG or GIF.
Most people will export at 72dpi, but the most important thing to do is to export at the pixel dimensions at which the image will be displayed on a screen. This becomes a bit tricky in web use, where people are viewing your images on any number of different devices, all of which have different screen sizes and resolutions, but most content management systems (CMS) will allow for this.
Your best bet is to work out the largest size your image will be viewed at and then export your images at that size, and 72dpi. You can if you wish code CSS or HTML to instruct your browser to display the image at 50% depending on the viewer’s screen size. This may be something you have to code yourself, or it might be built into your CMS (WordPress does this automatically).
For web based viewing of images, it’s the screen resolution, in conjunction with the number of pixels, that determines how big the image is displayed on a monitor, not the inbuilt ppi instruction in the image.
The only reason I can think why you put an image at 300 DPI, is so you can use the same image for print and web and don’t need separate versions, assuming the web version isn’t down-sampled for file size… which it often is.
