Create Better Graphics for the Mobile Web

It should come as a surprise to exactly no one that more than half of all internet traffic these days comes through mobile devices. We’re all hopelessly devoted to our tiny screens - and their resolutions are growing with every release. This state of affairs presents a challenge to those of us who design web content: how can we create rich images that look great on mobile displays and are small enough to load quickly over slower connections?

Rather than resign ourselves to sub-par graphics, we’ve collected a couple of techniques that will help you optimize your graphics for the mobile web withoutabandoning image quality.

Technique 1: Bigger image, smaller file

The issue: When designers create images for Retina displays, the standard approach is to double the dimensions of the image. That would be fine, except for the fact that this can triple the file size and seriously impact load times and data usage. Ouch.

The solution: Go ahead, double the dimensions; just lower the image’s quality factor when you do. When you save your graphic as a JPEG, you can usually knock down the quality by a couple of ticks without negatively impacting the appearance of the image. Check out the table below to see what I mean: doubling the dimensions of the original image (from 250x180 px to 500x360 px) and lowering the JPG quality from 70% to 20% actually yields a file smaller than the original, but still packs it with plenty of detail for those high-definition displays. 

How to implement this in your work: Learn to detect high-definition (Retina) screens with CSS 

Technique 2: Get to know PNG-8 

The issue: Most of the PNG files you see online are PNG-24 or PNG-32. These carry extra information about your file’s colors, but using one of these options usually means inflating your file size with bytes that you just don’t need for a good web graphic. 

The solution: PNG-8 all the way. This file type uses a color index (like GIF files) which limits the total number of colors. Unlike GIF files, however, PNG-8 files support transparency. Downsampling from PNG-24 to PNG-8 can have a remarkable effect on file size while still supporting varying transparency in your image. 

How to implement this in your work: Learn about free and commercial tools that let you compress PNG-24 files into varying transparent PNG-8 files. 

Okay, but does it work in the real world?

Yep, we use these tricks every day. Here’s an example from our design dossier: We go to lots of conferences where we have to share a wi-fi signal with thousands of other attendees. When everyone is using that signal to find their sessions at the same time, every byte counts - and waiting for a page full of heavy graphics to load on your phone can be torture.

So when we were asked to design and develop the HOW Design Conference mobile schedule, we knew from experience that we had to keep our graphic footprint small. We built the schedule as an HTML5 web app that delivered native-app-like features to all kinds of devices using a single set of HTML, CSS, and JavaScript - and we packed it full of graphics ranging from branding to navigation tools, from speaker photos to social media links. 

In the end, we reduced the app’s initial graphic footprint by a whopping 67% - just by compressing all our transparent graphics to PNG-8. Happily-scheduled conference attendees got the best of both worlds: killer image quality, and low bandwidth usage. 

Check out the mobile web app on your phone and see for yourself how good those PNG-8 images look.