When images are referenced from within your markup, you should tell the browser the display dimensions of the image. This test checks that you have included a width and height attribute with all images in your document.
Specifying image width and height attributes
To specify image width and height, simply include the width and height attributes when you use the img element e.g.
|
1 |
<img src="images/clown.jpg" width="50" height="50" /> |
If either width or height is missing, then this test will fail. This test also checks that pixel values are used, and that the specified dimensions match the intrinsic image dimensions.
Intrinsic image size vs specified size
Each image has an intrinsic size. This is the actual size of the image, regardless of what size you specify in the width and height attributes. If the width and height attributes do not match the intrinsic image dimensions, then the client device has more work to do since it must resize the image, and possibly reflow the page. In addition, if the specified width and height are less than the actual width and height, then the device must download a larger image than it needs to display. This test checks that the specified and intrinsic dimensions match.
If either width or height is less than the intrinsic width or height, then this test will FAIL .
If either specified width or height is greater than the intrinsic width or height, then this test will WARN
(Note, for clarity we have not included the alt attribute in the examples above. This should be included when you use the img element. More info here.)
Reference
This test is based on a W3C mobileOK best practice test. See http://www.w3.org/TR/mobile-bp/#ImageSize for more details
