Speed Up Blog Loading Time by Optimizing Images You Post

Tweet

Pin It

 

Tips on Speeding Up your Blog's Loading Time by Optimizing Images You Post
(4-Part Tutorial/Guide)

I love browsing through a lot of blogs on the Adgitize and Entrecard networks, plus the ones on my blogroll. At times, I wanted to do more browsing to get to know more bloggers, but, because of too oversized images or too many widgets, some of the interesting blogs I've visited take time to load. Most of the time, I give up and just leave the blog/site.

I'm using Google Chrome and Mozilla Firefox as my main browsers. Even with Chrome, those slow-loading blogs still take time to load. There were even a couple of instances when these blogs caused my browsers to crash, which can really be a hassle especially when you're doing something else on another browser that you need to be left open.

Most of these bloggers/offenders don't even know that this is going on with their blog. Most of them are using high-speed internet connection so when they preview their blogs, they load very quickly. There are also some who love posting high-resolution images on their blog without realizing that a lot of their visitors won't be able to enjoy seeing those photos if they won't even load on their browser because of their internet connection or because there are just too many large-sized images on your blog. The stress of waiting might cause your visitors to use adult acne treatments. *LOL*

If your blog or site loads very slowly, you can lose a lot of potential followers and readers. That is why optimizing your blog posts and images for faster loading on any browser is very important. However, a lot of bloggers don't take this seriously or they just don't know how to do it.

So, I have decided to write this guide on how you can optimize images on your blog for fast loading on any type of internet connection WITHOUT compromising the quality of your photos.

For this guide, I'll use a photo of me and my brother in Cebu. Here's the original image (347kb). No resizing or editing has been done with it yet so I decided to just put up a link so my blog won't load slowly (that's one tip! Read on for more tips!). I'll be featuring 2 tools that I use to do this and on the second part of the guide I'll use the freeware image editor Irfanview.

Important Reminders: This guide will be focused only on PHOTOS (e.g., taken using a digital camera), not graphics (usual file extension: .gif, .png) since the quality of your images will vary on the file type/extension, too. I'll provide links for further guides on different image formats when we get to the next part of this guide and on Part 3 – using Photoshop.

---

Part 1: Speed Up your Blog's Loading Time by using Thumbnails/Text Links

I know, you want to share your images in high resolution to the rest of the world, especially if you maintain a travel or food blog. I share the same sentiments. However, you have to take into consideration that NOT ALL of your visitors have high-speed internet connection. Yes, it's already 2010, but most people don't really use their internet connection for sending and downloading large files so they're pretty satisfied with a 384Kbps internet speed... sometimes, even lower or they stick with a dialup connection. And if you don't optimize your blog for fast loading time, then, you'd lose those potential followers/readers of your precious blog.

---

Tip #1:

I already gave away one of my first tips a few paragraphs ago: Use a link for visitors to view the original image, a higher quality version of it, or to zoom in. Here are a few examples of how you can do this:

1. Create a copy of your image and resize it to fit perfectly on your blog/site's layout (guide on how to do this on Irfanview & Photoshop will be up next).
   Then, put up a link at the bottom of the photo for visitors to zoom in or take a closer look.
   OR you can just make the image the link itself so when visitors click on it, it'll open up a bigger, higher quality version of it.
   
   NOTE: You can use your web host or use photo hosts like Imageshack, TinyPic, or ShareAPic (you can even make money with them!). I actually prefer my larger images to be hosted somewhere else so loading them on my site won't take that long. 
   
   
2. Use simple text links for visitors to view larger images without the use of thumbnails. This will speed up your blog, but some might result to comments that your blog's lifeless because you don't use images.
   
   Here's an example I took from the first part of this guide: 
    

---

Tip #2:

Use Thumbnail/Zoom-in/Image viewer plugins for your images.

I love these image viewer plugins! Instead of the links to your larger images opening up on another blank/boring window, these plugins will "dim the lights" on your blog and will zoom in to your image on the same browser window. This is also extremely useful if you want to display galleries on your blog.

For Wordpress bloggers, use a zoom-in plugin like Lightbox and Shutter Reloaded.

For Blogger users, there's also a Light box Image Viewer for us.

These plugins don't necessarily improve your blog images loading time, but because you're only showing thumbnails, the

---

Tip #3:

Always include the width and height of your images/thumbnails. This is automatic for most blog post editor like Windows Live Writer. However, for instances wherein you need to enter code manually like if you're coding your own sidebar images/links, make sure you include the width and height values. This way, the browser can already "reserve" a place for your images while the web/blog page is loading.

This tip will also increase readability of your blog since your readers can already start reading your posts while waiting for the images to load completely.

I highly recommend you use Windows Live Writer for writing posts for your Blogger, Wordpress, Typepad, etc., blogs. It really makes everything easier! I'll write a guide on how to use Windows Live Writer after this series. :)

Here's an example of how you can indicate the height and width of your images manually:

<img src="http://i42.tinypic.com/33m2xj6.jpg" width="400" height="300">

That code will show a smaller/thumbnail version of this original image. Take note that even though it will load a smaller version of the image, it will still load the original image size (all 347kb of it), but will only allot 400x300 space for it. This code will resize the original image to fit that space.

If you really want to optimize your images, stay tuned for the next parts of this guide – resizing and minimizing the file size of images using IrfanView and Photoshop.

---

Stay tuned for:
Part 2 : Resize & Minimize Image File Size using IrfanView
Part 3 : Optimize Images for the Web using Photoshop
Part 4 : Other Tips to Speed Up Loading Time