Preparing Images for Mobile Devices

Imaging for mobile isn't always what it seems

Tourist taking picture of Eiffel Tower with smart phone, personal perspective view, Paris, France

Alexander Spatari / Getty Images

Although modern web browsers and content-management systems do a generally good job of optimizing images to display in any setting, it's still considered bet practice to prepare images optimized for each possible form factor and location that an image ought to appear.

Focus on three things: Size in pixels, image size, and color space.

Color Space in Images

Multi-colored CMYK RGB capital letters
antonioiacobelli / Getty Images

Graphic designers rely on two primary color spaces. This term identifies the method by which primary colors combine to form complex rainbows of color.

For print, designers use four-process color—that is, each color distills to a combination of cyan, magenta, yellow, and black. Sometimes you'll see four-process images called CMYK images for this reason.

Displays like computer monitors and smartphones rely on a combination of red, blue and green pixels. This RGB image is optimized for accurately reproducing intended colors on a screen.

Image Size

Images, especially on mobile platforms, ought to be sized as small as possible to balance quality against speed-of-download on mobile networks and size-of-file against mobile data caps.

Most progams, including the Adobe Creative Cloud applications, support an Export for Web tool that shows the image at various combinations of resolution and compression. Pick the best-quality image at the lowest total size.

Vector images—images that are computed and drawn by the device—are usually more efficient and higher-quality than raster images (i.e., images drawn one pixel at a time). For simple logos, line art, and simple graphs, a vector version is ideal. You cannot, however, use vector formats with complex images like photos because the quality significantly declines.

Size in Pixels

Each image should be sized for its intended purpose.

Internet banner ads, for example, often come in at 468 pixels by 60 pixels. Facebook cover images should be 1640 pixels by 720 pixels and profile photos 344 pixels by 344 pixels; thumbnails for shared links measure 500 pixels by 261 pixels whereas timeline photos are 500 pixels by 750 pixels.

When you're developing photos for specific purposes, check the place where that photo will appear (a social media site, a blog) to verify the optimal image dimensions, then size accordingly to avoid stretching or trimming of your image.

To avoid pixelation, aim for the actual display size. Even if an image is properly dimensioned, if it's not sized correctly, the resulting product may look pixelated if the image must be scaled up to meet the available space.