HTML Images

Master HTML with Coddy

Learn HTML through interactive, bite-sized lessons. Build real websites and see your code come to life instantly.

Images are an essential part of web design, enhancing visual appeal and conveying information. HTML provides a simple way to embed images using the <img> tag.

Basic Syntax

The <img> tag is a self-closing element that requires no closing tag. It uses the src attribute to specify the image source:

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

Important Attributes

src: Specifies the path to the image file (required)
alt: Provides alternative text for accessibility (required)
width: Sets the width of the image in pixels
height: Sets the height of the image in pixels

Example Usage

Here's an example of an image with alternative text and dimensions:

<img src="sunset.jpg" alt="Beautiful sunset over the ocean" width="300" height="200">

Best Practices

Always include descriptive alt text for accessibility and SEO
Optimize images for web to reduce load times
Use appropriate file formats (JPEG for photographs, PNG for graphics with transparency)
Consider using responsive images for different screen sizes

Image Formats

Common web image formats include:

JPEG: Best for photographs and complex images
PNG: Ideal for graphics, logos, and images with transparency
GIF: Suitable for simple animations and graphics with limited colors
SVG: Perfect for scalable vector graphics and icons

Advanced Techniques

For more control over image display, consider using the HTML picture element. This allows you to specify multiple image sources for different screen sizes or device capabilities.

Accessibility Considerations

Ensure your images are accessible to all users:

Use meaningful alt text that describes the image content
For decorative images, use an empty alt="" attribute
Consider using aria-labelledby for complex images that require longer descriptions

SEO Impact

Images can significantly impact your website's SEO. To optimize images for search engines:

Use descriptive file names (e.g., "red-sports-car.jpg" instead of "IMG001.jpg")
Include relevant keywords in the alt text
Optimize image file sizes to improve page load speed

By following these guidelines, you can effectively use images in your HTML documents to create visually appealing and accessible web pages.