HTML Images

Images are very important for web pages. If images are inserted in HTML documents, the pages will not only be beautiful but also be good for SEO.

Insert Images in HTML Documents

HTML images are defined with the <img> tag. It’s an empty tag and has no closing tag/end tag. To display an image on a web page, you have to use src (src stands for source) attribute inside the tag. The src attribute specifies the URL (exact location of the image).

Example Try this Code
<img src="/wp-content/uploads/2016/03/smiley.jpg" alt="Smiley">

The Alt Attribute of Images

The alt attribute provides alternative information for an image. If the image cannot be displayed in the document then the alt text will be displayed instead like ─

Example Try this Code
<img src="images/smiley.jpg" alt="Smiley">
Note: The alt attribute is required for images. A web page will not be validated correctly without it

Set Width & Height for an Image

The width and height attributes are used to specify the width and height for an image. You should use this attributes for big images to reduce the page weight.

If you only use the width attribute then the height of the image will be reduced automatically in proportion of the image width. And if only the height attribute is used then the width of the image will be reduced automatically in proportion of the image height.

The values are specified in pixels in HTML5 but you can also specify this values in percent using inline CSS into style attribute.

The 4 images are included in the example below. The first one uses width and height attributes, the second one uses only width attribute, and the third and last one use CSS in percent and pixels.

Example Try this Code
<img src="/wp-content/uploads/2016/03/smiley.jpg" width="220" height="220" alt="Smiley">
<img src="/wp-content/uploads/2016/03/smiley.jpg" width="110" alt="Smiley">
<img src="/wp-content/uploads/2016/03/smiley.jpg" style="width: 50%; height: 50%" alt="Smiley">
<img src="/wp-content/uploads/2016/03/smiley.jpg" style="width: 220px; height: 200px" alt="Smiley">
Note: The image dimension in percent is displayed from the original size of the images. Even it depends on your browser sizes.

Remove the border from Image

Some browsers create a border around the image even when it’s clicked. You can remove the border using CSS into the <head> element. Then it will work for all images in the document.

<head>
<style>
  img {
    border: 0;
  }
</style>
</head>