HTML Images

In this tutorial, you will learn how to insert HTML images into a web page.

The use of images to make a web page visually appealing and attractive is undeniable. To make a web page look beautiful, you need different styles of fonts, matching colors, and beautiful images. Using the right image in the right place helps determine the improved outlook of a web page.

<img src=”url” alt=”some_text”>

HTML <img> tags and src attributes

To display or define an image in HTML using the <img> tag. This is an empty tag meaning it has no end tag, only attributes. You need to use the src attribute to display images on web pages. src is an acronym for ‘source’. The value of the src attribute is the URL or address of the image you want to display, that is, the address where the image is stored.

<img src=”imagename.jpg”/>

alt Attribute

If for some reason the browser fails to display the image or the user closes the image or if the image is not loaded due to slow page loading, a box or icon appears in the place of the image along with any information or data related to that image.

<img src=”imagename.jpg” alt=”This is a Title.”/>
See the example below:
Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Placing Images in HTML Documents</title>
</head>
<body>
    <img src="/assets/files/2020/11/coderwell-template.png" alt="Bootstrap Forms">
    <img src="/assets/files/2020/11/coderwell-form.png" alt="One Page Template">
    <img src="/assets/files/2020/11/coder-well-web-snippets.png" alt="Web Snippet">
</body>
</html>

style Attribute

To determine the length or height and width or width of an image, use the style attribute with the img tag and use the height and width properties. See the example below.

<img src=”demo.jpg” alt=”demo image” style=”width:400px; height:250px;” />
The value of the height and width of its length. Width is automatically determined by default in pixels. However, you can also use this value as a percentage (%), em, etc.

height and weight Attributes

The height and width attributes can be used with the img tag to determine the length or width and width or width of an image. See the example below.

<img src=”demo.jpg” alt=”demo image” width=”400″ height=”250″ />

width and height or style Attributes

To determine the width and height of the image, width, height or style, these three attributes are allowed in HTML. See the example below

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>width and height or style Attributes</title>
</head>
<body>
  <img src="/assets/files/2020/11/coderwell-template.png" alt="Bootstrap Forms" width="200" height="150" />
  <img src="/assets/files/2020/11/coderwell-form.png" alt="One Page Template"  style="width:300px;height:250px;"/>
  <img src="/assets/files/2020/11/coder-well-web-snippets.png" alt="Web Snippet"  width="100%" height="100%" />
</body>
</html>

Pictures in another folder

Normally the browser assumes that the image and the HTML document are in the same folder, but if you put the image in another folder, then you have to specify the exact directory of that folder i.e. the appropriate folder name in the src attribute.

<img src=”/assets/image/demo.png” alt=”Demo title” />

Use pictures from another server

There are some websites that put their pictures on some image servers and use them by linking those pictures to their website. Take an example.

<img src=”https://i.imgur.com/DUkpobn.jpg” alt=”Demo title” />
Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Using Pictures in another folder and server</title>
</head>
<body>
  <img src="/assets/files/2020/11/coderwell-template.png" alt="Bootstrap Forms" />
  <img src="https://i.imgur.com/DUkpobn.jpg" alt="One Page Template"/>
</body>
</html>

Using the HTML5 Picture Element

HTML 5 introduces the first <picture> element. This makes it possible to better determine the source of an image. The <picture> element actually contains a number of <source> elements, each containing a link to a different image.

Each <source> element has attributes that indicate the size of the browser screen.

The browser tries to match the attributes of the first <source> element and otherwise goes to the next <source> element.

Code Example:
<picture>
    <source media="(min-width: 300px)" srcset="logo.png">
    <source media="(max-width: 500px)" srcset="logo-small.png">
    <img src="logo-default.png" alt="logo">
</picture>
Note : Always assign a <img> element as the last child element of the <picture> element. In browsers that do not support the <picture> element, the <img> element will work, or if no <source> element matches, the image of the <img> element will be displayed.

Working with Image Maps

An image map lets you define image hotspots that simply act as hyperlinks.

The basic idea behind image mapping is to provide an easy way to combine different parts of an image without splitting it into individual image files. For example, each country on the world map may be hyperlinked with more information about that country.

Let’s try a simple example to understand how it works:

Code Example:
Run Code >> 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      Creating Image Maps in HTML
    </title>
  </head>
  <body>
    <img src="/assets/files/2020/11/coderwell-template.png" usemap="#image-map">
    <map name="image-map">
        <area target="_blank" alt="One page Template" title="One page Template" href="https://coderwell.com/bootstrap/bs-one-page-template/" coords="109,75,44"  shape="circle">
        <area target="_blank" alt="Article Rewriter" title="Article Rewriter" href="https://coderwell.com/article-rewriter/" coords="112,148,44" shape="circle">
    </map>
  </body>
</html>

The <map> tag name attribute is used to specify the map from the <img> tag using the map feature used. The <area> tag is used to define clickable regions in an image within the <map> element. You can specify the number of clickable regions in an image.

Note : Image maps should not be used for website navigation. They are not search engine friendly. Legitimate use of an image map with a geographic map.
Tip : There are many online tools available for creating image maps.

TOOLS

ABOUT US

CONTACT