How to insert images in HTML | HTML KICK

How to insert images in HTML

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

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.

What is HTML Elements in HTML5? | HTML KICK

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

AttributeValueDescription
alttextalternate text for an image
crossoriginanonymous
use-credentials
Cross-origin access to be used with canvas
heightpixelsheight of an image
ismapismapserver-side image map
loadingeager
lazy
loading of images until some conditions are met
longdescURLSpecifies a URL
referrerpolicyno-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
Specifies which referrer information
sizessizesSpecifies image sizes
srcURLSpecifies the path
srcsetURL-list Specifies a list
usemap#mapnameSpecifies an image as a client-side image map
widthpixelsSpecifies the width of an image

 

Terry White

Terry White is a professional Drupal & WordPress developer, Web 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

View all posts by Terry White →