how to put img in HTML
video lecture
@prncgr9 NAVTTC task 5 advanced web application devlopment solution #NAVTTC #WebDevelopment #AdvancedWebApp #Task5 #WebAppDevelopment #CodingChallenge #WebDevProject #SoftwareDevelopment
♬ original sound - Z influencer - Zero influencer 10k
how to put img in HTML
Complete guide to using HTML img element and src attribute
Introduction to HTML Images
The HTML <img> tag is used to embed images in web pages. The most important attribute is src (source), which specifies the path to the image file. Images enhance visual appeal and help communicate information effectively.
Image Examples:
Basic Image
Simple image with alt text
Image with Width/Height
Image with specified dimensions
Linked Image
Image wrapped in a link
HTML Image Syntax
Basic Image Structure
<img src="image.jpg" alt="Description of image">
Image Attributes
| Attribute | Description | Required | Example |
|---|---|---|---|
| src | Specifies the path to the image | Yes | src="image.jpg" |
| alt | Alternative text for accessibility | Yes | alt="A beautiful sunset" |
| width | Specifies image width in pixels | No | width="300" |
| height | Specifies image height in pixels | No | height="200" |
| title | Provides additional information (tooltip) | No | title="Beautiful landscape" |
| loading | Specifies loading behavior (lazy/eager) | No | loading="lazy" |
| srcset | Specifies multiple image sources for responsiveness | No | srcset="small.jpg 400w, large.jpg 800w" |
Advanced Image Features
Responsive Images with srcset
<img src="image-small.jpg"
srcset="image-small.jpg 400w,
image-medium.jpg 800w,
image-large.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
alt="Responsive image example">
Image with Figure and Caption
<figure>
<img src="landscape.jpg" alt="Beautiful mountain landscape">
<figcaption>Figure 1: Mountain landscape at sunset</figcaption>
</figure>
Image as Link with Title
<a href="large-image.jpg" title="View larger version">
<img src="thumbnail.jpg" alt="Product thumbnail">
</a>
Supported Image Formats
| Format | Extension | Best For | Features |
|---|---|---|---|
| JPEG | .jpg, .jpeg | Photographs | Lossy compression, small file size |
| PNG | .png | Graphics, logos | Lossless, supports transparency |
| GIF | .gif | Simple animations | Supports animation, limited colors |
| SVG | .svg | Icons, logos | Vector-based, scalable |
| WebP | .webp | Modern web | Excellent compression, modern format |
Best Practices for Using HTML Images
Key Guidelines
- Always include descriptive alt text for accessibility
- Optimize images for web (appropriate file size and format)
- Specify width and height attributes to prevent layout shifts
- Use responsive images with srcset for different screen sizes
- Provide meaningful file names for better SEO
- Use lazy loading for images below the fold
- Consider using modern formats like WebP for better performance
- Test images on different devices and screen sizes
Complete HTML Document Example
Image Gallery Structure
<!DOCTYPE html>
<html>
<head>
<title>Photo Gallery</title>
</head>
<body>
<h1>My Photo Gallery</h1>
<div class="gallery">
<figure>
<img src="images/sunset.jpg"
alt="Beautiful sunset over mountains"
width="300"
height="200">
<figcaption>Sunset in the mountains</figcaption>
</figure>
<figure>
<img src="images/beach.jpg"
alt="White sandy beach with palm trees"
width="300"
height="200">
<figcaption>Tropical beach paradise</figcaption>
</figure>
<figure>
<a href="images/city-large.jpg">
<img src="images/city-thumb.jpg"
alt="City skyline at night"
width="300"
height="200"
title="Click to view larger">
</a>
<figcaption>City lights at night</figcaption>
</figure>
</div>
<h2>Responsive Image Example</h2>
<img src="images/hero-small.jpg"
srcset="images/hero-small.jpg 400w,
images/hero-medium.jpg 800w,
images/hero-large.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
alt="Responsive hero image"
loading="lazy">
</body>
</html>
HTML Images Compiler
Practice creating HTML images in the editor below. The live preview will update as you type. Try different image attributes and features!
