Skip to main content

Images in HTML (Live Playground)

Introduction​

Images are an essential part of web design and play a crucial role in creating engaging and visually appealing web pages. In this tutorial, you will learn how to add and style images in your HTML pages using the <img> element. You will also learn about image optimization and accessibility.

Adding Images​

To add an image to your HTML page, use the <img> element and set the src attribute to the location of the image file. The <img> element is a self-closing tag, meaning it doesn't require a closing tag.

Here's an example of adding an image:

HTML
<img src="image.jpg" alt="An example image" />
Live Playground, Try it Yourself

Image Attributes​

alt​

The alt attribute is used to provide a text description of the image. It is important for accessibility, as it helps screen readers understand the content of the image. It also serves as a fallback when the image cannot be loaded.

HTML
<img src="image.jpg" alt="A beautiful landscape" />
Live Playground, Try it Yourself

width and height​

You can set the width and height of the image using the width and height attributes. These attributes take integer values, representing the width and height in pixels.

HTML
<img src="image.jpg" alt="An example image" width="300" height="200" />

It's recommended to maintain the aspect ratio of the image to avoid distortion. If you only specify one of the dimensions (width or height), the browser will automatically scale the other dimension to maintain the aspect ratio.

Live Playground, Try it Yourself

Image Formats​

There are several image formats commonly used on the web, including JPEG, PNG, GIF, and SVG. Each format has its own advantages and use cases:

  • JPEG: Suitable for photographs and complex images with many colors.
  • PNG: Supports transparency and lossless compression, ideal for logos and simple graphics.
  • GIF: Supports animation and limited colors, suitable for simple animations and small graphics.
  • SVG: Scalable vector graphics, ideal for icons, logos, and illustrations that need to be scaled without losing quality.

Choose the appropriate format for your images to ensure optimal quality and performance.

Image Optimization​

Image optimization is an important aspect of web design, as it helps reduce the file size of images, leading to faster-loading web pages and better user experience. Some common image optimization techniques include:

  • Resizing and compressing images: Use image editing tools or online services to reduce the file size of your images without compromising quality.

  • Using responsive images: Use the srcset attribute to provide multiple versions of an image, allowing the browser to choose the most appropriate version based on the user's device and screen resolution.

HTML
<img
  src="image-small.jpg"
  alt="An example image"
  srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
  sizes="(max-width: 480px) 480px, (max-width: 800px) 800px, 1200px"
/>
  • Lazy loading: Load images only when they become visible in the user's viewport, reducing the initial load time of your web pages. You can use the loading attribute with the value lazy to enable native lazy loading in modern browsers.
HTML
<img src="image.jpg" alt="An example image" loading="lazy" />
Live Playground, Try it Yourself

Styling Images​

You can use CSS to style your images, such as adding borders, shadows, and hover effects. It's recommended to use an external CSS file for styling. Here's an example of how to style images using an external stylesheet:

HTML
<!-- Add a link to the external CSS file in the head section of your HTML document -->
<link rel="stylesheet" href="styles.css" />

In your styles.css file, add the following CSS rules:

CSS
/* Add a border to all images */
img {
  border: 2px solid black;
}

/* Add a box-shadow to all images */
img {
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

/* Add a hover effect to all images */
img:hover {
  opacity: 0.8;
}
Live Playground, Try it Yourself

Responsive Images​

Responsive images automatically adapt their size and layout based on the user's screen size and resolution. To create responsive images, you can use the max-width CSS property with a value of 100%. This will ensure that the image scales down proportionally if the container's width is smaller than the image's width.

CSS
/* Make all images responsive */
img {
  max-width: 100%;
  height: auto;
}
Live Playground, Try it Yourself

Conclusion​

Images are a key component of web design, helping create visually appealing and engaging web pages. In this tutorial, you learned how to add and style images in your HTML pages using the <img> element and CSS. You also learned about the importance of image optimization and accessibility, as well as how to create responsive images.

As you continue to develop your web development skills, you'll encounter more advanced techniques for working with images, such as using CSS background images, image sprites, and JavaScript to create image galleries and sliders. Keep practicing and experimenting with different image formats, optimization techniques, and styles to create visually stunning and high-performing web pages.