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

Modern web browsers and content-management systems optimize images to display in any setting. However, it's a best practice to prepare images that are optimized for each possible form factor and location that an image may appear. Focus on three things: Size in pixels, image size, and color space.

Color Space in Images

Graphic designers rely on two primary color spaces. A color space is a method by which primary colors combine to form complex rainbows of color.

Multi-colored CMYK RGB capital letters
antonioiacobelli / Getty Images

For print, designers use four-process color, where each color distills to a combination of cyan, magenta, yellow, and black. Sometimes four-process images are called CMYK images for this reason.

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

Image Size

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

Most programs, including the Adobe Creative Cloud applications, support an Export for Web tool that shows the image in 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 (images that are drawn one pixel at a time). For simple logos, line art, and graphs, a vector version is ideal. Vector formats cannot be used with complex images like photos because the quality significantly declines.

Size in Pixels

Each image should be sized for its intended purpose. Here are some example image sizes for popular web uses:

  • Internet banner ads are often 468 pixels by 60 pixels.
  • Facebook cover images should be 851 pixels by 315 pixels.
  • Twitter profile photos should be 400 pixels by 400 pixels.
  • Images for shared links should be 1200 pixels by 630 pixels.

When you develop photos for specific purposes, check the place where that photo will appear (such as a social media site or a blog) to verify the optimal image dimensions, then size accordingly to avoid stretching or trimming the 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.