Images such as bitmaps have an intrinsic pixel size. Telling the browser in advance what the size is avoids it having to re-flow the page when it receives it. Resizing images at the server reduces the amount of data transferred and the amount of processing the client has to carry out to scale the image. If the specified with and height attributes match the intrinsic size, then the client does not have to do any work to resize the image.
How to do it
You should make sure that the sizes you specify in your width and height attribute for all images matches the actual width and height of the image. However, some ways of violating this practice are worse than others:
One way to violate this best practice is if you specify width and height attributes of an image where the values you have specified are less than the actual value. This is considered particularly bad, since
- the browser will have to download a larger image than is needed (waste of bandwidth)
- the browser will have to resize the image from its actual dimensions to render at the width and height specified (extra processing)
If you do this, ready.mobi will report a FAIL on this test, and your score will suffer.
Another way to violate this rule is if you specify width and height attributes which are greater than the actual dimensions of the image. This is not considered as bad as if the dimensions you specify are less than the actual dimensions. This is because in this case, the browser must download an image smaller than it will be displaying. So there is no bandwidth wastage here, though the browser still needs to resize the image. In this case ready.mobi will report a FAIL.
Reference
This test is based on a W3C mobileOK best practice. See http://www.w3.org/TR/mobile-bp/#IMAGES_RESIZING for more details.
See also LARGE GRAPHICS test, and Specify Image Sizes test
Leave a Reply