Working towards higher DPI

| No Comments

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.


So 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!

High Res PNGs are a hack...

So in the end, the high resolution PNG images are a bit of a hack. My intent is to just replace them with SVGs once older versions of Android filter out. My suspicion is that solution might even happen by next summer (2013), so we'll see.

Leave a comment

About this Entry

This page contains a single entry by Dan Sagisser published on July 19, 2012 1:16 PM.

What is this? was the previous entry in this blog.

Going responsive with Off Canvas is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.