HTML Images

HTML Images

Images can improve the design and the appearance of a web page.

HTML images / An image of a mother with her daughter in forest inside the river

HTML Image Syntax

In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains only attributes, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image

<img src="url">

Inserting Images into Web Pages

In HTML, you add images to a web page by using the <img> tag along with the src attribute, which is used to specify the image location. Like this:

 <img src="" alt="A cute Kitten">

About the Image Location

The image location (provided with the src attribute) must be a valid URL.
URL  stands for Uniform Resource Locator.
İt is the location of a resource on the web. This could be a web page, image, or some other file.
When embedding an image, you can use either an absolute URL or a relative URL (same as when creating hyperlinks).

Note: src  stands for source

The alt Attribute

The image must have the alt attribute specified. This attribute is used to provide a description of the image. This is important, as it is possible that not all users will be able to see the image.
Other reasons you should have an alt attribute are the following.

  • Slow connection
  • An error in the src attribute.
  • The user may use a screen reader.

 alt  Stands for alternative text

İf you don’t know what an attribute is, here is the link to our HTML Attribute Tutorial. Click the link below.

Image Size – Width and Height

There are two ways of resizing images in web browsers.

  • You can use the width and height attributes in your HTML.
  • You can use the style attribute to specify the width and height of an image with the help of CSS.

Resizing using the width and height attributes .

Example Code:

 <img src="" alt="A cute Kitten" width="500" height="600">

Resizing using the style attribute to specify the width and height of an image.

Example Code:

<img src="" style="width: 500px; height: 600px;">

About the Image Resizing

You should try to avoid resizing the image in HTML. If possible, resize the image to the correct dimensions first (using an image editor), then use those dimensions in the HTML code.

So if you need to display the image at 300×250 for example, resize it to that size in an image editor so that it is exactly those dimensions.  Don’t take a 500×450 px image and use HTML code to “squeeze” it down to a 300×250 px image.

The reason I recommend this is because, when you use HTML to resize the image, the browser still has to download the full file—regardless of how big your HTML specifies it. If you use HTML to make the image display smaller, you’re wasting the user’s bandwidth by downloading a large file, only to display it at small dimensions. And if you use HTML to display the image at a larger dimension, it will pixelate and lose quality.

Remember: Resizing an image with HTML or CSS doesn’t make the file size smaller. İt just shrinks the image and shows smaller but the browser still has to download its original size or the full size of the image.

Comments are closed.