HTML Images

Images help to beautify the contents of the web page. It would be boring to read a website without any images.

to put an image on the web page we simply need to use the <img /> element with src attribute to define the URL of the location of animage. <img/> is an empty and inline element

arrtibute src

We use the attribute src to specify an image URL or the file path

Example:

<img src="image.png" />

Attribute alt

The alt attribute indicates an alternative text for the image when the image is not loaded for various reasons like slow internet connect, slow server or broken links.

Example

<img src="image1.png" alt="my image"/>

Sizing the images

Sometimes its required to resize the images on the web page. to do so we use the height and width attribute

Example

<img src="image.png" height="50" width="50">
<img src="image.png" style="height:50px; width:50px;">

In the above example we can see that the height and width can be specified in two different ways, the result is the same. However the best practices is to use the style attribute.

Floating the image

We can float the image to the right and left side of the web browser. to do this we need to use the style attribute with the float property

Example

<p><img src="image.png" style="float:right">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Image as Link

Images can also be used as links. It is very simple to achieve this. we need to write the <img> tag inside <a> tag
example

<a href="myinternalfile.html"><img src="image.png" height="50" width="50"/></a>

Image form another folder

Images have to be organised well, hence they will be kept in organised folders, to refer to such images in the folder we need to specify the folder name as seen in the example below

<img src="testimages/flowers.jpg" >

Image from external source

there could be a need to refer the images to an external image file, in such a case we simply specify the image URL

<img src="https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" />

More the number of images the slower will be the web page to load.