Monday, January 4, 2010

Blog design tip of the day: Helping your pages load faster by using smaller background images

There are a few things you can do to help your blog load faster. One of the main things you can do is to use background images that have been reduced in size or sliced.

Here is the full-sized background I'm currently using for my blog design (plus a watermark). It's from Jacabean Designs' Gift Wrapped scrapbook kit.



If you click on it, you can see just how big this image is. It should be taking a little longer to load than the other images on this page, since it's about 5 MB. It's so big because it was created 12" x 12" in 300 pixels per inch (PPI), which is an ideal resolution for digital scrapbooking.

Using it for web design, however, is a different story. Here are a few things you can do to decrease your image load time.

1. Reduce the image size

The first thing you can do to make this image load faster is change its size. I always start with PPI. In Photoshop Elements, go to Image > Resize > Image Size, and you'll see this screen. Change the PPI and the width and height will change as well. Screens are anywhere from 640x480 for 14 inch monitors to 1152x864 or 1280x1024 pixels for 19 inch monitors, so if I'm going for one background image with no repeat, I make it at least 1280 pixels wide.



2. Decrease image quality

When you save the resized image as a JPG, you'll get this screen. Change the quality of the image and you'll notice that the file size will decrease even more (in this example, it's the 60.1 K under the word "Preview" on the right). I usually make my background images medium quality. If you go too low on this, your image will be pixilated.



3. Use a smaller, repeated image as a background image

Instead of using the entire image, I have gotten to where I cut out a small piece of the image that will repeat well and use that instead. In this image, I can cut out a specific pattern where the dots will line up just like they do in the original image above when it repeats.



The smaller the piece you cut out, the faster it will load.

Then, I tell my HTML to repeat the image instead of just using it once, like this:

background:#ffffff;background-image:url(http://i392.photobucket.com/albums/pp5/mandyhornbuckle/Other%20people%20stuff/GiftWrappedBackground.jpg);background-position: center; background-repeat:repeat; background-attachment: fixed;

The red part of the code above is what tells the image to repeat. If you've sliced your image correctly, it should be pretty seamless. If you look closely, you can probably tell where my image starts to repeat on my background, but most people won't notice that.

Hope that helps! As always, feel free to ask specific blog design questions in the comments of this post.
blog comments powered by Disqus