HTML Images – A Guide

Images play a crucial role in web development by making content more engaging and visually appealing.

HTML provides the <img> tag to display images on webpages. This tutorial covers everything you need to know about using images in HTML.

What You Will Learn:

1. Basic Syntax of HTML Images
2. Image Attributes (src, alt, width, height, title)
3. Using External and Internal Image Sources
4. Using Image Formats (JPG, PNG, GIF, SVG, WebP)
5. Responsive Images
6. Image Optimization for Faster Loading
7. Using Images as Links
8. Using Background Images
9. Image Accessibility Best Practices
10. Lazy Loading for Performance
11. Common Mistakes and Best Practices

1. Basic Syntax of HTML Images

The <img> tag is self-closing and does not require a closing tag.

Example:

<img src="image.jpg" alt="A beautiful landscape">

• src=”image.jpg” – Specifies the image file.
• alt=”A beautiful landscape” – Provides alternative text for accessibility.

2. Image Attributes

src Attribute (Source)

The src attribute specifies the image file location.

<img src="flower.jpg" alt="A red flower">

alt Attribute (Alternative Text)

The alt attribute provides a text description of the image. It is useful for:

• Accessibility (for screen readers).
• SEO (search engines use alt text).
• Displaying text when an image fails to load.

<img src="broken-image.jpg" alt="An image of a sunset">

width and height Attributes

Define the image dimensions in pixels.

<img src="logo.png" width="200" height="100" alt="Company Logo">

• Do not distort images. Keep the aspect ratio intact.

title Attribute (Tooltip)

Displays a tooltip when hovering over the image.

<img src="book.jpg" alt="A book cover" title="Click to enlarge">

3. Using External and Internal Image Sources

Internal (Local) Images

Stored in the same directory as the webpage.

<img src="images/photo.jpg" alt="Local Image">

External Images

Use an absolute URL to load images from another website.

<img src="https://example.com/picture.jpg" alt="External Image">

4. Image Formats (JPG, PNG, GIF, SVG, WebP)

Different formats serve different purposes.

Format	Best Use Case	Pros	Cons
JPEG (JPG)	Photos, complex images	Small file size, supports millions of colors	Lossy compression reduces quality
PNG	Graphics, transparent images	Supports transparency, lossless	Larger file size
GIF	Animations	Supports animation	Limited colors (256)
SVG	Icons, logos	Scalable without losing quality	Not suitable for complex images
WebP	Web images	Smaller than JPEG & PNG	Not supported in older browsers

Example: Using an SVG Image

<img src="icon.svg" alt="Scalable icon">

5. Responsive Images

Use the width property in CSS to make images responsive.

Example: Full-Width Image

<img src="landscape.jpg" alt="Scenic view" style="width: 100%;">

Using the srcset Attribute

The srcset attribute helps serve different images based on screen size.

<img src="small.jpg" 
     srcset="medium.jpg 600w, large.jpg 1200w" 
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Responsive image">

• The browser chooses the best image based on device width.

6. Image Optimization for Faster Loading

Large images slow down websites. Optimize them by:

• Compressing images (Use TinyPNG or Squoosh).
• Using the correct format (WebP is recommended).
• Serving different sizes with srcset.

7. Using Images as Links

You can make an image clickable by wrapping it inside an <a> tag.

<a href="https://example.com">
    <img src="logo.png" alt="Visit our website">
</a>

• Clicking the image will navigate to example.com.

8. Using Background Images

Instead of using <img>, you can set images as backgrounds in CSS.

Example: CSS Background Image

body {
    background-image: url('background.jpg');
    background-size: cover;
    background-position: center;
}

9. Image Accessibility Best Practices

• Always use alt text for screen readers.
• Avoid text in images. Use HTML text instead.
• Use ARIA attributes when needed.

Example:

<img src="chart.png" alt="Sales growth from 2020 to 2023">

10. Lazy Loading for Performance

Lazy loading delays loading offscreen images until they are needed.

<img src="large-image.jpg" loading="lazy" alt="High-resolution image">

• Improves page speed.
• Reduces bandwidth usage.

11. Common Mistakes and Best Practices

Mistakes to Avoid

1. Using Unoptimized Large Images
   • Large files slow down websites.
   • Always compress images before use.
2. Not Using alt Attributes
   • Without alt, screen readers and search engines struggle to interpret images.
3. Using the Wrong File Format
   • Use JPEG for photos, PNG for transparency, WebP for performance.
4. Not Making Images Responsive
   • Use CSS or srcset for mobile optimization.

Best Practices

Use compressed images to reduce load time.
Use responsive images (width: 100% in CSS).
Add meaningful alt text for SEO and accessibility.
Use lazy loading for faster performance.
Use srcset for different screen sizes.

 

Conclusion

• Use <img> for embedding images.
• Optimize images for faster page loading.
• Use alt attributes for better accessibility.
• Implement lazy loading for performance.
• Make images responsive using width: 100% or srcset.