HTML Images Syntax
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
The <img> Element
To place an image on our web page, we use the self-closing <img> element:
The alt Attribute
The alt attribute specifies an alternate text for an image, if the image cannot be displayed.
It’s a good habit to name all image files with lowercase letters and to use underscores or dashes instead of spaces.
<img> Dimensions on Screen
If we insert an image without specifying its dimensions, the browser will display
the image in its original size, which might not be what we intended:Width and Height Attributes
By supplying values for the height and width attributes, we can instruct the browser to display the image in exactly the size we wish:We can also make a smaller image appear larger on the page, but this isn’t recommended, as the image will look pixelated and of poor quality.
If we fail to keep the height and width attributes in proportion to the actual photo dimensions, we’ll see an image that is squished vertically or horizontally:Optimizing Images
Web download speeds are much slower than our local hard drive access speed. Downloading large image files can take a long time and make our web page slow to load. The solution is to “optimize” our web images by creating copies in the exact dimensions we display them on our pages.