I’m having a go at optimising a website for PageSpeed using recommendations on the GMetrix website. One of many areas for improvement is: “Specify image dimensions” Specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints. It suggests I do this by adding the dimensions in the tag. If the image is in a stack, the only way to do this seems to be to use the Alt Tag area, and remove the last inverted commas ("). When I publish and inspect the element, the tag code looks correct but the image is still listed by GMetrix as unsized. Interestingly, the two images I have in the side bar have their sizes specified in the image prefs window - and these images are ignored by GMetrix (ie. they pass the test). Delving deeper into this, GMetris then says: ‘Be sure to specify dimensions on the image element or block-level parent’ and ‘Be sure to set the dimensions on the element itself, or a block-level parent. If the parent is not block-level, the dimensions will be ignored. Do not set dimensions on an ancestor that is not an immediate parent.’
So I’m guessing that the fact that I add the dimension to the img tag and these are being ignored has something to do with the above. Can anybody help me out with this?
BTW, if you want to dramatically improve your website speed/load performance (something Nick Cates has been banging on about) then run your site through GMetrix or Google PageSpeed.