Images

Using img Tag

The img tag is used to add images to our page. The path (url) of the image is specified with the src parameter. 
 
Usage:

<img src=”images/pic1.jpg” />  

Parameters of the img tag:

Src: Specifies the path of the image to be inserted.

Width: Allows the added image to be displayed at the desired width on the page.
 
Height: Allows the added image to be displayed at the desired height on the page.  

*Warning: Width and height parameters do not change the original size of the image, it only makes it appear in the dimensions given on the page. The image is downloaded to the visitor's computer in its original size. For example, we placed a 1600x1200 image on our page and set its width to 400 px with the width parameter and 300 px with the height parameter. In this case, the image will appear on the page with dimensions of 400x300. However, since the image will be loaded in its original form while the page is loaded on the visitor's computer, the traffic of the site will increase unnecessarily.

For this reason, it is useful to bring the pictures on the page to the required dimensions with an image editing program and then add them to the page.

Border: It is used to add a border to the image and determine its thickness. If border="0" the frame will not be drawn. The higher the number here, the greater the thickness of the frame. 
 
Alt parameter: The most important benefit of this parameter is that it informs search engines about what the image is about. Using this parameter, we can specify the description or keywords related to the image. In this way, the probability of finding our images will increase, for example, in searches made on google images.

In addition, if the image cannot be uploaded to the visitor's computer for any reason, it ensures that a description text appears in place of the image. 
 
Align: If text is to be written around the image, the positions of the image and text relative to each other are determined. For example, if align="left" is set, the image will be on the left and the text on the right.

<img src="imageKucuk.jpg" align="left" />

EXERCISES