Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

HTML – Images

Image tag that allows the developers to incorporate image files into the code for displaying the respective images in the web page. 

The syntax for this is <img src = ‘copy image URL’>, where ‘image’ is the tag name and ‘src=’ should have the required image’s URL assigned to it.

<img src= Enter the img URL here />

The image can be of different formats like jpg, gif, png etc. These image paths are used according to the requirement as for banner images jpg format images are used. For logo or icon purpose, png images are used. For the animated purpose, gif images are used. 

AbbrevationFile FormatFile Extension
JPEGJoint Photographic Expert Group image         .jpg, .jpeg, .jfif, .pjpeg, .pjp
APNGAnimated Portable Network Graphics.apng
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur

There are multiple attributes of <img> tag which help in modify it at different places.

Src Attribute

Src attribute used to specify the address from which the browser will retrieve the image. 

This URL can be applied to an image inside a directory in the same server and it can also store an image in a third-party server with a different domain name.

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

Alt Attribute

Alt is used to specify the alternative text of a picture of a webpage. In cases where displaying an IMG is not possible, the browser displays this text to the user. 

Search engines such as Google and Bing use this alt text to show results in the Image Search.

<img src=”/images/google.jpg” alt=”google site”/>

Align Attribute

This attribute is used to specify the alignment of a picture on the webpage.

By default, the image will align at the left side of the page, but you can use align attribute to set it in the center, left or right.

<body>
   <img src="https://www.lecturely.com/wp-content/themes/divi-child/asset/img/image-68.png" alt="google site" align="right"/>
</body>

Border Attribute

This attribute is used to create a border of user-defined thickness around the picture

By default, the image will have a border around it, you can specify border thickness in terms of pixels using border attribute. The thickness of 0 means, there will be no border around the picture.

This tag has been deprecated in HTML5, don’t use it instead of using the CSS property border.

<body>

   <img src="https://www.lecturely.com/wp-content/themes/divi-child/asset/img/image-68.png" alt="google site" border="5px solid #000"/>
</body>

Cross-origin Attribute

This attribute is used when we want to specify how cross-origin photos should be dealt with. This is mostly used in cases where canvas elements of JavaScript web apps are used.


Width and Height Attribute

This attribute used to control the width and height of any image tag in an HTML page. We can specify width and height in terms of either pixels or percentage.

<body>

   <img src="https://www.lecturely.com/wp-content/themes/divi-child/asset/img/image-68.png" alt="google site"   width="200" height="150"/>
</body>

Vspace and Hspace Attribute

Vspace and Hspace attribute is used to define the white space which we needs to add horizontally and vertically of the inserted image.

We can specify this vspace and hspace value in terms of pixels or percentage. This tag has been deprecated in HTML5, don’t use it instead of using the CSS property margin.

<body>

   <img src="https://www.lecturely.com/wp-content/themes/divi-child/asset/img/image-68.png" alt="google site" vspace="20" hspace="50"/>
</body>

Longdesc attribute

This attribute is used to give a detailed description of an image by using a URL. The URL used in the attribute is used as the description of the image.

We can specify the long description property using longdesc attribute.

<img src="https://www.lecturely.com/wp-content/themes/divi-child/asset/img/image-68.png" alt="google site" longdesc="This is a google site"/>

Ismap Attribute

This attribute is used to define the said image as a server-side image map. When the user clicks (or taps) inside the image, the browsers send the coordinates of the click (or tap) to the web server as a URL.

<img ismap src="https://www.lecturely.com/wp-content/themes/divi-child/asset/img/image-68.png" alt="google site" />

Usemap Attribute

This attribute is used to define the image for a client-side image map. A usemap is always used with map and area HTML tags.

<img src="https://www.lecturely.com/wp-content/themes/divi-child/asset/img/image-68.png" alt="google site" usemap="#html"/>
<map name = "html">

    <area shape = "circle" coords = "80,80,20" href = "/search" alt = "Search link" target = "_self" />

    <area shape = "rect" coords = "5,5,40,40" alt = "Filter link" href = "/filter" target = "_self" />
</map>

Picture Tag

An introduction of picture tag helps to display different picture for different screen sizes or devices.

It also has an <source> element with the media attribute, which helps in defining different screen sizes. We can have one or more <source> elements, each referring to different images with srcset attribute.

Some browser doesn’t support the <img> tag, so it gives more flexibility to web developers to insert images in a webpage.

<body>
   <picture>
  	<source media="(min-width: 650px)" srcset="https://www.lecturely.com/wp-content/themes/divi-child/asset/img/image-68.png">

  	<source media="(min-width: 465px)" srcset="https://www.lecturely.com/wp-content/themes/divi-child/asset/img/image-68.png">
  	<img src="https://www.lecturely.com/wp-content/themes/divi-child/asset/img/image-68.png" style="width:auto;">

   </picture>

</body>