# How do you deal with Kirby and delivering Images for various devices (HiDPI, Retina, Mobile)

**URL:** <https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855>\
**Category:** Questions\
**Tags:** v2\
**Created:** [April 21, 2015, 8:46am UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855 "2015-04-21T08:46:00Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![matthack](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/matthack/32/330_2.png) [@matthack](https://forum.getkirby.com/u/matthack)\
**Post date:** [April 21, 2015, 8:46am UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/1 "2015-04-21T08:46:00Z")

</div>

Hi,

Kirbys thumb function is great and I would like to use it for delivering the right Images for various devices (smaller images for smartphones, higher images for HiDPI Devicess and so forth).

Right now I am generating a Background Image that stretches all over the Welcome Screen:

```
<div class="fill" style="background-image:url('<?php echo thumb($image, array('width' => 1600, 'height' => 1200, 'crop' => true), false) ?>')" />
</div>

```

I cannot use the img Tag because the image should still be scrollable - so no fixed background solution.

No I would like to modify this code in delivering the right image according to the devices viewport and/or pixel density. Is there an option for thumb called viewport - so the image would be generated depending on the devices viewport? - I couldn’t find anything online.

How do you handle Images in combination with Kirby?

Thanks for any help,

Matt

---

<div class="post-metadata">

**Author:** ![Stolzenhain](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/stolzenhain/32/4773_2.png) [@Stolzenhain](https://forum.getkirby.com/u/Stolzenhain)\
**Post date:** [April 21, 2015, 9:42am UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/2 "2015-04-21T09:42:13Z")

</div>

Hello! Due to the caching nature of CMSes in general you should prepare the image URL for every possible output in the template and hand it over via frontend measures, e.g. the browser or scripts.

If you’re handling images in content, you can use the `<picture>` element and [Javascript polyfill libraries](https://scottjehl.github.io/picturefill/).

If you’re using CSS rules, you can supply multiple images, including regular and retina assets and define them with [media queries](https://css-tricks.com/snippets/css/retina-display-media-query/).

edit: [More on the Kirby retina topic](http://forum.getkirby.com/t/retina-image-support-possible-with-kirby/268/3)

---

<div class="post-metadata">

**Author:** ![matthack](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/matthack/32/330_2.png) [@matthack](https://forum.getkirby.com/u/matthack)\
**Post date:** [April 21, 2015, 12:29pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/3 "2015-04-21T12:29:34Z")

</div>

Thanks for the help - I found a workaround to load the image via img. I am using picturefill now.

Here is a working version - for anyone who wants to give it a try:

```
<img src="<?php echo thumb($image, array('width' => 1200, 'height' => 900, 'quality' => 70, 'crop' => true), false) ?>" alt="alt Text" class="fill" sizes="100vw" srcset="<?php echo thumb($image, array('width' => 600, 'height' => 400, 'quality' => 70, 'crop' => true), false) ?> 600w,
    <?php echo thumb($image, array('width' => 800, 'height' => 600, 'quality' => 70, 'crop' => true), false) ?> 800w,
    <?php echo thumb($image, array('width' => 1200, 'height' => 900, 'quality' => 70, 'crop' => true), false) ?> 1200w,
    <?php echo thumb($image, array('width' => 1600, 'height' => 1200, 'quality' => 70, 'crop' => true), false) ?> 1600w,
    <?php echo thumb($image, array('width' => 2000, 'height' => 1500, 'quality' => 70, 'crop' => true), false) ?> 2000w">
```

---

<div class="post-metadata">

**Author:** ![twirx](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@twirx](https://forum.getkirby.com/u/twirx)\
**Post date:** [April 21, 2015, 2:56pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/4 "2015-04-21T14:56:24Z")

</div>

If you would like to stick with background images, just use css media queries. This should even work without a polyfill in most modern browsers.

[http://caniuse.com/#feat=css-media-resolution](http://caniuse.com/#feat=css-media-resolution)

---

<div class="post-metadata">

**Author:** ![matthack](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/matthack/32/330_2.png) [@matthack](https://forum.getkirby.com/u/matthack)\
**Post date:** [April 21, 2015, 3:09pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/5 "2015-04-21T15:09:49Z")

</div>

Thanks for the input. As I am using Kirby’s thumb Version to generate the various sizes, I don’t believe it’s possible to work with media queries - or is it?

---

<div class="post-metadata">

**Author:** ![SQBiz](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/sqbiz/32/5014_2.png) [@SQBiz](https://forum.getkirby.com/u/SQBiz)\
**Post date:** [April 23, 2015, 1:43am UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/6 "2015-04-23T01:43:28Z")

</div>

If you’re looking for something to run site-wide: I recently set up a site for a photographer and used [Squeezr](http://squeezr.it/). It didn’t take much config and is working well.

---

<div class="post-metadata">

**Author:** ![matthack](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/matthack/32/330_2.png) [@matthack](https://forum.getkirby.com/u/matthack)\
**Post date:** [April 23, 2015, 5:38am UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/7 "2015-04-23T05:38:15Z")

</div>

Looks interesting - thanks.

---

<div class="post-metadata">

**Author:** ![Ozy](https://avatars.discourse-cdn.com/v4/letter/o/71e660/32.png) [@Ozy](https://forum.getkirby.com/u/Ozy)\
**Post date:** [April 23, 2015, 3:17pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/8 "2015-04-23T15:17:02Z")

</div>

> [@matthack](#):
>
> Thanks for the input. As I am using Kirby’s thumb Version to generate the various sizes, I don’t believe it’s possible to work with media queries - or is it?

I never used the thumb function myself, but I don’t see why not, if you are adding the relevant css in a style tag at the head of each page. (and since this is page specific CSS it is best to put it there anyway)

---

<div class="post-metadata">

**Author:** ![matthack](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/matthack/32/330_2.png) [@matthack](https://forum.getkirby.com/u/matthack)\
**Post date:** [April 24, 2015, 4:22pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/9 "2015-04-24T16:22:20Z")

</div>

Media Queries can’t be used as inline CSS and I want Kirby to do all the conversion of the images for the various sizes. So if a user uploads an image in the panel, Kirby creates all the various images. If think it can only be done in the php file.

---

<div class="post-metadata">

**Author:** ![twirx](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@twirx](https://forum.getkirby.com/u/twirx)\
**Post date:** [April 24, 2015, 4:41pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/10 "2015-04-24T16:41:27Z")

</div>

You might want to try something like this:

```auto
<style>
    .background {
        background-image: url(<?= $image->thumb('width:1200|height:800|crop:true')->url() ?>);
    }

    @media screen and (max-width: 800px) {
        .background {
            background-image: url(<?= $image->thumb('width:800|height:533|crop:true')->url() ?>);
        }
    }
</style>

```

---

<div class="post-metadata">

**Author:** ![matthack](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/matthack/32/330_2.png) [@matthack](https://forum.getkirby.com/u/matthack)\
**Post date:** [April 24, 2015, 5:03pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/11 "2015-04-24T17:03:37Z")

</div>

Thanks - that will work. but I will stick to my img workaround for now - this solutions would make my html code pretty messy, because I am using more the 20 images on the site… 😄

---

<div class="post-metadata">

**Author:** ![twirx](https://avatars.discourse-cdn.com/v4/letter/t/c4cdca/32.png) [@twirx](https://forum.getkirby.com/u/twirx)\
**Post date:** [April 24, 2015, 5:29pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/12 "2015-04-24T17:29:57Z")

</div>

Okay, I thought you were looking for a solution for a single background image… 😉

---

<div class="post-metadata">

**Author:** ![Ozy](https://avatars.discourse-cdn.com/v4/letter/o/71e660/32.png) [@Ozy](https://forum.getkirby.com/u/Ozy)\
**Post date:** [April 24, 2015, 6:14pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/13 "2015-04-24T18:14:42Z")

</div>

> [@matthack](#):
>
> Thanks - that will work. but I will stick to my img workaround for now - this solutions would make my html code pretty messy, because I am using more the 20 images on the site…

It doesn’t matter how many images you are using on the whole site since only the images that are used for each page will be included. The only difference is that instead of adding the relevant image code in an img tag, you are adding it to the style tag at the head of the document.

Using srcset needs a polyfill (for now) but more importantly you said that you wanted this for a background, which makes the css solution more appropriate.

---

<div class="post-metadata">

**Author:** ![tnViking](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/tnviking/32/4407_2.png) [@tnViking](https://forum.getkirby.com/u/tnViking)\
**Post date:** [January 14, 2016, 3:57am UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/14 "2016-01-14T03:57:54Z")

</div>

I haven’t test it yet, but I guess if you used a bit if javascript in there, can lazy load the pictures, or make sure it only load the picture you want.  
I’m heading to bed now, but when I wake up I’ll write it up and test it

---

<div class="post-metadata">

**Author:** ![Helge](https://avatars.discourse-cdn.com/v4/letter/h/ea666f/32.png) [@Helge](https://forum.getkirby.com/u/Helge)\
**Post date:** [April 24, 2017, 1:58pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/15 "2017-04-24T13:58:32Z")

</div>

Hi Matthack,

thank you for the solution. I’m trying to get a srcset to work, but after implementing your script, my browser gives me a 500 error. What might be the problem? I implemented picturefill in my js file and put your code in my markup.  
Shall i probably load picturefill before the content?

@forum maybe you have a hint how to deal with thumbs and picturefill?

---

<div class="post-metadata">

**Author:** ![matthack](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/matthack/32/330_2.png) [@matthack](https://forum.getkirby.com/u/matthack)\
**Post date:** [April 25, 2017, 1:19pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/16 "2017-04-25T13:19:20Z")

</div>

Hi Helge,

as far as I can remember you have to load picturefill async in the header.

You can check out my working site here:

> **[fifth music & sound design](http://www.fifth-music.com)**
>
> We create music & sound design for moving pictures.

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [April 25, 2017, 2:31pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/17 "2017-04-25T14:31:54Z")

</div>

Alternatively, you can use Adaptive images. This does away with having to generate different images and get funky with Kirby tags to get them on the page. Images getting generated at an appropriate size for the users device in the background on the server side. Pretty easy to setup.

[http://adaptive-images.com](http://adaptive-images.com)

---

<div class="post-metadata">

**Author:** ![Helge](https://avatars.discourse-cdn.com/v4/letter/h/ea666f/32.png) [@Helge](https://forum.getkirby.com/u/Helge)\
**Post date:** [May 3, 2017, 11:23pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/18 "2017-05-03T23:23:15Z")

</div>

Thank you, the last example works perfect!

---

<div class="post-metadata">

**Author:** ![distantnative](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/distantnative/32/11319_2.png) [@distantnative](https://forum.getkirby.com/u/distantnative)\
**Post date:** [February 6, 2025, 4:50pm UTC](https://forum.getkirby.com/t/how-do-you-deal-with-kirby-and-delivering-images-for-various-devices-hidpi-retina-mobile/855/19 "2025-02-06T16:50:01Z")

</div>

Archived on February 6, 2025, 4:50pm UTC