Srcset not working properly

The CMS Questions
1

Hey :slight_smile:

I try to use the lazysizes library with Kirby.

<img width="640" height="360" data-size="auto" src="<?= $image->resize(25)->url() ?>" data-src="<?= $image->url() ?>" data-srcset="<?= $image->srcset([100, 400, 800]) ?>" class="lazyload" />

doing this results in even bigger images than before.
what am I doing wrong?

my scss is looking like this:
img {
height: auto;
@include media("<=phone") {
background-color: $testcolor1;
width: 300px;
}

    @include media(">=phone", "<=tablet") {
      background-color: $testcolor2;
      width: 400px;
    }

    @include media(">=tablet", "<desktop") {
      background-color: $testcolor3;
      width: 600px;
    }

    @include media(">=desktop") {
      background-color: $testcolor1;
      width: 700px;
    }
  }

Screenshot 2021-02-02 at 7.59.40 PM

Best
Marvin :slight_smile:

2

You mean the resulting file size of 383 KB vs. 65 KB I assume? Are you using ImageMagick or the GD library?

Depending on the originals, this can sometimes happen. I’d try with IM as thumb driver to see if you get better results if it is available on your hosting.

The topic line is a bit confusing, because I don’t really see what this has to do with lazysizes?

3

Yes. The resulting file sizes.
No. I don’t use any other compression than Kirby on my local valet server.

I thought that the problem could occur from the wrong usage of lazy sizes…

4

No, lazysizes does’t do anything but load the stuff it gets.

Well, Kirby doesn’t do the compression, but uses thumb drivers in the background. So the result can always be not better than what these drivers do.

Is the result the same for all images or just some?

I’d try and install ImageMagick, then set that driver in your config (see documentation). If the result is better, then check if IM is also available on the target production server.

If not, another option could be to use an external service to optimize the thumbs.