Images

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:img-syntax
The <img> Element
To place an image on our web page, we use the self-closing <img> element: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:dimensionsWidth 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:wh-attributeWe 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.

Distorted Image
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:distoredOptimizing 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.

Image File Sizes
Optimizing images by resizing them makes a tremendous difference in the actual file size.  Let’s take a look at our three image files:image-file

Advertisements