HTML Images & Graphics
Learn how to add images, responsive graphics, SVG, and Canvas to your webpages.
<img>(Image Tag)
The <img> tag embeds images into your page. Always include the 'alt' attribute for accessibility.
- src – the URL of the image
- alt – descriptive text for accessibility
- width & height – optional size attributes
Basic HTML Image
A simple image using src, alt, width, and height.
<img src="https://picsum.photos/seed/picsum/200/300" alt="Sample Image" width="150" height="100"><picture> & <source>
Use <picture> with <source> to provide responsive images that change based on screen size or device resolution.
- Browser chooses the first matching
. - Fallback
is required inside
. - Useful for mobile optimization and retina displays.
Responsive Image Example
Using <picture> and <source> to load different images based on screen width.
<picture>
<source media="(min-width: 800px)" srcset="https://placehold.co/800x200">
<source media="(min-width: 400px)" srcset="https://placehold.co/400x100">
<img src="https://placehold.co/200x50" alt="Responsive Image">
</picture><svg>
Scalable Vector Graphics can be embedded inline to draw shapes and text directly in HTML.
- Supports rectangles, circles, lines, paths, and text.
- Can be styled with CSS and manipulated using JavaScript.
- Resizes without losing quality.
Inline SVG Example
Drawing shapes and text directly in HTML using SVG.
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="50" fill="blue" />
<circle cx="150" cy="50" r="30" fill="red" />
<text x="50" y="90" fill="white">SVG Example</text>
</svg><canvas>(HTML Canvas)
Use <canvas> to draw graphics programmatically with JavaScript.
- Requires width and height attributes.
- Draw shapes, text, images, and animations using JavaScript.
- Ideal for games, charts, and custom graphics.
Canvas Example
Drawing shapes and text using HTML <canvas> and JavaScript.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 50);
ctx.fillStyle = 'blue';
ctx.font = '16px Arial';
ctx.fillText('Canvas Example', 10, 90);
</script>Knowledge Check
1. Which attribute is mandatory for <img> for accessibility?
2. Which tag allows multiple sources for responsive images?
3. Which elements define clickable areas on images?
4. Which tag is used for vector graphics inline in HTML?