What is a quick and easy way to reduce your page load time? Serve scaled images. When page load time becomes a prominent search-ranking criterion, Google and Bing will reward you with more organic search traffic. In the interim, your current visitors will appreciate the improved user experience that scaled images provide.
What is a Scaled Image?
A scaled image has identical display and natural dimensions. For example, the background image for the Seattle SEO Network website is 1800 pixels wide by 1125 pixels high. In its current use, the background image’s display dimensions are the same as the original. 
On the other hand, this thumbnail of the background image uses HTML to resize it to 1/25th its original size. While the natural dimensions are unchanged, the display dimensions are now 72 by 45. A similarly scaled image would be 96% smaller than the original and eliminate the time the Web browser needs to resize it.
Which Images to Scale?
Two free tools help you to identify which images to scale: Page Speed Online and Web Developer Toolbar.
Page Speed Online
Page Speed Online (from Google) is accessible from your favorite Web browser and checks any URL against 28 speed-increasing criteria. A check of this blog post identified Serve scaled images as a High Priority opportunity. Clicking Serve scaled images displayed this insight, “The following images are resized in HTML or CSS. Serving scaled images could save 241.4KiB (96% reduction). https://seattlesearchnetwork.org/…/sunny-background4.jpg is resized in HTML or CSS from 1,800×1,125 to 360×225. Serving a scaled image could save 241.4KiB (96% reduction).” Be sure to bookmark the Overview page to repeat the analysis and track your progress.
Web Developer Toolbar
Web Developer Toolbar (by Chris Pederick) is an extension for Firefox and Chrome Web browsers that provides at least three ways to identify images to scale.
- Outline Images with Adjusted Dimensions simply highlights images where the display size is smaller (or larger) than the original.
- Make Images Full Size modifies the contents of the existing Web browser tab. That background thumbnail now expands to its full size, an obvious candidate to scale.
- View Image Information opens a new tab containing each image’s source URL, height and width. In addition, it displays each image at full size. This method is most helpful when you have many images and want to print a record/work list for each page.
Whether you use Page Speed Online or Web Developer Toolbar depends upon your preferences. Page Speed Online is best for creating tabular data you can share with SEOs, clients and Web developers. Web Developer Toolbar is best for visually scanning a page and picking out obvious images to scale. Used separately or in combination, these two tools help you to identify which images to scale and reduce your page load time.
In our next Blog post, we will conclude with ways to scale images using PicMonkey and Yahoo SmushIt. In the interim, please send us your comments about Scaled Images Load Faster.