# Show different images at different breakpoints

**URL:** <https://community.weweb.io/t/show-different-images-at-different-breakpoints/1698>\
**Category:** Ask us anything\
**Created:** [January 11, 2023, 1:28pm UTC](https://community.weweb.io/t/show-different-images-at-different-breakpoints/1698 "2023-01-11T13:28:22Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![carri](https://avatars.discourse-cdn.com/v4/letter/c/c57346/32.png) [@carri](https://community.weweb.io/u/carri)\
**Post date:** [January 11, 2023, 1:28pm UTC](https://community.weweb.io/t/show-different-images-at-different-breakpoints/1698/1 "2023-01-11T13:28:22Z")

</div>

I tried to use the if statement but I don’t know what to write. I want to show one image at desktop size and another image at both smaller sizes.

Any guidance is appreciated.

![Screenshot 2023-01-11 at 7.26.10 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/5/552d271bd7c758291f6aa32c71a8fb6c59a7465b.png)

---

<div class="post-metadata">

**Author:** ![aurelie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/aurelie/32/13249_2.png) [@aurelie](https://community.weweb.io/u/aurelie)\
**Post date:** [January 11, 2023, 3:28pm UTC](https://community.weweb.io/t/show-different-images-at-different-breakpoints/1698/2 "2023-01-11T15:28:10Z")

</div>

Hi Carri,  
You need to use the breakpoint variable, available inside the context. It can be equal to default, tablet or mobile.

Here is an example. src1 is for desktop, and src2 for tablet and mobile. Just replace src1 and src2 by your own url 🙂

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/44d7dd20c8530ef8b2c3048cbe4826ac9067d382.png)

---

<div class="post-metadata">

**Author:** ![carri](https://avatars.discourse-cdn.com/v4/letter/c/c57346/32.png) [@carri](https://community.weweb.io/u/carri)\
**Post date:** [January 12, 2023, 1:44pm UTC](https://community.weweb.io/t/show-different-images-at-different-breakpoints/1698/3 "2023-01-12T13:44:54Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![carri](https://avatars.discourse-cdn.com/v4/letter/c/c57346/32.png) [@carri](https://community.weweb.io/u/carri)\
**Post date:** [January 12, 2023, 1:58pm UTC](https://community.weweb.io/t/show-different-images-at-different-breakpoints/1698/4 "2023-01-12T13:58:06Z")

</div>

This works but it needed the full URL path, not just the image file name. It’s working great now.