How can different image formats be specified?

The following approaches are used to specify different image formats in web development:

The <picture> element: Allows the browser to select the most suitable image format from a set, based on rules specified in <source> elements.

<picture>
  <source srcset="image.webp" type="image/webp"> // Suggests WebP
  <img src="image.jpg" alt="Image description"> // Fallback for older browsers
</picture>

The srcset attribute of the <img> element: Used to specify a list of image sources with different sizes or pixel densities, as well as to offer different formats.
```
<img src="image.jpg"
     srcset="image.webp 1x, image@2x.webp 2x"
     alt="Image description">
```
In this case, srcset offers image.webp for regular displays and image@2x.webp for Retina displays, with the browser choosing WebP if supported.
HTTP headers: The server can use the Accept header from the client request to understand which image formats the browser supports and send the most optimal format in the response with the Content-Type header.
CSS: Using media queries @media, different background images can be used for different contexts (e.g., for screens with high DPI support). Although this is not a direct way to specify different formats, it can be used in conjunction with server logic or <picture> elements for responsive image loading.

The choice of method depends on the specific task, supported browsers, and infrastructure. <picture> and srcset are standard HTML approaches for the client, while server-side management of formats via HTTP headers offers greater flexibility.