HTML Images Explained - The ![]()
Tag and How to Use src
A web page without images is like a movie without scenes. Images grab attention, clarify information, and make content more enjoyable.
In HTML you do not "embed" the image in the file - you link it to the page using a path (URL or file path).
All of this is done with one empty tag: <img>.
The <img> Tag - The Basics
<img> is an empty element - it does not need a closing tag or content.
It relies entirely on its attributes to define the image that will be displayed.
<!-- Basic syntax -->
<img src="image-path" alt="image description">
<!-- Real example -->
<img src="/assets/images/logo.png" alt="DevArabi site logo">
Two required attributes: Every image needs at leastsrc(where is the image?) andalt(what does it show?). Without them the image may not display, or it can hurt your site's SEO.
Explaining Each Attribute in Detail
1. The src Attribute - Image Source
It defines where the image file is. It can be:
<!-- Image from the same site folder -->
<img src="photo.jpg" alt="My photo">
<!-- Image in a subfolder -->
<img src="/assets/images/banner.jpg" alt="Site banner">
<!-- Image from the internet (external URL) -->
<img src="https://example.com/photo.jpg" alt="External image">
2. The alt Attribute - Alternative Text (Most Important for SEO)
alt is short for Alternative Text. It is shown instead of the image in two cases:
- If the image fails to load (weak connection or a wrong path)
- For visually impaired users who use screen readers
<!-- Yes - descriptive and helpful alt -->
<img src="team.jpg" alt="DevArabi team working on a web project">
<!-- Yes - empty alt for decorative images only -->
<img src="decoration.png" alt="">
<!-- No - bad alt that does not describe the image -->
<img src="img1.jpg" alt="image">
alt. Describe the image accurately and include relevant keywords. This improves your visibility in Google Images and regular search results.
3. The width and height Attributes - Dimensions
They define the image width and height in pixels. Why are these attributes so important?
<img src="photo.jpg" alt="Sample photo" width="400" height="300">
When you set dimensions in advance, the browser reserves the space before the image loads. This prevents "layout shift" that annoys visitors and hurts SEO.
img { width: 100%; height: auto; } instead of changing width and height values in HTML.
4. The title Attribute - Tooltip Text
Text that appears when the mouse hovers over the image (tooltip).
<img
src="/assets/images/logo.png"
alt="DevArabi logo"
title="Click to return to the home page"
width="200"
height="80"
>
Image Formats Supported on the Web
| Format | Extension | When to Use It | Benefits |
|---|---|---|---|
| WebP | .webp |
First choice in most cases | Smaller size + high quality + transparency |
| JPEG/JPG | .jpg |
Photographic images | Small size - no transparency |
| PNG | .png |
Logos, transparent background images | High quality + transparency - larger size |
| SVG | .svg |
Icons, diagrams | Scalable without distortion |
| GIF | .gif |
Simple animated images | Animation support - limited quality |
Responsive Images - Mobile and Desktop
To make an image adapt to screen size automatically, there are two approaches:
Approach 1: Simple CSS
<!-- In HTML -->
<img src="banner.jpg" alt="Site banner" style="max-width: 100%; height: auto;">
Approach 2: The <picture> Tag for Multiple Images
It lets you provide different images for different screen sizes:
<picture>
<!-- For large screens -->
<source media="(min-width: 768px)" srcset="banner-large.webp">
<!-- For mobile (default) -->
<img src="banner-small.webp" alt="Site banner">
</picture>
Full Practical Example - Simple Image Gallery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
</head>
<body>
<h1>Programming Image Gallery</h1>
<!-- Regular image -->
<img
src="/assets/images/coding.jpg"
alt="A developer writing code on a laptop"
width="800"
height="400"
title="Learn programming with DevArabi"
>
<p>Learn <strong>HTML</strong> from scratch with us.</p>
<!-- Clickable image -->
<a href="/courses/html/intro.php">
<img
src="/assets/images/html-course.jpg"
alt="HTML course - click to start"
width="300"
height="200"
>
</a>
</body>
</html>
Frequently Asked Questions - FAQ
Is alt required?
Technically no - the page works without it. But in practice yes: without alt you lose SEO points and make it harder for screen reader users. Make writing alt a habit.
What is the difference between sizing in HTML vs CSS?
Setting width and height in HTML tells the browser the original dimensions before loading (prevents layout shift).
CSS controls the actual displayed size. Best practice: set the original dimensions in HTML, then control the actual size with CSS.
Why is WebP the best format?
Google created WebP specifically for the web. Images in this format are 25-34% smaller than JPG without obvious quality loss. It is supported in all modern browsers.
Can I embed an SVG directly in HTML?
Yes. You can either link it as a normal image <img src="icon.svg">, or write the SVG code directly inside the HTML page. The second method lets you control it with CSS and JavaScript.