Its true. Fancy blogs look good, but they take time to load on your visitors browser, and that can cost you. If it takes too long to load, that little voice in their head says “All the pages will take this long, do I really want to click the next link?”
At that point, you have lost them…many for good.
Although I have no hard numbers to back up this statement, I figure you have about 8 seconds. If they aren’t seeing real content delivered in 8 seconds, they are thinking about the next site.
You not only have to focus your small business blogging efforts on delivering great content, you have to ensure it’s formatted well and displayed on screen in a pleasing, well organized way. And fast.
So, let’s take a look at 3 ways you can speed up your small business blog’s page load time with just one factor, images.
Optimize Your Images
To many of you, this might be a foreign concept. An image is an image, right? Wrong. Even within an image type (JPG, GIF, PNG), there are differences.
For example, look at the two images below. They look the same to the naked eye, right? Well, okay, not exactly the same but really really close, yes?
Although they look the same to the human eye, their file sizes differ wildly. The top one is 739,133 bytes, and the one on the bottom is 129,643 bytes.
The one on the right would take only 17% of the time it would take to load the one on the left. Let me put it into perspective for you. The top one takes 13.1 seconds to download to your visitors computer at 56K, and the bottom one takes 2.3 seconds.
You can optimize your images using an image compression tool either online or with your favorite image editing software such as Fireworks, Photoshop or Paint.NET. Just open the image and use the Save As option. Select JPG and choose options. The sweet spot is about 80% (to 90%) of original *quality*.
Resize Your Images
There is a second difference between these two photo’s that isn’t immediately visible.
The top image was left at it’s original size (1024 x 768) and *resized* with the width and height feature inside the blog post editor to match the bottom image (500 x 375). (You can test this by clicking the image. It will display at it’s original size which is much larger than the bottom one, don’t forget to come back and finish reading how you don’t have to live with slow loading blogs)
If you plan to display it at 500 x 375, resize it to 500 x 375. Again, your file size will go down, and smaller is better in our situation.
You can resize your images using an online image editing service or your favorite image editing software such as Fireworks, Photoshop or Paint.NET. Just open the image and select the *transform* tool. Grab the corner of the image and drag until it’s the size you want. Save as instructed above.
Select The Right Image Format
They are not all created equal. You can read more about the differences between image types at Sitepoint, but let me summarize here.
JPG format is intended for photograph type images with lot’s of detail and color changes, like the images shown above. Saving an image at 80 – 90% of original quality hits the sweet spot for image quality and file size.
GIF format supports a maximum of 256 colors, which makes them practical for almost all graphics except photographs. Generally, GIF files should be used for logos, line drawings and icons.
PNG format, a relative newcomer to the web, PNG was designed to surpass the limitations of GIF (256 colors) but provide smaller file sizes than JPG with better compression.
Picnik : Online Image Editing Tool
As a developer, I have access to lot’s of really cool toys and image editing applications, but I could just as easily use the very popular Picnik to do most of what I do. It’s an online service (free to use) that allows you to upload an image, crop, resize, add text (etc) and then save back to your computer.
It’s quick. It’s easy. I recommend you make Picnik (or something similar) your new best friend.
Optimizing, resizing and selecting the right image format based on the image itself will go a long way to making your blog load faster.
Source: Secrets To Web Success. A blog I co-author with Dali Burgado, Deontee Gordon, and Carol Hansen. Together, we help small businesses find their online voice.
Related articles by Zemanta
- Intro to Blogging and Small Business Internet Marketing (secretstowebsuccess.com)
- How to Optimize Images in Adobe Fireworks CS3 (5min.com)
- Adobe Dreamweaver CS3 – How to Optimize Images for the Web (5min.com)
- GIF, JPG and PNG File Formats: Pros and Cons (graphicrating.com)
- 8 Simple Free Photoshop Alternatives that are under 2 MB (makeuseof.com)