HTML Images: Images can improve the design and the appearance of a page.
Images are vital to enhance just as to portray numerous complex ideas in straightforward manner on your website page. This tutorial will take you through straightforward ways to use images in your web pages.
Example
<img src="pic_islamabad.jpg" alt="Pakistan Islamabad">
Example
<img src="img_girl.jpg" alt="Girl in a jacket">
Example
<img src="img_islamabad.jpg" alt="Flowers in Islamabad">
In this article, you will learn-
HTML Images Syntax
The HTML <img> tag is used to embed a picture in a website page.
Pictures are not technically embedded into a website page; pictures are linked to site pages. The <img> tag creates a holding space for the referenced to image.
The <img> tag is vacant, it contains attributes just, and doesn’t have a closing tag.
The <img> tag has two required attributes:
src – Specifies the path to the picture
alt – Specifies a substitute book for the picture
Syntax
<img src="url" alt="alternatetext">
The src Attribute
The required src attribute indicates the path (URL) to the picture.
Note: When a site page loads; it is the browser, at that point, that gets the picture from a web server and inserts it into the page. In this manner, ensure that the picture actually remains in a similar spot according to the website page, in any case, your visitors will get a messed up link icon. The messed up link icon and the alt text appear if the browser can’t discover the picture.
Example
<img src="img_islamabad.jpg" alt="Flowers in Islamabad">
The alt Attribute
The necessary alt attribute gives an alternate text to a picture if the user for reasons unknown can’t see it (as a result of moderate connection, an error in the src attribute, or if the user uses a screen reader).
The worth of the alt characteristic ought to portray the picture:
Example
<img src="img_islamabad.jpg" alt="Flowers in Islamabad">
On the off chance that a browser can’t discover a picture, it will show the worth of the alt attribute:
Example
<img src="wrongname.gif" alt="Flowers in Islamabad">
Tip: A screen reader is a software program that reads the HTML code, and allows the user to “listen” to the substance. Screen readers are valuable for individuals who are outwardly impaired or learning disabled.
Picture Size – Width and Height
You can use the style attribute to determine the width and stature of a picture.
Example
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Alternatively, you can use the width and height attributes:
Example
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The width and height attribute consistently define the width and tallness of the picture in pixels.
Note: Always indicate the width and height of a picture. On the off chance that width and height are not indicated, the site page might flicker while the picture loads.
Width and Height, or Style?
The width, height, and style attributes are all valid in HTML.
In any case, we suggest using the style attribute. It prevents styles sheets from changing the size of pictures:
Example
<!DOCTYPE html> <html> <head> <style> img { width: 100%; } </style> </head> <body> <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> </body> </html>
Images in Another Folder
In the event that you have your pictures in a sub-folder, you should incorporate the folder name in the src attribute:
Example
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Images on Another Server/Website
Some sites highlight a picture on another server.
To highlight a picture on another server, you should determine an absolute (full) URL in the src attribute:
Example
<img src="https://www.worldofitech.com/images/worldofitech_green.jpg" alt="worldofitech.com">
Notes on outside pictures: External pictures may be under copyright. In the event that you don’t get permission to use it, you might be in violation of copyright laws. Likewise, you can’t handle outer pictures; it can suddenly be eliminated or changed.
Animated Images
HTML allows animated GIFs:
Example
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Image as a Link
To use an image as a link, put the <img> tag inside the <tag>:
Example
<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"> </a>
Image Floating
Use the CSS float property to allow the picture to float to the right or to the left of a text:
Example
<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> The image will float to the right of the text.</p> <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> The image will float to the left of the text.</p>
Common Image Formats
Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):
Abbreviation | File Format | File Extension |
APNG | Animated Portable Network Graphics | .apng |
GIF | Graphics Interchange Format | .gif |
ICO | Microsoft Icon | .ico, .cur |
JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
PNG | Portable Network Graphics | .png |
SVG | Scalable Vector Graphics | .svg |
Chapter Summary
- Use the HTML
<img>
element to define an image - Use the HTML
src
attribute to define the URL of the image - Use the HTML
alt
attribute to define an alternate text for an image, if it cannot be displayed - Use the HTML
width
andheight
attributes or the CSSwidth
andheight
properties to define the size of the image - Use the CSS
float
property to let the image float to the left or to the right
Note: Loading enormous pictures takes time and can show down your site page. Use pictures cautiously.
HTML Image Tags |
Tag Description |
<img> Defines an image |
<map> Defines an image map |
<area> Defines a clickable area inside an image map |
<picture> Defines a container for multiple image resources |
Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.