WikiGalaxy
HTML Images
HTML provides the ability to display images on web pages, enhancing the visual appeal and communication of content. Images are embedded in HTML using the
<img> tag, which is self-closing and requires attributes to define the source, alternative text, dimensions, and more.
Key Attributes of
<img> Tag:
- The
<img>Tag: The primary tag for embedding images. src: Specifies the path to the image.alt: Provides alternative text for accessibility.widthandheight: Define the size of the image.title: Adds a tooltip to the image.- Common formats: JPEG, PNG, GIF, SVG, WebP.
- Responsive Images: Adjust images for different devices using CSS or attributes.
- Accessibility: Proper use of
alttext ensures images are accessible to screen readers.
Basic Image Embedding
Embedding a simple image with mandatory attributes.
<!DOCTYPE html>
<html>
<head>
<title>Basic Image Example</title>
</head>
<body>
<h1>Welcome to Our Gallery</h1>
<img src="landscape.jpg" alt="A beautiful landscape with mountains and a river" width="600" height="400">
<p>This is a serene landscape showcasing the beauty of nature.</p>
</body>
</html>
Output:
A 300x200 pixel image of a landscape will be displayed on the webpage.
Basic Image Inclusion
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Example</title>
</head>
<body>
<h1>Explore the Universe</h1>
<img
src="space-small.jpg"
srcset="space-small.jpg 480w, space-medium.jpg 800w, space-large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1200px"
alt="A breathtaking view of the galaxy">
<p>The image adjusts based on screen size for an optimal experience.</p>
</body>
</html>
Header:
Image:
A landscape image with the specified dimensions (600x400 pixels).
Alt Text:
- If the image fails to load, "A beautiful landscape with mountains and a river" will be displayed.
Output:
None, as images are visual.
Responsive Images with
srcset
Responsive images adapt their size and resolution to fit different devices.
Responsive Image Example
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Example</title>
</head>
<body>
<h1>Explore the Universe</h1>
<img
src="space-small.jpg"
srcset="space-small.jpg 480w, space-medium.jpg 800w, space-large.jpg 1200w"
sizes="(max-width: 600px) 480px, (max-width: 1024px) 800px, 1200px"
alt="A breathtaking view of the galaxy">
<p>The image adjusts based on screen size for an optimal experience.</p>
</body>
</html>
srcset:
Provides multiple image versions for varying screen sizes.
sizes:
Defines the image's display width based on the viewport.
Adaptability:
- On a small screen (e.g., mobile), the smaller image loads, saving bandwidth.
Output:
None, as this example adapts images visually.
Comparison:
<img> vs Background Images in CSS
Aspect |
| CSS Background Images | ||||||
|---|---|---|---|---|---|---|---|---|
|
|
| ||||||
Accessibility |
|
| ||||||
|
|
| ||||||
|
|
| ||||||
Using Decorative Background Images with CSS
Background Image Example
<!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<style>
.banner {
background-image: url('sunrise.jpg');
background-size: cover;
background-position: center;
width: 100%;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2em;
}
</style>
</head>
<body>
<div class="banner">
Welcome to the Sunrise View
</div>
</body>
</html>
Visual Effect:
The
sunrise.jpg image spans the entire div, creating an eye-catching banner.
CSS Properties:
background-size: cover; ensures the image covers the entire element without distortion.
Output:
None, as this involves CSS styling.
Image Maps
Image maps allow users to interact with different areas of an image, linking to different destinations.
Image Map Example
<!DOCTYPE html>
<html>
<head>
<title>Image Map Example</title>
</head>
<body>
<h1>Interactive World Map</h1>
<img src="world-map.jpg" alt="World Map" usemap="#worldmap" width="800" height="400">
<map name="worldmap">
<area shape="rect" coords="100,50,200,100" href="https://www.usa.gov" alt="USA">
<area shape="circle" coords="300,150,50" href="https://www.uk.gov" alt="UK">
<area shape="poly" coords="500,200,600,250,550,300" href="https://www.india.gov.in" alt="India">
</map>
</body>
</html>
Clickable Areas:
The
<area> tags define regions on the image linked to different URLs.
Shapes:
Supports
rect (rectangle),
circle, and
poly (polygon)
Use Case:
Useful for maps, diagrams, and infographics.
Output:
None, as this is interactive.
Lazy Loading Images
Lazy loading defers the loading of offscreen images, improving page load time.
Lazy Loading Example
<!DOCTYPE html>
<html>
<head>
<title>Lazy Loading Images</title>
</head>
<body>
<h1>Lazy Loading Example</h1>
<img src="placeholder.jpg" data-src="high-res.jpg" alt="High Resolution Example" class="lazy" width="800" height="600">
<script>
document.addEventListener("DOMContentLoaded", () => {
const lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(image => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
image.src = image.dataset.src;
observer.unobserve(image);
}
});
});
observer.observe(image);
});
});
</script>
</body>
</html>
Lazy Loading:
Images load only when they come into the viewport.
Performance:
Reduces initial page load time and bandwidth usage.
Output:
None; dynamic script handles the lazy loading behavior.
This chapter covers HTML Images in-depth, including concepts, practical examples, and advanced features. Feel free to ask for expansions or additional topics!
