Learn how to insert images in HTML?: Images improve the aesthetic appeal of a webpage while illustrating the concepts in its textual content. Use the <img> element to include new images in your document. This is a void element that only contains attributes. Here is its syntax
<img src = ?url? alt= ?text? >
Definitions of code attributes
Contents
Note that src stands for source. This attribute tells the browser where it will find the image that you intend to display. The alt attribute is an alternative value that is displayed if a browser cannot display the image you selected correctly. Its value is user-defined? images can fail to display correctly because of a slow connection or an error in the src value.
Changing the default size of images
To change the size of an image that’s included in one of your web pages, use the width and height attributes. Below is an example that resets the size of an image to a square whose length is 300.
<img src="kites.jpg" alt="htmlkick" width="300" height="300">
How to insert images in HTML: Changing the default size of a website beforehand reduces chances of display issues that could cause the screen on which it is being loaded to flicker.
Link on Image
<a href="#"><img src="kites.jpg" alt="htmlkick" width="300" height="300"></a>
How to insert Animated Images
you can insert gif images on your web page for animation. It gives you a fantastic look to the user and improves web page quality.
Example
<img src="animated.gif" alt="cartoon" style="width:512px;height:512px;">
alt Attribute in the image tag
Must insert alt attribute in img tag that if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
Import other Images on Another Server/Website
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Link on Image
You can add a link on image for navigate. put <a> (anchor tag) for link on image
Example
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"> </a>
Image Attributes
| Attribute | Value | Description |
|---|---|---|
| alt | text | alternate text for an image |
| crossorigin | anonymous use-credentials | Cross-origin access to be used with canvas |
| height | pixels | height of an image |
| ismap | ismap | server-side image map |
| loading | eager lazy | loading of images until some conditions are met |
| longdesc | URL | Specifies a URL |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Specifies which referrer information |
| sizes | sizes | Specifies image sizes |
| src | URL | Specifies the path |
| srcset | URL-list | Specifies a list |
| usemap | #mapname | Specifies an image as a client-side image map |
| width | pixels | Specifies the width of an image |
Terry White is a professional technical writer, WordPress developer, Web Designer, Software Engineer, and Blogger. He strives for pixel-perfect design, clean robust code, and a user-friendly interface. If you have a project in mind and like his work, feel free to contact him
