Adding Images to Your Page

Example: Adding an Image

<img src="example.jpg" alt="Description of the image">
        

In this example, the src attribute specifies the image file, and the alt attribute provides a description for users who cannot see the image.

Best Practices for Using Images

• Always use the alt attribute for accessibility.
• Optimize image file sizes to improve page load speed.
• Use appropriate image formats (e.g., JPEG for photos, PNG for transparency).
• Consider responsive images for different screen sizes.

Example: Responsive Images

<img src="example.jpg" alt="Description" style="max-width: 100%; height: auto;">
        

Adding style="max-width: 100%; height: auto;" ensures the image scales properly on different screen sizes.

Practice: Try It Yourself

1. Project: Photo Gallery
   Create a web page with a gallery of images. Use the <img> element and style the images using CSS.
2. Project: Profile Picture
   Add a profile picture to a personal bio page. Include a caption and style the image with borders and padding.

Continue Learning

• Next: Creating Forms in HTML
• Previous: Structuring with <section>