Inserting Images in HTML with <img>
Master the art of adding images to your websites. Learn the essential `src` and `alt` attributes to create beautiful and accessible content.
/* An empty body tag... */The <img> Tag
The <img> tag is used to embed an image on a webpage. It is an "empty" tag, meaning it has no closing tag. All its information is provided through attributes.
The 'src' Attribute: Image Source
The src (source) attribute is mandatory. It contains the path to the image you want to display. This can be a relative path (on your own server) or an absolute URL (on another website).
The 'alt' Attribute: Accessibility Matters
The alt (alternative text) attribute provides a text description of the image. It's crucial for accessibility, as screen readers read it to visually impaired users, and it's displayed if the image fails to load.
Sizing with 'width' and 'height'
You can use the width and height attributes to specify the size of the image in pixels. While this can be controlled with CSS, setting them in HTML helps the browser reserve space, preventing layout shifts as the page loads.
Practice Zone
Interactive Test 1: Assemble the Tag
Assemble a complete image tag by dragging the parts into the correct order.
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Name the Parts
Rellena los huecos en cada casilla.
< ="path/to/image.jpg" ="A descriptive text.">
Practice Example: Code an Image
Write the HTML code to display an image named `cat.jpg`. Provide the alternative text "A fluffy orange cat sitting in the sun."
Images in Modern Web Design
Beyond just placing an image, modern web development requires us to think about performance, responsiveness, and format. Here’s a look at best practices.
1. Responsive Images
Users visit your site on phones, tablets, and desktops. Images must adapt. The simplest way is with CSS, but for performance, HTML's srcset attribute allows the browser to choose the best image file based on screen size.
/* In your CSS file */
img {
max-width: 100%;
height: auto;
}2. Choosing the Right Format
The file format impacts quality and load time. Use JPEG for photos, PNG for graphics with transparency, SVG for logos and icons, and WebP for a modern, highly-optimized alternative to both JPEG and PNG.
3. Performance and Optimization
Large, unoptimized images are the #1 cause of slow websites. Always compress your images before uploading them. Tools like TinyPNG or Squoosh can drastically reduce file size without sacrificing much quality.
Practical Takeaway: An effective image is not just one that looks good, but one that is responsive, optimized for performance, and uses the correct format for the job.
Image Tag Glossary
- <img>
- The HTML element used to embed an image into the document. It is an empty element.
- src
- The **source** attribute. It's required and specifies the URL or path to the image file.
- alt
- The **alternative text** attribute. Provides a description for accessibility and is displayed if the image cannot be loaded.
- width
- Specifies the intrinsic width of the image in pixels. Helps the browser reserve space to prevent layout shift.
- height
- Specifies the intrinsic height of the image in pixels. Works together with the `width` attribute.
- Relative Path
- An image path relative to the current HTML file's location (e.g., `images/photo.jpg`).
- Absolute URL
- A full URL path to an image hosted on any server on the internet (e.g., `https://example.com/image.png`).