[HOW TO - VB4 + VBSEO] Site Optimization: Easily Specify Image Dimensions
 

One of the high-impact criteria of a fast web page is whether image dimensions have been specified in html or not. Without image dimensions, web browsers must "reflow" and "repaint" the image once it is reloaded.

The problem is that specifying image dimensions can be tedious. One would be required to edit each template and insert dimensions manually. To make matters worst, there are hundreds (if not thousands) of images in vbulletin, some of which aren't even used. Conventionally, one could run a get image sizes script to pull all images and respective dimensions from vbulletin. This method returns thousands of results, most of which are images with no need to be optimized.

I found a very easy solution using VBSEO. If you don't use VBSEO, this article won't be of much help.

1. Open up 3 instances of GTmetrix.com.
2. The first should point to your CMS (if applicable), the 2nd to your forum root, and the third to any PUBLICLY viewable thread.
3. GTmetrix then grades your site speed against several criteria.
4. Click on the "specify image dimensions" criteria. Odds are you scored 0 on this.
5. A list of images come up for each instance of GTmetrix. These are the images that load up on your most popular pages (CMS, FORUMHOME and SHOWTHREAD). You can use GTmetrix to find images on other pages, if you wish, like blogs etc.
6. Copy paste each list of images into notepad and make sure there are no duplicates.
7. Log into VBSEO.
8. Navigate to VBSEO "Other Enhancements" and click on "Image Size Attributes".
9. Select "Yes". Paste the list of images from your clipboard.
10. Next, you have to format the list so that VBSEO can understand it. It's relatively simple. For example http://www.example.com/forum/images/smile.png (Dimensions: 728 x 90) would become 'smile.png'=>'728x90'
11. Note: if you have multiple styles with the same image in each, this will work so long as the image has the same dimensions. Otherwise you will screw up your style.
12. Note2: Be careful with avatars and other resized images, since they can appear in various sizes throughout your forum. You shouldn't be specifying dimensions for these.
13. Run GTmetrix to make sure the image dimensions no longer need to be specified.

I haven't figured out how to do google adsense and external images with this method yet.

And that's it! You're done.

Thanks you for this.
Im looking into it now.

Hi Lazorbeam,
I"m using another folder to place my image .ex : http://example.com/newfolder/smile.png
How to write the path in vbseo?
Thanks for any help and sorry for bad english.

You don't have to write a path unless the image name is used in another folder. Example:

http://example.com/newfolder/smile.png
http://example.com/smile.png

You would have to include the path for the images above. Otherwise it's simply /newfolder/smile.png

Ok,it works.Thanks :)

this is a great tutorial mate
ty

great... i will try this after installing vBSEO today ISA
thanks

I f not having vbseo then what to do in vb 4.2

I also do not have vbseo

I have used this and managed to remove some of the images from the list, yet i'm still getting an F (0) result for this test.

Some of the files I hadn't removed were avatars/avatar thumbnails (As instructed). I've also not managed to specify sizes of files which do not sit on my website.

Any idea as to why this is?

I can give you my url in private to have a look if you want :)

Thanks!

The way GTMetrix grades this criteria is weird. If you have a few images without dimensions, you will grade poorly, even if 99% of your images are OK. I imagine your avatars are screwing up the page. Maybe try a page without avatars.

You can do avatars and profile pictures, but it's a somewhat futile exercise because there are thousands (for me, at least) cycling through your pages.

Great thanks!

If only there were a mod to automate this process for every image....