This post aims to help anyone who uploads images to their ActiveRain blog with an effect of reducing load time through the act of reducing image size BEFORE uploading images.
When I first started blogging on AR 2 weeks ago I was surprised to see that the AR gods allow people to upload fullsize images and then resize them with HTML code. "Big deal" you might say.
This is a big deal and here's why:
Everytime someone visits your blog, the web browser loads the full size image rather than the resized image they actually see.
If you upload a photo that is sized 1024 x 768 but using the AR interface you resize it to 500 x 375 it may look like it is 500 x 375 on your page, but in reality the photo is still 1024 x 768. Forcing your readers to load these massive images can cause a major slowdown.
I'm most surprised that AR does this because loading large images is a huge bandwidth hog. The only benefit I could see to this is that you can right click the image and view image to see the full sized image (useful for listing photos) but otherwise I see no benefit.
To see this effect in action, lets compare file sizes of a typical image. For this test, I took a screenshot of my desktop and pasted in to Photoshop at 1024 x 768 and saved as a JPG 100% quality. Next I reduced the size down to 500 x 375 and saved as JPG at 100% quality. The results are shocking:
1024 x 768 = 446k filesize = 19 second load time on 256k cable connection
500 x 375 = 84k filesize = 4 second load time on 256k cable connection
Taking the size of your image down to 500 x 375 BEFORE uploading to your blog reduced the load time of that image a whopping 5 FOLD!
This means that if you aren't resizing your images, your visitors are likely spending 5 TIMES LONGER to load your blog and AR is using more than 5 time the bandwidth that they could be using.
ActiveRain Admins: Are you listening? May I suggest implimenting a dynamic resizing script that actually resizes the images as they are uploaded, rather than just resizing with code? I imagine this would cut your bandwidth useage by a large number and would also benefit the bloggers making their pages load faster.
ActiveRain Bloggers: Since AR currently doesn't have a way to resize images here is a way to do it yourself:
1) Go download and install a FREE program called Paint.net - http://www.getpaint.net
DOWNLOAD LINK: http://www.dotpdn.com/files/Paint.NET.3.5.1.Install.zip
2) Before publishing (draft mode), upload your full size photos to your blog and resize them to the size you need to fit into your content using AR's sizing method. Make note of the size that you size them to, then delete the photos from your post.
3) Open Paint.net and resize each image to the size that you noted in step 2. Save these images to your hard drive (careful not to overwrite your originals).
4) Come back to AR and upload your newly resized photos in the position they were.
5) VIOLA! Instant speed gains for your AR blog.
Comments (22)Subscribe to CommentsComment