Don’t Let Images Bog Down Your Blog

Speed Boost

Image copyright craftvision – iStockphoto.com

Using images in your posts can really enhance your blog. They can grab your reader’s attention and help drive home your point. None of that matters, though, if your images slow your blog down so much that no one waits around to read what you have to say.

Since I’m starting to use quite a few images in my How-To posts, now’s the time to configure my blog so that my images download as quickly as possible.

Here are four ways you can do to make sure your images don’t slow down your site.

1. Optimize your images

Resizing and compressing your images are the most important steps you can take to make sure your blog loads quickly.

Let’s say you want to post an amazing image you shot with your 12-megapixel camera. The dimensions of that high-resolution image (4240 x 2824 pixels) are much larger than the 600-700-pixel width of a typical blog’s content area. Uploading the full resolution is simply a waste of disk space and bandwidth, and using html to resize the image also taxes the CPU.

You should resize the image to the exact size you want it to be seen. If your content area is 600 pixels wide, then resize your image so that it is no wider than 600 pixels.

Once your image is resized, convert the image to a compressed format (if it’s not already) like JPEG or PNG. In most cases, the JPEG format is the best choice. Don’t set the quality level, which controls the amount of compression, too low or you’ll create compression artifacts that will make the image look grainy or blocky. Use the PNG format when your image is small or is simple looking, like a diagram, or a screen capture.

You can further compress images without creating artifacts (lossless compression) using web tools such as Smush.it, or downloadable software such as ImageOptim (Mac) and PNGGauntlet (Windows).

2. Host images on a subdomain

Did you ever have a kiddie pool? Do you remember how long it took to fill it up with your one hose? What if you could’ve used your neighbor’s hose at the same time and filled up the pool twice as fast?

Most web browsers allow only two to four “hoses” or connections from a single domain (like TheHobbyBlogger.com) to download content. So if you have a lot of images on your blog, your readers might have to wait for one or more images to load before they can begin reading your content.

By creating a subdomain such as img.yourdomain.com to host your images, you effectively add a second set of hoses to fill your readers web browsers. This allows your blog content to load simultaneously with your images and speed up your page loads.

An alternative to creating your own subdomain is hosting your images in the cloud with photo sharing sites like Picasa or Flickr. I thought seriously about using Picasa to host my images: keeping my host fast by letting someone else serve my images was attractive. However, I was worried about others hotlinking my purchased images, and I have reservations about hosting my images on a site I didn’t control. What would happen in the (very unlikely) event that Google no longer existed? Or what if I no longer agreed with their terms of service? It’d be a lot of work to migrate my images to another site.

Create subdomain for images

Jafaloo’s tutorial helped me set up my image subdomain. I deviated from his tutorial slightly by creating a folder named img in my WordPress root folder, and pointing it to my subdomain.

Create a subdomain

wordpress_root_folder is the folder where all your WordPress files live. If, for example, you installed WordPress in your web root folder, then your document root folder for your subdomain would be public_html/img. If you installed WordPress in a subfolder such as wp, the you’d enter public_html/wp/img.

Now log into WordPress and go to Dashboard > Settings > Media.

WordPress Media Settings

By default, the “Store uploads in this folder” field is blank, meaning WordPress uses the wp-content/uploads folder located in WordPress’s root folder to store images uploaded into its media library. The folder you specify here is relative to your WordPress root folder. So when I enter “img” in this field, I’m actually specifying the public_html/wordpress_root_folder/img folder. This folder must be the same as the “Document Root” folder used for creating the subdomain.

In the “Full URL path to files field” enter the subdomain you just created.

Now when you upload images to your WordPress media library, the images will be located in your subdomain and will load separately from your other content.

3. Prevent images from being hotlinked.

The only thing worse than someone downloading your images and putting them on their site is when they skip the download and hotlink the images instead. When someone hotlinks your photos, screenshots, and other graphics, they are using your bandwidth and slowing down your blog.

To prevent hotlinking, you have to create a .htaccess file and put it in the folder where you store your images. It’s a text file that contains code to control access to your web server’s files and folders, and yes, there has to be a period at the beginning of the filename.

In your .htaccess file, you need to write some rules that allow image requests from your own domain, otherwise your blog won’t display its images. You also need to specify which file types should be protected (e.g. jpeg, jpg, png, gif).

Optionally, you can allow search engines to request your images. Having your images indexed by search engines is a way to draw more traffic to your site, particularly if you make use of an image’s alt tags.

You can also create a hotlink image that shows up on any site that tries to hotlink your images. Use any simple image editor to create an image that says something like, “This image is hosted at yourdomain.com.” Try to avoid saying anything nasty because many who hotlink images are innocent newbies who may not know any better.

There are lots of resources on the that show how to setup your .htaccess file for hotlink protection, but Perishable Press has the most complete and well-explained page that I could find. He has two code snippets, one simple, and one more comprehensive, that you can copy and paste into your .htaccess file.

The simple one only needs you to edit one line and you’re ready to go. The comprehensive version is more flexible, including rules to allow search engine access, and to show a hotlink image.

Creating the .htaccess file

But how do you create a .htaccess file? One way is to create a text file on your computer and upload or ftp the file to your web host. Another way is to create the file using the file manager that’s available from your web host’s control panel.

Alternatively, web host providers like HostGator provide a form you can fill out to enable hotlink protection, but I prefer using a .htaccess file based on the Perishable Press template because of its flexibility.

Hotlink Protection on HostGator

Once you’ve setup your .htaccess file, test your hotlink protection. Just make sure you clear your browser’s cache first.

4. Make sure cookies aren’t served on the subdomain

Cookies are relatively short text messages sent back and forth between web servers and web browsers to help track users and customize web sites. However, cookies are pointless when serving static content like images, needlessly slowing down your page loads.

Yahoo!’s Developer Network recommends setting up your subdomain so that cookies aren’t sent along with your images. I found a good post on Ravelrumba that shows how to set up a cookieless domain.

Summing it up

Optimizing your blog for speed is critical to ensure your visitors spend a lot of time reading your content. Not only that, your blog’s speed also affects your search ranking. Images are your blog’s bandwidth hogs, so implementing the four techniques described above will go a long way toward offering your readers a pleasant experience when they visit.

How do you speed up images on your blog? Post your tips in the comments.

Article by Bryan Kerr

I love breaking down the techie side of blogging into easy-to-understand tutorials. That's mostly what you'll find here on The Hobby Blogger.

Comments

  1. Hi Bryan,

    Really this is a nice post and thanks to for providing a link back to our tutorial on Jafaloo. That is really a good article. Keep it up. Good work

    • Bryan Kerr says:

      Thanks Guru. I really appreciate the complement. And thanks for your tutorial. It was clear and easy to understand, like the rest of your site. All the best.

  2. Just have to say it. The speed at which your images are loading does not affect at all the ranking of your website. Actually, even the loading of your HTML doesn’t affect your ranking much. It’s one of more than 200 factors of ranking currently, and the least important one. If you are using good USA-based hosting provider – you don’t have that problem at all.

    Besides, your visitors will not have to wait for your article to load if your pictures are loading slowly. That’s because the HTML part is loaded first. That’s your HTML where the links to all images lays, and it will be displayed and rendered (CSS + JS) before images will even start to load.

    Take a look at ProBlogger – he doesn’t host images on another sub-domain, and although he is not tech pro, you may notice that his position at Google is very high and website is loading fast. Take a look at the source of your page. How many links to images you see? And how many links to CSS and JS files? So what’s the bigger problem?

    One advice to you, though. Make sure your image’s file name contains keywords you want it to have. Better if the same keywords as the article is aiming at.

    And regarding the formats. No, JPEG is not better than PNG for a single reason – it’s usually interlaced by default, while most common tools do not provide that feature for JPEG file. Basically, interlacing means that you will see the whole image while it is loading, with quality improving with download progress. Besides, you never know how PNG will be displayed on user’s computer, so using JPEG is a safe bet. Personally, I don’t have a rule for that and use either of them.

  3. Bryan Kerr says:

    Thanks Dmitry. I love getting comments like this because it helps fill in the gaps as I learn. It’s good to know that image load speed doesn’t affect page rank. Can you point us to a good source that lists the 200+ factors? I’d love to learn more.

    While I agree that visitors can begin reading before the images load, I think that slow loading images contribute negatively to a visitor’s first impression of a blog’s quality or professionalism. You’re right about ProBlogger, but most of his posts have no more than one image, if that. My posts often have several images, so using a subdomain on my site will have a more significant impact on my site than Darren’s.

    Great point about using keywords in the image filename. I do need to get better at that.

    Interesting point about PNG interlacing. Though I wonder if it helps to improve user perception of image load speed. Will they still think it’s loading fast if the image isn’t at full quality right away? And for photos, I think the better image quality of JPEG files outweighs the speed gains using PNG.

    Great comment. Thanks for taking the time.

    • When posting image on your website, you don’t set your JPEG quality at 100%. If you have a good blogging platform, it will create a JPEG interlaced thumbnail for you, with approximately 80% quality, which will then link to the unchanged original (or, perhaps, you won’t need to have original at all, but then it will be 80% quality copy anyway). The key there is to load faster, and your blogging engine will do that for you. Well, the one I am using for my blog certainly does this job well.

      Now, regarding the speed measurement again. See, there are two factors. First is how fast the Google bot is getting your page. That’s HTML only, but recently it started to parse JavaScript as well, although I haven’t seen it to get my .JS files (and I inspect web server logs thoroughly), so we can safely assume it is loading the JavaScript found inside the HTML file. I don’t think Google bot is using this measurement in anything but his own parsing schedule.
      The second factor is more interesting. How fast your page loads on end-users machine. With all images, scripts and Ajax – but the trick here is that this parameter is only measured if you have Google Analytics on your website AND your client is using either HTML5-compliant browser or Google Toolbar.

      Now think for a moment – what kind of users are using Google Toolbar or any 3rd party toolbars at all? Usually the ones who tend to use everything they find in the Internet. And how fast is their Internet connection and computer performance? Usually low to very low. And that is why this factor is the last to consider. It’s just not reliable.

      And the last but not least factor – the problem itself. The two connections per server is the limit stated in HTTP 1.1 protocol. However, no browser is compliant these days! Chrome has limit of 7 connections per server, MSIE 8 and FireFox – 6. That’s pretty much enough to completely retrieve any page of yours in a single attempt.

      Moreover, as websites begin to use bundling (you may not even know they do, until you look at the source of your page when it loads in your browser) – some modern blog platforms are using it, but now it is also standard part of ASP.NET 4.5, so think about it as about the feature that will be implemented everywhere in no time. Bundling means, that all of your separate JS and CSS files are merged into one, and loaded in single request, without consuming more connections.

      There are many tools for web load testing, like ASP.NET Profiler – they allow you to simulate the load from many concurrent “clients”, even simulating the behavior of specific browsers. You may try to use one of such and see whether your tactics pays or you’re just wasting your time.

      Oh, and regarding the 200+ factors – Google has a channel on YouTube, where they often speaking about the SEO optimization and how it all works. They mention the “230 or something” factors and it sounds exactly like that – even if you would have the exact list, it changes every day. Besides, selling such list would make someone a millionaire in one day :)

      • Bryan Kerr says:

        You’re right on about setting the JPEG quality to something around 80%. What blogging engine are you using? I don’t leave anything to chance and do all the compression before I upload.

        Regarding speed measurement, I’m not concerned about people actually measuring my site speed. I’m just trying to optimize enough so that the casual visitor doesn’t sit twiddling his or her thumbs waiting for the site load thinking, “This site takes to long to load. Buh-bye.”

        Ahh, I hadn’t realized the newer browsers were now allowing more than two simultaneous connections per server. It makes sense. The HTTP 1.1 (1999) is a bit outdated with all the bandwidth that’s now available. Thanks!

  4. i tried to find the best way to setup subdomain that doesnt sent cookie…
    is there an easiest way to do it??

    • Julian, since your images are on your imgs.mobile-arena.com subdomain, all you have to do is add this line to your wp-config.php file:

      define(‘COOKIE_DOMAIN’, ‘www.mobile-arena.com’);

Speak Your Mind

*