Example
Note: The width and height attributes are not deprecated on images and never have been. Their use has been made much stricter though.
The dimensions of an image can be specified using the width and height attributes of the image tag:
<img src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bimages%2F200x200-img.png%26quot%3B%2520width%3D%26quot%3B200%26quot%3B%2520height%3D%26quot%3B200%26quot%3B%2520alt%3D%26quot%3BA%2520200x200%2520image%26quot%3B%26gt%3B%253C%2Fcode">By specifying the width and height of an image, your structure gives the browser a hint as to how the page should be laid out even if you are just specifying the actual image size. If the image dimensions are not specified, the browser will need to recalculate the layout of the page after the image is loaded, which may cause the page to "jump around" while it's loading.
4.1
You can give the image a width and height in either the number of CSS pixels or a percentage of the image's actual dimensions.
These examples are all valid:
<img src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bimages%2F50x50-img.png%26quot%3B%2520width%3D%26quot%3B50%26quot%3B%2520height%3D%26quot%3B50%26quot%3B%2520alt%3D%26quot%3BA%252050x50%2520image%26quot%3B%26gt%3B%26lt%3Bimg%2520src%3D%26quot%3Bimages%2F50x50-img.png%26quot%3B%2520width%3D%26quot%3B200%26quot%3B%2520height%3D%26quot%3B200%26quot%3B%2520alt%3D%26quot%3BA%2520200x200%2520image%26quot%3B%26gt%3B%26lt%3Bimg%2520src%3D%26quot%3Bimages%2F200x200-img.png%26quot%3B%2520width%3D%26quot%3B50%26quot%3B%2520height%3D%26quot%3B50%26quot%3B%2520alt%3D%26quot%3BA%252050x50%2520image%26quot%3B%26gt%3B%26lt%3Bimg%2520src%3D%26quot%3Bimages%2F200x200-img.png%26quot%3B%2520width%3D%26quot%3B50%25%26quot%3B%2520height%3D%26quot%3B50%25%26quot%3B%2520alt%3D%26quot%3BA%2520100x100%2520image%26quot%3B%26gt%3B%253C%2Fcode">5
The width and height of the image must be specified in CSS pixels; a percentage value is no longer a valid value. As well, if both attributes are specified, they must fit into one of three formulas that maintain aspect ratio. Although valid, you should not use the width and height attributes to stretch an image to a larger size.
These examples are valid:
<img src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bimages%2F50x50-img.png%26quot%3B%2520width%3D%26quot%3B50%26quot%3B%2520height%3D%26quot%3B50%26quot%3B%2520alt%3D%26quot%3BA%252050x50%2520image%26quot%3B%26gt%3B%26lt%3Bimg%2520src%3D%26quot%3Bimages%2F200x200-img.png%26quot%3B%2520width%3D%26quot%3B50%26quot%3B%2520height%3D%26quot%3B50%26quot%3B%2520alt%3D%26quot%3BA%252050x50%2520image%26quot%3B%26gt%3B%26lt%3Bimg%2520src%3D%26quot%3Bimages%2F50x50-img.png%26quot%3B%2520width%3D%26quot%3B0%26quot%3B%2520height%3D%26quot%3B0%26quot%3B%2520alt%3D%26quot%3BA%2520hidden%2520tracking%2520image%26quot%3B%26gt%3B%253C%2Fcode">This example is not recommended:
<img src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bimages%2F50x50-img.png%26quot%3B%2520width%3D%26quot%3B200%26quot%3B%2520height%3D%26quot%3B200%26quot%3B%2520alt%3D%26quot%3BA%2520200x200%2520image%26quot%3B%26gt%3B%253C%2Fcode">These examples are invalid:
<img src="/?originalUrl=https%3A%2F%2Friptutorial.com%2F%26quot%3Bimages%2F200x200-img.png%26quot%3B%2520width%3D%26quot%3B50%25%26quot%3B%2520height%3D%26quot%3B50%25%26quot%3B%2520alt%3D%26quot%3BA%2520100x100%2520image%26quot%3B%26gt%3B%26lt%3Bimg%2520src%3D%26quot%3Bimages%2F200x200-img.png%26quot%3B%2520width%3D%26quot%3B1%26quot%3B%2520height%3D%26quot%3B200%26quot%3B%2520alt%3D%26quot%3BA%25201x200%2520image%26quot%3B%26gt%3B%253C%2Fcode">
