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.
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.
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
Now log into WordPress and go to Dashboard > Settings > Media.
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.
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.
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.