Responsive images can be implemented in various ways using HTML and CSS. Here are three commonly used techniques:

1. The srcset attribute: The srcset attribute allows you to provide different image versions based on the device's resolution. You can specify multiple image sources with their respective resolutions, and the browser will choose the most suitable one to display. For example:

<img src="image.jpg" srcset="image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x">

2. The picture element: The picture element provides a more flexible approach by allowing you to define multiple sources for an image, along with media queries to specify when each source should be used. For example:

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 900px)">
  <img src="large.jpg" alt="Responsive Image">
</picture>

3. CSS background images: Another way to implement responsive images is by using CSS background images. You can define different background images or sizes using media queries to target specific devices. For example:

<div class="image"></div>

@media (max-width: 600px) {
  .image {
    background-image: url('small.jpg');
    background-size: cover;
  }
}

@media (max-width: 900px) {
  .image {
    background-image: url('medium.jpg');
    background-size: cover;
  }
}

@media (min-width: 901px) {
  .image {
    background-image: url('large.jpg');
    background-size: cover;
  }
}

These techniques provide the flexibility needed to ensure that your images look great on different devices and screen sizes. Experiment with them and find the approach that works best for your project!