This is an old one but it still worries me and made me search for a possible solution in the context of web APIs without requiring a Node package manager or a Node infrastructure.
No, no one wants to write code like what Brad posted in 2015, but that's the reality when using [responsive images](http://responsiveimages.org/), or is it?
If we don't mind doing the work on the server rather than the client we can do something like the code below, taken from [Adapting to Users with Client Hints](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints#device_hints), to load WebP images for browsers that support them and JPG/PNG for browsers that don't.
```php
```
We can then shrink our responsive images by removing the formats that are not necessary using server-side code, in this case, PHP.
```php
```
The code first checks if the browser supports PHP by testing if the string `image/webp` is included in the Accept header. We record the result.
We then create two variables. One with the name of the file and the other one with the file extension that we use based on WebP support (or lack thereof).
Then for every image in the `srcset` attribute, we compose it using PHP echo statements and the variables that we created.
This is great but it requires a server-side script and it mixes business logic with the HTML and it gets cumbersome with more than a few images.
Looking at the [client hints article](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints#device_hints) I thought that they may be the solution to writing something like the PHP code in the previous example. Unfortunately, _Client Hints have no equivalent to the Accept HTTP header_.
