HTML Free Codes<img>
Embeds graphical images
Definition and Usage
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag is a void element (also called an empty element), which means it has no closing tag.
Required Attributes: The
<img> tag has two required attributes:
src- Specifies the path to the imagealt- Specifies alternate text for the image (for accessibility)
Note: Always specify the
width and height of an image to prevent layout shifts while the page loads.
Browser Support
The <img> tag is supported in all major browsers:
Chrome
Yes
Firefox
Yes
Safari
Yes
Edge
Yes
Opera
Yes
Attributes
| Attribute | Value | Description |
|---|---|---|
| src | URL | Required. Specifies the path to the image |
| alt | text | Required. Specifies alternate text for the image (for accessibility) |
| width | pixels | Specifies the width of the image |
| height | pixels | Specifies the height of the image |
| loading | eager lazy |
Specifies whether the browser should load the image immediately or defer loading |
| srcset | URL-list | Specifies a list of image sources for different screen sizes/resolutions |
| sizes | media-query | Specifies image sizes for different page layouts (used with srcset) |
| crossorigin | anonymous use-credentials |
Specifies CORS settings for the image |
| decoding | sync async auto |
Specifies how the browser should decode the image |
| ismap | ismap | Specifies an image as a server-side image map |
| usemap | #mapname | Specifies an image as a client-side image map |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url |
Specifies which referrer information to send when fetching the image |
Examples
Basic Image
Display a simple image with alt text:
Example
<img src="image.jpg" alt="Description of the image" width="400" height="300">Responsive Image with srcset
Provide different images for different screen sizes:
Example
<img
src="image-400.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="Responsive image example">Lazy Loading Image
Defer loading of images until they're near the viewport:
Example
<img src="image.jpg" alt="Lazy loaded image" loading="lazy" width="600" height="400">Image with Client-Side Image Map
Create clickable areas on an image:
Example
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.html">
</map>Responsive Image with CSS
Make an image responsive using CSS:
Example
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
</style>
<img src="image.jpg" alt="Responsive image" class="responsive-img">Image with Fallback
Use the <picture> element for art direction and fallback:
Example
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="Image with fallback">
</picture>Image with Different Aspect Ratios
Serve different images for different screen orientations:
Example
<picture>
<source media="(orientation: portrait)" srcset="portrait.jpg">
<source media="(orientation: landscape)" srcset="landscape.jpg">
<img src="landscape.jpg" alt="Orientation-aware image">
</picture>Image Accessibility
Proper use of the alt attribute is crucial for web accessibility:
Why Alt Text Matters
- Screen readers announce alt text to visually impaired users
- Alt text is displayed when the image fails to load
- Search engines use alt text to understand image content
- Alt text improves SEO and accessibility
Writing Good Alt Text
Example
<!-- Bad: Too vague -->
<img src="photo.jpg" alt="photo">
<!-- Good: Descriptive and meaningful -->
<img src="golden-retriever.jpg" alt="Golden retriever playing fetch in a park">
<!-- Decorative images: Use empty alt -->
<img src="decorative-line.png" alt="">
<!-- Functional images: Describe the function -->
<img src="search-icon.png" alt="Search">
Best Practice: For decorative images that don't convey information, use an empty alt attribute (
alt="") so screen readers skip them.
Best Practices
- Always include alt text - Even if it's empty for decorative images
- Specify dimensions - Use
widthandheightto prevent layout shifts - Use lazy loading - Add
loading="lazy"for images below the fold - Optimize image size - Compress images to reduce file size and improve load times
- Use appropriate formats - WebP for photos, SVG for icons and logos, PNG for transparency
- Use srcset for responsive images - Serve different sizes based on screen resolution
- Consider aspect ratio - Maintain consistent aspect ratios to prevent layout issues
- Use CSS for styling - Avoid using HTML attributes like
border,align, etc. - Test with images disabled - Ensure alt text provides meaningful information
- Use HTTPS - Serve images over HTTPS to prevent security warnings
Image Formats Comparison
| Format | Best For | Pros | Cons |
|---|---|---|---|
| JPEG | Photos, complex images | Small file size, wide support | Lossy compression, no transparency |
| PNG | Graphics with transparency | Lossless, transparency support | Larger file size |
| WebP | Modern web images | Small file size, transparency | Limited browser support (older browsers) |
| SVG | Icons, logos, diagrams | Scalable, small file size | Not suitable for photos |
| GIF | Simple animations | Animation support | Limited colors, large file size |
Try it Yourself
Interactive Example
Below is a live example showing different image implementations:
Basic Image
Responsive Image (resize browser)
Default CSS Settings
Most browsers will display the <img> element with the following default values:
Default CSS
img {
display: inline-block;
}