Mastering HTML Images: The <img> Tag and its Attributes
Bring your pages to life by learning how to properly add, describe, and size images for a faster, more accessible web.
/* Let's add some pictures! */The `src` Attribute: Finding the Image
The `src` (source) attribute is the most crucial part of an `<img>` tag. It specifies the path or URL to the image file you want to display. Without a valid `src`, the browser has nothing to show.
The `alt` Attribute: Accessibility First
The `alt` (alternative text) attribute is vital for accessibility. It provides a textual description of the image for screen readers used by visually impaired users. It's also displayed if the image fails to load, providing context.
Width & Height: Controlling Dimensions
The `width` and `height` attributes define the image's dimensions in pixels. Specifying these helps the browser reserve space for the image before it loads, preventing the page content from jumping around—an issue known as Cumulative Layout Shift (CLS).
Practice Zone
Interactive Test 1: Assemble the Tag
Assemble a complete image tag by dragging the attributes into the correct order.
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Name the Attributes
Rellena los huecos en cada casilla.
<img ="path/to/image.png" ="A description" ="400">
Practice Example: Code from Scratch
Write an HTML tag to display an image named `logo.svg`. Give it an alternative text of "Company Logo" and set its width to 150 pixels.
Image Best Practices
Using `<img>` is just the beginning. To create professional, fast-loading websites, follow these best practices for handling images.
1. Choose the Right Format
Different image formats have different strengths. Choosing the right one can significantly reduce file size without losing quality.
- JPEG: Best for photographs and complex images with many colors.
- PNG: Use for images that require transparency (like logos) or have sharp lines.
- SVG: Ideal for logos and icons. They are vector-based, so they scale perfectly to any size without losing quality.
- WebP: A modern format that offers excellent compression for both photos and graphics, often smaller than JPEG and PNG.
2. Optimize and Compress
Large image files are the number one cause of slow websites. Always compress your images before uploading them. Use online tools like TinyPNG or Squoosh to reduce file size while maintaining visual quality.
3. Responsive Images with `srcset`
To ensure your images look great on all screen sizes—from mobile phones to large desktops—use the `srcset` attribute. It allows you to provide a list of different-sized image files, and the browser will automatically choose the most appropriate one for the user's device, saving bandwidth and improving performance.
<img srcset="image-small.jpg 480w,
image-large.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
src="image-large.jpg"
alt="An adaptable image">Pro Tip: Always specify `width` and `height` attributes to prevent layout shifts, even if you are resizing the image with CSS. This helps the browser allocate space correctly from the start.
Image Tag Glossary
- <img>
- The HTML tag used to embed an image in a document. It is a self-closing (or empty) element.
- src
- The "source" attribute. It is required and contains the path or URL to the image file.
- alt
- The "alternative text" attribute. It provides a text description for accessibility and is shown if the image fails to load.
- width / height
- Attributes that specify the dimensions of the image in pixels. They are important for performance to prevent layout shifts.
- Accessibility
- The practice of making websites usable by as many people as possible, including those with disabilities. Using the `alt` attribute is a key part of image accessibility.
- Pixel
- The smallest unit of a digital image or display. The `width` and `height` attributes are measured in pixels.