Chris Converse |
Saturday, July 26, 2014
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.
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.
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.
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.
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.
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 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%.
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.
Tags: Chris Converse, GIF, JPEG, Mobile Graphics, Mobile Web, PNG
Check out these popular Web courses.
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:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.