If people are viewing your content on iPads, MacBooks and other new Apple devices they may not be seeing the best image quality thanks to the new “retina” screens. Most images contain 72 dots per square inch. Retina screens show images optimally at 227 dots per inch.
1. Use SVG (vector) images when possible.
You can convert PDF vectors to SVG, PNG, JPG and more using the free website Cloud Convert.
2. Scale your PNG and JPG images.
A lot of people think you need to set the image DPI in Photoshop for this but it’s really about the overall dimensions not the pixel density. The larger your source image, the better it will look on every screen. Especially with responsive design templates.
To prove DPI means nothing I have saved the same image in 72 and 300 DPI using identical pixel dimensions. As you can see they both get jagged edges when you increase the browser magnification (Command +).
The best result was using a larger pixel dimension and shrinking it to fit. Of course the trade off here is file size.
Use your browser zoom feature to see the scaling issues (Command + on a Mac).
Conclusion, although SVG images are future proof because they are true vectors, the file size is prohibitive. My advice is to make your images 3-4 times larger than you plan to display them. This will increase the quality on retina displays, responsive designs and browser zoom in.
8 Bit PNG files are smaller in KB than 24 bit and rarely show a difference when starting with vector source files. I recommend them for optimization purposes. The edges however, may be a bit jagged on certain transparancies.