Images in HTML

Hello there! In this lesson, we'll be exploring images - a crucial component of modern web pages. Images can enhance the visual appeal of your website, convey information, and engage your users. Let's dive into the world of images in HTML and learn how to embed and customize images effectively.

Embedding Images in HTML

In HTML, images are embedded using the <img> tag. The <img> tag is a self-closing tag, which means it doesn't have a closing tag. Here's the basic structure of embedding an image in HTML:

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

In the code above, the <img> tag is used to embed an image. The "src" attribute specifies the source or URL of the image file. The "alt" attribute provides alternative text for screen readers and when the image cannot be displayed.

Customizing Image Appearance

You can customize the appearance of images in HTML using attributes like width and height. These attributes allow you to control the dimensions of the displayed image. Here's an example:

<img src="image.jpg" alt="Description of the image" width="300" height="200">
          

In the code above, we added the "width" and "height" attributes to the<img> tag. The values "300" and "200" specify the width and height of the image in pixels, respectively. You can adjust these values to control the size of the displayed image.

Different Ways to Provide Image Source

There are several ways to provide the source or URL of an image:

• Relative URL: You can use a relative URL if the image file is located in the same folder as your HTML file. For example, if your HTML file is "index.html" and the image file is "image.jpg," you can simply use
  

  
              
  <img src="image.jpg">.
              

• Absolute URL: If the image is hosted on a web server, you can use the absolute URL to specify its location. For example,
  

  
              
  <img src="https://www.example.com/image.jpg">.
              

• Data URLs: You can encode the image data directly into the "src" attribute using a data URL. This is useful for small images or icons. For example,
  

  
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/wAAg8AAVsRExPQAAAAASUVORK5CYII="
  alt="Encoded image">.
              
              

You can also watch this video and learn how to upload images from your computer

Best Practices for Using Images

• Use descriptive alt text: The "alt" attribute is crucial for accessibility. It provides alternative text for screen readers and users who cannot see the image. Make sure the alt text accurately describes the image.
• Optimize image size: Large image files can slow down your website's loading time. Use image editing tools to compress and optimize your images without sacrificing quality.
• Use responsive images: Make sure your images are responsive, meaning they adjust to different screen sizes and devices. You can use CSS or modern HTML attributes like "srcset" and "sizes" to achieve responsiveness.
• Provide fallback options: If an image cannot be displayed, provide fallback options like alternative text or a placeholder image. This ensures that users still get some information even if the image fails to load.

Practice Time!

Now, let's put your knowledge into practice! Open your code editor and create a new HTML file. Experiment with embedding images, providing different source options, and customizing their appearance. Here's a simple exercise to get you started:

1. Create a new HTML file and save it as "images.html" in your workspace folder.
2. Embed an image using the <img> tag. You can use an image file from your computer or a publicly available image on the web. For example,
   

   
   <img src="image.jpg" alt="Beautiful sunset"
    width="400" height="300">
               
               

3. Try using different source options, such as relative URLs, absolute URLs, or data URLs. Observe how the images are displayed at different sizes using the "width" and "height" attributes.
4. Provide meaningful alternative text for your images using the "alt" attribute. For instance,
   

   
   <img src="image.jpg"
   alt="Sunset over the ocean" width="500" height="400">
               
               

Conclusion

In this lesson, we've explored images in HTML, including how to embed images, provide different source options, customize their appearance using width and height attributes, and more. Images play a vital role in modern web design, enhancing the visual appeal and engagement of your website. Remember to use images wisely, follow best practices, and always test your images to ensure they display correctly on different devices and browsers. In the next lesson, we'll move on to HTML audio tutorial. Stay tuned, and happy coding!