Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Chris Converse | Saturday, July 26, 2014

Optimize Graphics for the Mobile Web

mobile-web-hero

When creating graphics for the web, we walk a delicate line between file size and image quality. We want smaller files for faster performing sites, especially on mobile, but we also want beautiful imagery on today/s high-quality screens.

With nearly 20% of all web traffic coming from mobile devices, it’s important to consider the file size of your graphics. The irony of this trend is that mobile devices have higher quality displays and, typically, a slower internet connection. This challenges web designers to create high-quality graphics with smaller file sizes.

This is a pretty tough order, but I have some techniques that can help reduce sizes and optimize graphics for web delivery.

Supporting hi-definition (Retina) screens with smaller files

When supporting high-definition displays, the rule is to double the size (dimensions) of the image. This does produce beautiful images, however, the file size can triple as a result.

One solution is to create the larger file, but lower the quality of the image. This will significantly lower the file size while giving you enough data in the file to avoid pixel doubling on high-definition displays.

In the figure below, I have a photo that has been optimized three ways. The final display size we’re after in our layout is 250×180 pixels. The first image was saved at 250×180 pixels with a JPG quality of 75%, yielding a 23.3 kb file. The second image was saved at 500×360 pixels with a JPG quality of 70%, yielding a 65.8 file size.

The third image, however, was also saved out at 500×360 pixels—but the JPG quality was set to 20%. This yielded a file size of only 20.0 kb. This is smaller than the first image, and shows more detail on a high-definition display.

figure_1_low_quality_retina

In this example, not only is the file size smaller for the larger, low-quality image, but more detail can be seen on high-definition displays as well.

Test the comparison for yourself
Visit this page with a high definition (Retina) display.

Watch a video
Learn to detect high definition (Retina) screens with CSS.

Get to know PNG-8

Most PNG files you see online are PNG-24 or PNG-32. This means the colors are specified in channels of red, green, and blue, and numeric values representing quantities about the pixels. While this extra data brings a greater fidelity to the image, this also comes at a cost of file size.

PNG-8 files use a color index, as do GIF files, which limits the total number of colors. The advantage of PNG-8 over GIF, however, is that they support varying transparency. If you use Photoshop and Illustrator to create your web graphics, you may have dismissed PNG-8 as having the same transparency limitations as that of the GIF format. But the PNG-8 format does support varying transparency options.

figure_2_png8_comparison

Down sampling a PNG file to 8 bits can have a dramatic affect on file size while maintaining the flexibility of varying transparency.

In the example above, the size of the PNG-8 file is 89% smaller than that of the PNG-24 file. And if you scale the image, as we did in the JPG example earlier, you can use fewer colors and maintain even more visual quality.

Watch a video
Learn about free and commercial tools that will let you compress your PNG-24 files into varying transparent PNG-8 files.

Real-world results

If you have ever tried to use the Wi-Fi signal at a conference with nearly 4,000 fellow attendees, you know that every byte counts when trying to find your next session.

At my “day job,” we had the privilege of designing and developing the HOW Design Conference mobile schedule. This HTML5 web application offered many native-app-like features to a myriad of devices with a single set of HTML, CSS, and JavaScript.

At the heart of the application was a series of web graphics that offered branding, navigation, speaker photos, tools, sponsors, and social media links. We used the tools and techniques discussed above to reduce the overall graphic footprint by 67%.

figure_3_howdesign_web_app

The graphic footprint of the mobile web app was reduced by 67%.

Check it out for yourself
View this mobile web app on your phone to review the graphic quality of PNG-8.

Compressing our transparent graphics to PNG-8 provided us with the precious bandwidth savings while maintaining a level of quality and user experience that complimented the conference.

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , , , , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.