Responsive image

Hi, I just started Kirby and is very new to php.

May I ask how can I product the following result with php code? It is a product image that resize automatically when I change the browser width. I extracted the code for reference.

<source srcset="https://demo.com/.../img-400x.jpg 1x, https://demo.com/.../img-800x.jpg 2x" media="(max-width:450px)">
<source srcset="https://demo.com/.../img-500x.jpg 1x, https://demo.com/.../img-1000x.jpg 2x" media="(max-width:1000px)">
<img srcset="https://demo.com/.../img-759x.jpg 1x, https://demo.com/.../img-1518x.jpg 2x" decoding="async" loading="lazy" src="https://demo.com/.../img-q85.jpg" alt="demo-alt">

Hey @jinhoe ,

i think what you are looking for is the kirby cms thumb() method.
There is also a code example on the bottom of the page.