Preparing Images for Mobile Devices

Modern web browsers and content-management systems optimize images to display in any setting. However, it's best to prepare images that are optimized for each possible form factor and location that an image may appear. Focus on three things: image resolution, 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.

Use the RGB mode when preparing images for mobile devices. 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.

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

Image Resolution

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.

Image 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 work with 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 and 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.

About Vector Images

Vector images—images that are computed and drawn by the device–are usually more efficient and higher-quality than raster images (images drawn one pixel at a time) because they can be enlarged and reduced without affecting the image quality. For simple logos, line art, and graphs, a vector version is ideal. Vector formats aren't used for photos.