Image Performance

Jan 22 2014, 5:47am CST | by

Image Performance

By Lara Swanson

Images make up the majority of most sites’ page weight. Thanks to their size and the number of image requests made by an average site, optimizing images is arguably the easiest big win when it comes to improving your site’s page load time.

Let’s start by looking at the various image types available, and then work through the various options you have for optimizing them.

Image File Types

You have a range of file types to choose from when creating images for your site. When generating an image, ask yourself:

* How compressed can this image be?
* How many colors are needed?
* Do I need transparency?

When you need transparency in your image, PNG is your best choice. GIFs also support transparency, but they tend to be much heavier than PNGs. PNG-8 contains a maximum of 256 colors within the image, and generally result in a smaller file size. If you have a small number of colors in your image, PNG-8 will likely be your best option of all image file types, thanks to its small size. While Photoshop supports exporting PNG-8 with binary transparency, it also supports creating PNG-24 images with partial transparency as well as millions of colors. This naturally results in a larger file size.

Use JPEG for photos and other images with tons of colors. JPEGs do not support transparency. JPEG is a lossy compressed file format, unlike PNGs, which are lossless. While you can use PNGs for photos, they will often be five to ten times larger in file size than JPEGs because they are lossless. Since you're aiming for the smallest file size to decrease page load time, and web images typically have more than 256 colors, it's no surprise that the majority of the images analyzed by HTTP Archive are JPEGs.

Optimizing Image Request Size

If you use Photoshop, test out a few different qualities and file types in the Save for Web workflow. You’re aiming for a happy medium of acceptable quality and small file size. Most people find that for JPEGs, 80-90% quality works well, but it’s important to play with the file size and see what level of compression is noticeable. Look for artifacts, inaccurate contrast between elements, and blurry details and text.

After you’ve exported the image, run it through a tool like ImageOptim, which finds the best compression technique for a variety of file types. There’s also SmushIt, which is an online lossless image optimizer. These tools can save you a ton of additional file size by finding ways to reduce the image size without visibly reducing the quality of the image.

Optimizing the Number of Image Requests

In addition to decreasing your images’ file sizes, it’s also important to decrease the number of image requests on the page to improve page load time. One way to do this is to combine images into sprites. Your page weight might increase slightly because you’ll have one large image file and additional CSS to position the site elements, but it’s likely that combining images into a sprite will be a huge win for page speed.

Another way to decrease image requests is to replace them with CSS3 gradients. CSS3 gradients (aka visuals):

* Can handle transparency
* Can be overlaid on a background color
* Eliminate an image request
* Are super easy to re-edit


CSS3 can be a great, performant replacement for images. Don’t worry about the extra page weight from the vendor-prefixes in CSS3 syntax; if you arent’ already, you should be using GZIP on your site, which will take care of optimizing this code. Even though you will be loading more CSS, it’ll still be a faster-loading option than an image request.

You can do some pretty amazing things with CSS3 gradients because of the control over where colors begin and end. That being said, be careful how your CSS affects repaint times, as there can be a cost to using a lot of CSS3. A repaint is an expensive operation performance-wise and can make your page look sluggish. If you find that your user interface does become sluggish, especially upon scrolling, you may have a CSS3 or JavaScript repaint issue and will want to diagnose what’s causing it using tools from JankFree.org.

Optimizing images is likely the biggest win for performance on your site. As you take a look at the images on your site, ask yourself:

* Can I save any file size by choosing a different image format?
* Have all of my images been run through a lossless compression tool?
* Can any of my image requests be replaced with gradients or sprites?
* Is there any UI slugishness that could be due to repaint times?


In the next post, we’ll cover optimizations you can make to the HTML and CSS of your site such as creating design patterns that can be repurposed, identifying the best naming patterns for your elements, and caching assets correctly.

Additional Resources

This post originally appeared on O’Reilly Programming (“Image Performance“). It’s republished with permission.

Source: Forbes Business

 
 

Don't miss ...

 

<a href="/latest_stories/all/all/30" rel="author">Forbes</a>
Forbes is among the most trusted resources for the world's business and investment leaders, providing them the uncompromising commentary, concise analysis, relevant tools and real-time reporting they need to succeed at work, profit from investing and have fun with the rewards of winning.

 

blog comments powered by Disqus

Latest stories

Hawkeye Technology Improves Time Clock Reporting and Payroll Integration in TimeClick LE 12
Logan, UT, April 18, 2014 --(PR.com)-- Hawkeye Technology, creator of TimeClick, a leading employee time clock software, announces the release of TimeClick version LE 12. This new version offers powerful new reporting...
 
 
Airbnb Cofounders Are Billionaires As Share Economy Leader Closes $450 Million Round At $10 Billion Valuation
It took a month, but Airbnb’s founders are confirmed as the share economy’s first billionaires, at least on paper. That’s because the home-sharing site has closed its new fundraising round, raising $450 million at a $10...
 
 
`Taxpayers Rely On IRS Guidance At Their Own Peril,' Tax Judge Rules
Before filing your 2013 tax return, did you  consult an Internal Revenue Service publication for clarification of some confusing point? That’s living dangerously. Or so a U.S.  Tax Court Judge declared this week. “...
 
 
Predicting The Most Expensive Games Of The 2014 NFL Schedule
Even at the times of little news during the offseason, the NFL keeps fans in anticipation of what might come next. With less than a month until the NFL Draft, the release of the 2014 NFL schedule is expected sooner. For...
 
 
 

Latest from the Network

The New Role Of Leaders
When Alfred Sloan created the modern corporation at General Motors, he based it on the military.  The company was split into divisions, each with its own leadership.  Information flowed up, orders went down and your...
Read more on Auto Balla
 
Marisa Tomei is too old to play Lady Gaga?
Marisa Tomei thinks she's too old to play Lady Gaga in a movie. The 'The Wrestler' actress was flattered to hear the 'Applause' hitmaker would like her to play the 28-year-old singer if there is ever a film made about...
Read more on Celebrity Balla
 
Hawkeye Technology Improves Time Clock Reporting and Payroll Integration in TimeClick LE 12
Logan, UT, April 18, 2014 --(PR.com)-- Hawkeye Technology, creator of TimeClick, a leading employee time clock software, announces the release of TimeClick version LE 12. This new version offers powerful new reporting...
Read more on Business Balla
 
Airbnb Cofounders Are Billionaires As Share Economy Leader Closes $450 Million Round At $10 Billion Valuation
It took a month, but Airbnb’s founders are confirmed as the share economy’s first billionaires, at least on paper. That’s because the home-sharing site has closed its new fundraising round, raising $450 million at a $10...
Read more on Business Balla
 
`Taxpayers Rely On IRS Guidance At Their Own Peril,' Tax Judge Rules
Before filing your 2013 tax return, did you  consult an Internal Revenue Service publication for clarification of some confusing point? That’s living dangerously. Or so a U.S.  Tax Court Judge declared this week. “...
Read more on Business Balla
 
Predicting The Most Expensive Games Of The 2014 NFL Schedule
Even at the times of little news during the offseason, the NFL keeps fans in anticipation of what might come next. With less than a month until the NFL Draft, the release of the 2014 NFL schedule is expected sooner. For...
Read more on Business Balla
 
How The Wealthiest Families Make And Lose Their Money -- Part 5
In this series of articles on wealth creation and maintenance, we have hit on a few key findings of researchers and practitioners.  The vast majority of family wealth stems from business ownership and not inheritance. ...
Read more on Business Balla
 
Can High-Speed Internet Spark Better-Paying Jobs?
Many of us look at high-speed internet as a way to enjoy pleasures like clearer HDTV and speedier Wi-Fi. But as lightening-fast service gets rolled out in new markets, it could also pave the way to innovation–and new...
Read more on Business Balla
 
For NHL and NBA Playoffs, Parking, Like Tickets, Also Have A Premium
When the Nets and Raptors tip off tomorrow afternoon, the NBA playoffs will be underway.  Along with the NHL playoffs, many think the next two months are the most exciting in all of sports. Over the course of the next...
Read more on Business Balla
 
The Week Ahead: A Spring Breakout for the Economy?
Just a week ago the stock market was looking quite vulnerable as most of the major averages closed near their lows last Friday, April 11. There were signs of heavy selling, so I concluded last week that “On a short-term...
Read more on Business Balla
 
 
Auto Balla Sexy Balla Sport Balla TV Balla Politics Balla Movie Balla Apple Balla Business Balla Ad Balla Celebrity Balla