BlogoSquare

Daily blog tips discussed an important aspect when using images in posts. It tells you that if you specify the image dimensions while publishing it, it makes your blog loads faster since Wordpress/or any blogging platfrom knows the amount of space to reserve for it.

When you use images or tables on your pages you should always include the height and width tags. If the browser does not see those tags it will need to figure the size of the image, then load the image and then load the rest of the page.

You can achieve this easily if you have the Visual editor activated(go to Users > Your profile from your Wordpress admin section) since when clicking the image insertion button, you are asked various key information. The dimensions can also be adjusted there. Make sure to put a description of your image since that is used to make your post XHTML valid.

As for those that don’t use the visual editor, you can specify the description using the alt attribute and the dimension within the image tag by using the width and height attribute respectively.

Moreover I thought sharing with you a nifty Wordpress plugins called iMax Width, to help you have total control over your images. If you forgot to specify image dimensions in previous posts, it automatically inserts them. Furthermore you can also specify a maximum width for your images depending on your content column’s width. Then it makes sure that any image you publish don’t go beyond the maximum width, which could break your design.

Download the plugins, extract and upload the imax-width.php file to your Wordpress plugins directory usually at wp-content/plugins. Go to your Wordpress’s dashboard and activate the plugins within the Plugins section. Then from your Wordpress dashboard itself, go to Options > iMax Width where we’ll put the appropriate settings to set you off.

From that iMax Width options panel, tick the checkbox at
Yes // Server-side Resize: Physically resize large images to max width on the server at time of post, move downwards and check the Force Width: Always resize images larger than the max width checkbox too. Then depending upon your content’s column width, put a maximum size for any image to abide to in the Maximum Image Width input box. I would advise you a width of 430px to render most images correctly. Save all the settings by clicking the Save settings button. See the screenshot below for all the configurations.

For a demonstration, see the image below. It’s larger than my content’s column but nonetheless it’s resized automatically by iMax Width to display it properly.

Here are more must-read resources on image optimisation from Daily Blog Tips:

1. Speed Up Your Site: Optimize Images
2. Speed Up Your Site: Image Formats

If you need any clarification or further help on the topics, do leave your comments or contact me. If you want a rocking theme, check out myJournal ethereal theme which allows you the maximum amount of space for your content.

related reading

• a click to more feed subscribers
• The proper way to write code in your blog posts
• Hiding your image buttons for some sidebar goodness
• Quick shooting stats of your Wordpress blog
• The sure way to get at the top of any blog toplist and boost your traffic
• Making it quick and easy for you to bookmark and earn traffic