Reward Your Zoomers

Reward Your Zoomers

When you’re viewing content on a mobile device one of the most common uses is to zoom in on content to view it larger so it’s easier to read or tap. This makes text look crisp and beautiful, especially on the latest high resolution mobile screens, but a side effect is something terrible: images look much much worse. Why should mobile users be punished for zooming in?

Normal image resolution

In the example below, we have a screenshot from an app prototype we’re working on. It has a normal sized (55px) user image which would look nice on a desktop machine, but be pixelated and ugly if you zoomed in.

screenshot

Below is how it would usually look when a user in a mobile browser zooms in to read text. It’s blurry, pixelated and often plagued with compression artifacts.

screenshot

Increase the resolution!

In this case, however, the image is actually 3X the size it should be. It’s secretly 165x165, but the height and width are set at 55px, so when you zoom in on a mobile device you are rewarded by seeing a sharper image that looks nice next to the enlarged text.

screenshot

The effect may seem trivial at first but in practice it gives the user a sense that the page is a fluid, organic thing and not pixels on a screen. It’s a simple and effective trick that’s easy to implement until CSS3 methods become usable.

In a real world test with an actual photograph I found a 55px JPEG was around 6k and a 165px image was 16k. That’s a file size increase I can live with.

screenshot

When not to increase resolution

This technique works particularly well for small images and logos. For images that are already large enough to look decent (around 500 pixels wide) this technique could add unnecessary loading times for some users. Use it sparingly and your mobile visitors will be rewarded with a unique and special experience.

Photos by Jamie Beck

Kevin Burg Designer

FormKeep is a form backend for your static sites. Great with Jekyll or Middleman. No iframes, JavaScript embeds, or CSS overrides. Filter submissions for spam and forward them to other services using webhooks.