Utilizing images plays a crucial role in enhancing the appeal and engagement of websites. Within HTML, the <img> tag is utilized for incorporating images into a web page. Unlike many other HTML elements, the <img> element is self-closing, which means it does not require an end tag. Instead, it contains attributes that specify details such as the image source, dimensions, alternative text, and more.
Basic Syntax of <img> Tag
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="description">
Where,
The attribute src stands for the location (URL) of the image file, while the attribute alt stands for the alternative text that appears if the image fails to load.
This is the least use of the tag. An example:
<img src="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="C# Tutorial logo">
If the file is located in the identical directory as the HTML file, you can simply refer to it by its file name. Otherwise, specify either the relative or absolute path to locate the file.
Organizing Images in Folders
A common method for organizing files on websites involves creating a dedicated folder named "images" to store all image files. This allows you to reference them in the following manner:
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Good Morning Friends">
If the image is stored in a different disk or folder, please provide the full file path:
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" height="180" width="300" alt="animal image">
Note: In the case of an inaccurate or incorrect spelling of the src URL, a broken image icon will be displayed, and the alt text will be displayed.
Essential Attributes of <img> Tag
- src (Source)
This essential characteristic determines the location of the image and can be:
Relative : "images/photo.jpg"
Absolute : "https://logic-practice.com/images/photo.jpg"
<img src="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="C# Tutorial logo">
2.alt (Alternate Text)
Displays alternative text when an image fails to load, which is crucial for accessibility purposes such as screen readers and search engine optimization (SEO) benefits.
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="A running cheetah">
Setting Image Dimensions
3 . width and height
These attributes dictate the dimensions of an image on screen in pixels. Alternatively, CSS can be employed for greater styling flexibility.
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="300" height="180" alt="Animal Image">
Or using CSS:
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Animal Image" style="width:300px; height:180px;">
Note: Always use width and height to avoid flickering when loading the page.
Styling Images
- title
Showcases a tooltip when the mouse is hovered over the image.
<img src="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="Logo" title="C# Tutorial Logo">
- border
Defining an edge around an image is a deprecated feature in HTML, although it is still functional.
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Sample" border="3">
However, using CSS is more standard:
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Sample" style="border: 3px solid black;">
Aligning Images
- align
In the past, the align attribute was utilized for positioning images in relation to surrounding text. While this attribute is considered outdated now, it may still be present in older codebases as a remnant of past practices.
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Side image" align="right">
Modern alternative using CSS:
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Side image" style="float: right;">
Controlling Image Spacing
- hspace and vspace
Apply CSS margins to the image to create horizontal and vertical spacing around it, as the current method is outdated and in need of replacement.
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Spaced image" hspace="20" vspace="30">
Modern alternative:
<img src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" alt="Spaced image" style="margin: 30px 20px;">
Image as a Link
The image has the capability to function as a hyperlink by enclosing the image within an <a> tag:
<a href="https://logic-practice.com/what-is-robotics">
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Robot Image" width="100" height="100">
</a>
This feature is useful when browsing through images in a gallery or viewing photos in an expanded format.
Animated Images (GIFs)
You can utilize the identical tag <img> for the purpose of inserting dynamic images:
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Smiley" style="width: 200px; height: 200px;">
Responsive Images with srcset and sizes
To cater to different screen sizes or resolutions by displaying a range of images.
<img
src="https://placehold.co/200x150/1abc9c/ffffff?text=Sample+Image"
srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
sizes="(max-width: 640px) 100vw, 50vw"
alt="Responsive Image">
This contributes to improving mobile performance by loading compact images as needed.
Image Loading Control
- loading
The attribute defines how an image is loaded by the browser. There are two types of loading controls available:
- Lazy: The image is loaded only when it becomes visible in the viewport.
- Eager: The image is loaded right away.
<img src="https://placehold.co/800x200/1abc9c/ffffff?text=Sample+Image" alt="Hero image" loading="lazy">
Floating Images Beside Text
Another way to adjust the layout is by utilizing the float property to allow text to flow around the image.
<p>
<img src="https://placehold.co/300x300/1abc9c/ffffff?text=Sample+Image" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image floats to the right of this text.
</p>
Common Image File Formats
| Format | Type | Extension |
|---|---|---|
JPEG |
Photographic image | .jpg, .jpeg |
PNG |
Transparent image | .png |
GIF |
Animated/limited color | .gif |
SVG |
Scalable vector graphics | .svg |
ICO |
Icons/favicons | .ico, .cur |
APNG |
Animated PNG | .apng |
Note: Use JPEG for photos, PNG for logos or otherwise transparent graphics, SVG for vector graphics, and GIF or APNG for simple animations.
Legal and Performance Considerations
To ensure optimal performance and accessibility of your website, it is recommended to incorporate images following certain guidelines. Begin by resizing images to an appropriate size before uploading them to prevent any delays in page loading caused by oversized images. Additionally, always include descriptive alt text with your images to assist screen readers and improve SEO by providing valuable context about the image content.
It is important to consider the permissions when using images. It is recommended to utilize images that you have generated, purchased, or have the appropriate rights to avoid copyright issues. Whenever possible, store your images on your own server or with reliable CDN services to minimize the risk of broken external links and ensure efficient image delivery.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<img> |
Yes | Yes | Yes | Yes | Yes |
Conclusion
The < img > tag is a fundamental element in HTML that allows users to easily insert images into web pages. To develop visually attractive and user-centric websites, it is essential to have a good grasp of managing images, including defining their paths and sizes, as well as enhancing performance and responsiveness.
HTML offers extensive flexibility through attributes and CSS, whether you are showcasing static images or animated GIFs. It is essential to prioritize clean code and ensure an inclusive user experience.