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.
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.
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.
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.
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