|
[HOW TO - VB4 + VBSEO] Site Optimization: Easily Specify Image Dimensions
by
13 Jan 2012
Rating:  (1 vote
- 5.00 average)
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 http://www.vbseo.com/f28/automatically-retrieve-image-dimensions-1601/ 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.
- Open up 3 instances of GTmetrix.com.
- The first should point to your CMS (if applicable), the 2nd to your forum root, and the third to any PUBLICLY viewable thread.
- GTmetrix then grades your site speed against several criteria.
- Click on the "specify image dimensions" criteria. Odds are you scored 0 on this.
- 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.
- Copy paste each list of images into notepad and make sure there are no duplicates.
- Log into VBSEO.
- Navigate to VBSEO "Other Enhancements" and click on "Image Size Attributes".
- Select "Yes". Paste the list of images from your clipboard.
- 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'
- 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.
- 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.
- 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.
|