Optimizing Images for the Mobile Web

Thanks to mobile devices, the average user’s expectations for the web today are far greater than ever before. This places a growing importance on the roles of designers and developers in delivering a user-friendly experience that meets the demands of instant gratification.

According to The New York Times, “people will visit a web site less often if it is slower than a close competitor by more than 250 milliseconds (a millisecond is a thousandth of a second).”

Obviously no one likes to wait. But if you are a responsible business owner, it is vital to ensure your customers don’t experience any hesitation when a potential sale could be made. This delay is even more crucial for the mobile shopping experience, where consumers are looking for the quickest and closest viable option to meet their needs. The secret to online success for any business begins with ensuring reasonable load times on your site.

One of the most basic steps a site administrator can take towards reducing a site’s load time is to optimize images and other visual multimedia properly.

Questions to Ask Yourself

Do I need this image at all?

Remove the image entirely if it is not needed or the information can be communicated in a different, web-friendly manner.

Is there text encoded in the image?

Use web fonts whenever possible to overlay text on an image. It will always look sharper than a compressed image with encoded text and doing so gives you control over text sizes for mobile viewing, ensuring the text never becomes illegible.

Using the “Save for Web” Option

Creating images that are optimized for viewing on the web involves a tricky, but necessary tradeoff between size and quality. When editing graphics or photographs for use on a site, the option to “Save for Web” should be your best friend.

Adobe explains, “when you save an optimized file using the Save For Web & Devices command, you can choose to generate an HTML file for the image. This file contains all the necessary information to display your image in a web browser.”

The “Save for Web” option gives you the choice of creating a GIF, JPEG, PNG-8 or PNG-24 from your existing creation that can be further optimized based on your needs. These represent the most common formats for visual web elements and offer different features for a variety of digital applications.

Google reminds us, “there is no single best format or ‘quality setting’ for all images: each combination of particular compressor and image contents produce a unique output.”

Lossy vs. Lossless Compression

Mastering user experience on the web requires both an acceptance and understanding of our greatest human imperfections, habits, and tendencies. One of our most notorious shortcomings lies in our ability, and arguable inability, to see.

It is simply not necessary to provide users on the web with the highest quality image format possible because our eyes are not capable of detecting the kinds of minute differences in quality that accompany well-compressed images. Compressing an image effectively yields a manageable file size with slight differences in quality that will otherwise go unnoticed. For quick results, check out Compressor.io, a powerful online tool that can reduce an image’s size while still maintaining high visual quality.

• “Lossy” filters will eliminate some pixel data

• “Lossless” filters will compress the pixel data

Google explains, “the difference between various image formats, such as GIF, PNG, JPEG, and others, is in the combination of the specific algorithms they use (or omit) when applying the lossy and lossless steps.”

Understanding how the human element influences design can reveal opportunities for optimization without sacrificing the clarity of the message.

Choosing the Right Format

While there is no definitive right or wrong way to go about image optimization, this graphic should be able to give you some direction based on your image’s specific needs and use.

While image optimization can be an excellent starting point for cutting down on your site’s load times, check out our post on “Prioritizing Page Speed Optimization” for even more ways to make sure your site loads faster than the competition.