So I've been working for a while on making higher DPI graphics work on the sites I make. The obvious intial target being iPad screens, though I have no doubt other devices, and laptops will follow. I've been trying to get SVGs to work, but I finally hit the point where I gave up on SVGs (for now) and went with higher resolution PNGs. So I figured I'd write a post about my successes and failures with high DPI...
SVGs of course aren't really higher DPI, they're vector based... so they basically eliminate the need to worry about DPI at all. From my testing they also turned out to be quite small files too!
How do you get them to work? It's a bit hard to figure out how to edit and export them in the first place.
- Use illustrator, and it's just a lot of trial and error to get them to export right... make sure you're exporting the image, and not the whole canvas.
- Once you put them on the server, make darn sure to check the MIME types, this tripped me up for a few days, and the documentation is awful on it, but a lot of servers need them added.
So why not use them? Well... basically I ran into this point where the only way to use them well was with java script. It just felt funny to do something as simple as placing images on the site with java script. The reason for this is because of some bad implementation in Android, so effectively you can't do progressive enhancement and have it still work on Android versions older than 4. My solution is basically to wait until next summer when there are way less of those phone and look at it again.
PNGsSo in the end I went with what was basically big PNGs. If you've done graphics in photoshop, this is a really easy course to take.
- Make your graphics twice the height, and twice the width. Then just export them at that size.
- When you go to put them in the site, just use HTML, or CSS to size them to normal size. On a high DPI screen they'll look really nice.
- Wait, what about old versions of IE? Well, I used all of these high DPI images as CSS background images, and I set them to over write the previous background image just on high DPI screens (use a media querry, and set it to 1.5 times normal size), that way IE won't see the higher resolution images, so no problem shows up!