# Responsive images Kirby 4.1

**URL:** <https://forum.getkirby.com/t/responsive-images-kirby-4-1/32082>\
**Category:** Questions\
**Tags:** v4\
**Created:** [July 20, 2024, 8:28pm UTC](https://forum.getkirby.com/t/responsive-images-kirby-4-1/32082 "2024-07-20T20:28:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Richard\_Kirby](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@Richard\_Kirby](https://forum.getkirby.com/u/Richard_Kirby)\
**Post date:** [July 20, 2024, 8:28pm UTC](https://forum.getkirby.com/t/responsive-images-kirby-4-1/32082/1 "2024-07-20T20:28:03Z")

</div>

Hallo together,

please HELP : D

i tryt hard this Tutorial:

> **[Responsive images](https://getkirby.com/docs/cookbook/performance/responsive-images)**
>
> Boost your site's performance with images that adapt to all screen sizes

In Theory i understand the concept but in practical use work id doesnt Work.

My DEV Environment:

- MAMP Pro - Localhost
- FireFox Browser 128
- Mac Mini M1

**Question:**

- Do it need any [thumbs | Kirby CMS](https://getkirby.com/docs/reference/system/options/thumbs#thumbs-driver)  
Thumbs Driver that it Work? I understand that CG is the Default Driver

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [July 21, 2024, 6:10am UTC](https://forum.getkirby.com/t/responsive-images-kirby-4-1/32082/2 "2024-07-21T06:10:34Z")

</div>

If thumbs don’t work, check if gd library is enabled. Should be default with MAMP though. Otherwise please explain what exactly doesn’t work

---

<div class="post-metadata">

**Author:** ![Richard\_Kirby](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@Richard\_Kirby](https://forum.getkirby.com/u/Richard_Kirby)\
**Post date:** [July 21, 2024, 10:00am UTC](https://forum.getkirby.com/t/responsive-images-kirby-4-1/32082/3 "2024-07-21T10:00:53Z")

</div>

OK, thanks.

First at all iam an complete newbie in this topic and studied this tutorial [Responsive images | Kirby CMS](https://getkirby.com/docs/cookbook/performance/responsive-images).

I try to implment this:

```auto
<!DOCTYPE html>
<html>

<head>
    <title>Das srcset- und sizes-Attribut</title>
    <meta charseth="UTF-8" />
    <meta lang="de" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <h1>Responsive Bilder mit srcset und sizes - 2</h1>
    <div>
        <p>Die Pixeldichte bezieht sich auf die Anzahl der Bildpunkte (auch Pixel genannt), die auf einem Bildschirm oder Display vorhanden sind. Eine höhere Pixeldichte bedeutet, dass mehr Pixel auf einem bestimmten Bereich des Bildschirms untergebracht
            werden können, was zu einem schärferen und klareren Bild führt. Dies kann besonders bei der Betrachtung von Fotos, Videos und anderen Medieninhalten von Vorteil sein.</p>
        <img srcset="./bilder/bild-standard.webp 640w,
        ./bilder/bild-HD.webp 1280w,
        ./bilder/bild-UHD.webp 1920w"

        src="./bilder/bild-480.webp"

        sizes="(max-width: 800px) 75vw,
        (max-width: 1080px) 65vw,
        50vw" alt="Pena de Bernal">
    </div>
</body>

</html>

```

For this case i have a set of pictures in the content Page of my folder:

![Bildschirmfoto 2024-07-21 um 11.58.31](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/e/ed2e155ddf82f7e5354f8a2f9e8098926910d558.png)

My Problem is it to bring in an Form like this for example:

```auto
<?php if ($image = $page->image('flower-power.jpg')): ?>
    <img
        alt="<?= $image->alt() ?>"
        src="<?= $image->resize(300)->url() ?>"
        srcset="<?= $image->srcset([300, 600, 900, 1200, 1800]) ?>"
        sizes="(min-width: 1200px) 25vw,
                (min-width: 900px) 33vw,
                (min-width: 600px) 50vw,
                100vw"
        width="<?= $image->resize(1800)->width() ?>"
        height="<?= $image->resize(1800)->height() ?>"
    >
<?php endif ?>

```

My example work in Plain HTML without Kirby very well in the Browser.

But the implementation in Kirby CMS iam not able.

Can anybody give an hint? Thanks.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [July 21, 2024, 10:08am UTC](https://forum.getkirby.com/t/responsive-images-kirby-4-1/32082/4 "2024-07-21T10:08:50Z")

</div>

This example from the recipe implies that the current page has the given image. In the example, I try to load it by name `flower-power.jpg`.

Maybe you should start with understanding how to use images in Kirby and how thumbs work, before you start with something more complex like this recipe? Please check out this guide with its subchapters: [Managing files | Kirby CMS](https://getkirby.com/docs/guide/files)

---

<div class="post-metadata">

**Author:** ![Richard\_Kirby](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@Richard\_Kirby](https://forum.getkirby.com/u/Richard_Kirby)\
**Post date:** [July 21, 2024, 10:16am UTC](https://forum.getkirby.com/t/responsive-images-kirby-4-1/32082/5 "2024-07-21T10:16:34Z")

</div>

hmmm… ok iam not such a newbie because i already construct most ot my Webseite locel with many tutorials of this site.

I understand that `flower-power.jpg`. is just you example. Therfore i wanted to use my images and files like in my example.

hmmm… the link doesnt help me.

Like i writted in plain HTML my exmample work on localhost.

But the implementation in Kirby i have no idea where to start.

Thanks anyway.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [July 21, 2024, 11:04am UTC](https://forum.getkirby.com/t/responsive-images-kirby-4-1/32082/6 "2024-07-21T11:04:55Z")

</div>

The Kirby code you posted above does not make sense if you want to load different pre-sized images from your page folder. The example assumes you have one base file that you resize using Kirby’s thumbs engine. And then you just copy it as is, changing the file name or loading the first image in the folder or whatever.

---

<div class="post-metadata">

**Author:** ![Richard\_Kirby](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@Richard\_Kirby](https://forum.getkirby.com/u/Richard_Kirby)\
**Post date:** [July 21, 2024, 12:03pm UTC](https://forum.getkirby.com/t/responsive-images-kirby-4-1/32082/7 "2024-07-21T12:03:17Z")

</div>

OK this helpede me already very much to understand it better.

I made a test like this:

![base-image](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/b/ba4c1569cf1c20307cd1f9a23a4fa8bbf7904d44.png)

This is my **base image with 153Kb.**

Then i putted this small Code from the Reciepe there:

```auto
<?php if ($image = $page->image('bild-standard.jpg')): ?>
      <img
          alt="<?= $image->alt() ?>"
          src="<?= $image->resize(900)->url() ?>"
          srcset="<?= $image->srcset(
              [
                  '300w' => ['width' => 300],
                  '600w' => ['width' => 600],
                  '900w' => ['width' => 900],
                  '1200w' => ['width' => 1200],
                  '1800w' => ['width' => 1800],
              ]
          )?>"
          width="<?= $image->resize(1800)->width() ?>"
          height="<?= $image->resize(1800)->height() ?>"
      >

```

Now it tested it local on my MAMP Pro localhost with two Screen-Sizes:

1200-600 DPR1

 ![1200_600_DPR1](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/d/d5c30d07696e86b62bb027b501f16f0cab9cbd5f.jpeg)  
Image-File-Size **ist now 121,50**

400-300 DPR2

 ![400_300_DPR2](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/6/6bf469ddd92ce9e9be75ce07e3d70269104c9c82.png)  
Image-File-Size **ist now 121,59**

**Can you maybee confirm that my small test is correct?**

I mean i think i understand the concept now - is about Performance.

Thanks so much

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [July 21, 2024, 12:17pm UTC](https://forum.getkirby.com/t/responsive-images-kirby-4-1/32082/8 "2024-07-21T12:17:43Z")

</div>

Looks good. If the test image is already pretty optimized, the saving might not be that huge. Note that instead of using `resize()`, you have more options with the `thumb()` method, where you can also set the quality to get smaller image, and of course also the image format (like webp or avif).

---

<div class="post-metadata">

**Author:** ![Richard\_Kirby](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@Richard\_Kirby](https://forum.getkirby.com/u/Richard_Kirby)\
**Post date:** [July 21, 2024, 12:22pm UTC](https://forum.getkirby.com/t/responsive-images-kirby-4-1/32082/9 "2024-07-21T12:22:03Z")

</div>

Thank you so much.

I was struggeling since yesterday but you Hint give me the understanding.

I was assuming a concept like you described but i was in the HTML Plain Version thinking.

Now i think i understand what is about.

I will made few tutorials on my blog when is ready about using Kirby.  
From newbie to newbie : ).

THX and nice sunday