Some pretty interesting facts about the internet:

I was looking into this a while back and it just popped back up in my mind again. To reduce bandwidth and page load times some websites will place a majority of their images in a single image and use it as if it were a tile sheet.


Using some a certain combination of CSS properties you can crop out unneeded parts of the image.

Example:
.next-button {
     cursor: pointer;
     background-image: url(tilesheet.png);
     background-position: 32px 0px;
     width: 16px;
     height: 16px;
}

Pretty cool stuff no doubt. It obviously not worth it for smaller sites considering the amount of work it would take to get it setup. But it's always an option for bulky high traffic sites. Keep in mind this is just one out of a thousand techniques Google uses to give you those quick loading pages.

-Posted By Foremost Media Staff Member Kevin W.
Web Resizer
As a web developer, I regularly open a website to see the images on the page slowly load line by line. I immediately know what has happened and think about the day that I will write a blog post about how to resize images for the web. Well, today is the day that I write the post.

The Problem: Large Images

Uploading images from a digital camera will put unnecessarily large images on your site. Today's digital cameras generally produce images that are well over 2000 pixels wide and over 2 megabytes in size. When these images are uploaded at full size to a web page and then displayed at 300 pixels wide, the web browser will scale the picture down to the width, but it is still loading the entire full-sized file. Place two or three of these huge image files on a web page and the page load time will increase drastically.

The Solution: Resized and Web Optimized Images

When placing photos on your web page, you should resize your photos to fit the space that you want them to take up on the page. A web page with optimized and resized images will load much more quickly and the smaller image files will still look as good as their larger siblings.

How does one resize/optimize images for the web?

While Photoshop is a great tool for completing this task, it is expensive and there is a learning curve involved in becoming proficient at it. Thankfully, there are plenty of free and easy to use options available for resizing and optimizing images. Of all that I have seen and used, none has impressed me as much as the online web resizer found at http://webresizer.com/resizer. This is an awesome tool that is extremely easy to use. The site allows you to resize and crop your images and they also provide some basic editing functions to help you get your images looking good quickly. One of my favorite features is the ability to quickly add rounded corners to an image.

This is not an efficient tool for processing a large number of images, but if you only need to resize a few photos for a page you are developing, this is a great option. Another plus is that you do not need to install anything to make it work. Everything is done inside of your web browser.

Take a few minutes to check out the Web Resizer and bookmark it for the next time you need to add images to your site.