Loading Images depending on the device

The method from psweb works quite well.
But I still have questions:

Is there a way to make this a script that creates a variable $device size so it can be applied to all photos?

/assets/images/$device-size/image

I would also like to apply this to the logo, dynamic slider and product photos(dynamic card).

We use Cloudimage for this - its brilliant:

All you need to do is set the image size in the URL (different URL for each screen size) then let Cloudimage do the rest - its very good for optimising images. The set up we use converts the image to Webp, in the size we select (crops is required) if Webp isn’t supported by the users browser its automatically rendered in jpg format.

That’s exactly what it’s all about, how can I generate a URL based on the device.

The optimization of the images is very easy via a query.
It putts the different formats into the respective folders as .webp