Module 6: Images in HTML
In this module, we will explore how to work with images in HTML effectively. By the end of this lesson, you’ll understand how to embed images, use attributes to control their behavior and appearance, and optimize them for faster page loads. We'll also include practical methods, exercises, and examples.
Topics Covered:
Embedding Images with <img>
Image Attributes (src, alt, width, height)
Image Optimization Tips
Practical Exercises and Examples
1. Embedding Images with <img>
The <img> tag is used to embed images in a webpage.
It is an empty tag (does not have a closing tag) and requires at least the src attribute to specify the image file.
Syntax:
html code
<img src="image_url" alt="Description of the image">
src: Specifies the path or URL of the image.
alt: Provides alternative text that describes the image, useful for accessibility and when the image cannot be loaded.
Example:
html code
<!DOCTYPE html> <html> <head> <title>Embedding Images</title> </head> <body> <h1>Welcome to My Webpage</h1> <img src="cat.jpg" alt="A cute cat sitting on the floor"> </body> </html>
Explanation:
The src attribute points to the file cat.jpg in the same directory as the HTML file.
The alt text describes the image content and helps users who rely on screen readers.
2. Image Attributes (src, alt, width, height)
The <img> tag supports several attributes to control the image:
src: The URL/path of the image file.
alt: Provides text if the image fails to load or for screen readers.
width and height: Control the size of the image (can be specified in pixels or percentages).
Example:
html code
<img src="landscape.jpg" alt="A beautiful landscape" width="500" height="300">
Explanation:
This resizes the image to a width of 500 pixels and a height of 300 pixels.
Maintaining the aspect ratio is crucial. If only width or height is specified, the browser adjusts the other dimension automatically.
3. Image Optimization Tips
Optimizing images ensures that your website loads quickly and efficiently. Here are some tips:
Use the Correct File Format:
JPEG: Best for photographs and complex images.
PNG: Ideal for transparent images and graphics.
WebP: Modern format offering high-quality compression.
Resize Images:
Avoid uploading large images and resizing them using width and height. Use tools like Photoshop, GIMP, or online services to resize images before embedding.
Compress Images:
Tools like TinyPNG or ImageOptim reduce image file sizes without losing quality.
Use Lazy Loading:
Add the loading="lazy" attribute to defer loading images until they’re about to appear in the viewport.
html code
<img src="large-image.jpg" alt="Large Image" loading="lazy">
Serve Responsive Images:
Use the <picture> element or the srcset attribute to deliver the appropriate image size based on the user's device.
html code
<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="Responsive Image">
4. Practical Exercises
Exercise 1: Embed and Customize an Image
Create an HTML file.
Embed an image with the <img> tag.
Add the alt attribute and set width and height to resize the image.
Use the loading="lazy" attribute to improve performance.
Solution:
html code
<!DOCTYPE html> <html> <head> <title>Image Exercise</title> </head> <body> <h1>My Favorite Picture</h1> <img src="nature.jpg" alt="A beautiful forest" width="600" height="400" loading="lazy"> </body> </html>
Exercise 2: Optimize and Serve Responsive Images
Use multiple image sizes for different devices.
Add the srcset attribute to serve the best-suited image.
Solution:
html code
<!DOCTYPE html> <html> <head> <title>Responsive Images</title> </head> <body> <h1>Responsive Image Example</h1> <img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="A scenic mountain landscape"> </body> </html>
Explanation:
The browser selects the best image based on screen size and resolution.
Exercise 3: Optimize an Image with Compression
Use a tool like TinyPNG to compress an image.
Embed the compressed image into an HTML file and compare load times with the original.
Lab Work: Build a Simple Portfolio Page
Objective: Create a portfolio page showcasing three images with descriptions and optimized performance.
Embed three images using the <img> tag.
Add descriptive alt text for each image.
Use the loading="lazy" attribute.
Optimize images using compression tools.
Ensure the images are responsive using the srcset attribute.
Solution:
html code
<!DOCTYPE html> <html> <head> <title>Portfolio</title> </head> <body> <h1>My Portfolio</h1> <h2>Project 1</h2> <img src="small-project1.jpg" srcset="medium-project1.jpg 768w, large-project1.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="Screenshot of Project 1"
loading="lazy"> <h2>Project 2</h2> <img src="small-project2.jpg" srcset="medium-project2.jpg 768w, large-project2.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="Screenshot of Project 2" loading="lazy"> <h2>Project 3</h2> <img src="small-project3.jpg" srcset="medium-project3.jpg 768w, large-project3.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="Screenshot of Project 3" loading="lazy"> </body> </html>
Conclusion
This module covers embedding images, using attributes to control their appearance and behavior, and optimizing them for performance. By practicing these concepts, you can ensure that images on your website look great and load efficiently.
No comments:
Post a Comment