Fixit – Specify image sizes

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.

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

 

Exclusive tips, how-tos, news and comment

Receive monthly updates on the world of mobile dev.

Other Afilias Products

Try the world’s leading device detection solution at
DeviceAtlas - Try the world’s leading mobile device detection solution

Evaluate your websites’ mobile readiness with
mobiReady - Evaluate your websites’ mobile readiness.

© 2019 Afilias Technologies Ltd. All rights reserved.

This is a website of Afilias Technologies Ltd, a private company limited by shares, incorporated and registered in the Republic of Ireland with registered number 398040 and registered office at 6th Floor, 2 Grand Canal Square, Dublin 2, Ireland