# Responsive image

**URL:** <https://forum.getkirby.com/t/responsive-image/22559>\
**Category:** Questions\
**Tags:** v3\
**Created:** [June 10, 2021, 8:16am UTC](https://forum.getkirby.com/t/responsive-image/22559 "2021-06-10T08:16:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jinhoe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jinhoe/32/10563_2.png) [@jinhoe](https://forum.getkirby.com/u/jinhoe)\
**Post date:** [June 10, 2021, 8:16am UTC](https://forum.getkirby.com/t/responsive-image/22559/1 "2021-06-10T08:16:51Z")

</div>

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.

```auto
<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">

```

---

<div class="post-metadata">

**Author:** ![niklas.garnholz](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/niklas.garnholz/32/10564_2.png) [@niklas.garnholz](https://forum.getkirby.com/u/niklas.garnholz)\
**Post date:** [June 10, 2021, 8:39am UTC](https://forum.getkirby.com/t/responsive-image/22559/2 "2021-06-10T08:39:53Z")

</div>

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.

> **[$file-\>srcset()](https://getkirby.com/docs/reference/objects/cms/file/srcset)**
>
> Create a srcset definition for the given sizes Sizes can be defined as a simple array. They can also be set up in the config with the thumbs.srcsets option.

---

<div class="post-metadata">

**Author:** ![jinhoe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jinhoe/32/10563_2.png) [@jinhoe](https://forum.getkirby.com/u/jinhoe)\
**Post date:** [June 14, 2021, 3:46am UTC](https://forum.getkirby.com/t/responsive-image/22559/3 "2021-06-14T03:46:58Z")

</div>

Got it, thank you.