How to use image srcset correctly?

Kirby 3 Solved ✅
1

Hi all,

i was wondering how to use image sourceset correctly. Google Page speed always shows me the 1024x source at the mobile result.
I checked my code with the inspector and all 3 images sources are available and the file exits. the code:

'thumbs' => [
  'srcsets' => [
          'default' => [320, 800, 1024],
          'cover' => [800, 1024, 2048]
      ]
],

 <?php if($page->pageImage()->isNotEmpty()): $thumb =  $page->pageImage()->toFile();  ?>
 <img src="<?= $thumb->url() ?>" srcset="<?= $thumb->srcset() ?>"/>
 <?php endif ?>

I would expect, that on mobile devides a smaller image is taken. Any ideas whats wrong?

2

Nothing, apart from probably the sizes. What does Pagespeed Insights complain about? Is that an images that used the full width of the screen?

3

pagespeed alway uses the 1024.
Some images are fullsize others are not.
kr

4

That doesn’t really answer my question which was what Pagespeed complains about.

5

What size is the original uploaded image? 1024?
If so then the largest image is being added to the src at page load so the browser will request that, once it’s cached then it won’t need a smaller image as it’s already cached a better version.

I always add the smallest image to the src that way you’re loading a smaller resource to begin with.

I’d also add the sizes attribute it works with srcset.

<img src="<?= $thumb->resize(320)->url() ?>" srcset="<?= $thumb->srcset() ?>" sizes="(min-width:1024px) 1024px, (min-width:321px) 60vw, (max-width:320px) 100vw">

1 Like
6

@pixelijn: mobile → images are to big
@ScreenRes the image size is over 1024, adding a smaller size to the src is a super idea!
Desktop 100, Mobile 97 now!

Thx alot!

7

No worries, glad I could help.
Great news on the score.