Blurry placeholder with WebP and `<picture>` tag

[hansipete]

Hello there,

I'm struggling with getting blurry placeholders and webp images displayed at the same time. I either get blurry placeholders and jpegs loaded, or no placeholders but webp.

This is the snippet that I'm using thoughout my site:

<picture>
    <source
        type="image/webp"
        data-srcset="<?= $image->srcset('webp') ?>"
        sizes="100vw"
    >
    <img
        class="h-full w-full object-cover"
        style="object-position: <?php echo $image->focusPercentageX() ?>% <?php echo $image->focusPercentageY() ?>%;"
        
        src="<?= $image->placeholderUri() ?>"
        data-src="<?= $image->resize(400)->url() ?>"
        data-srcset="<?= $image->srcset() ?>"
        sizes="100vw"
        data-lazyload
        
        width="<?= $image->resize(1800)->width() ?>"
        height="<?= $image->resize(1800)->height() ?>"
        alt="<?= $image->alt() ?>"
    >
</picture>

Hope someone can help me with that.

Thank you for creating that plugin!

Hans

[rgba1111]

Hey @hansipete I have the exact same issue. Did you find any solution in the meantime? 🙏 Or maybe @johannschopplich got any hint?

[rgba1111]

For context I have seen the closed thread and added the 'format' => 'webp', but only get jpgs

<?php

return [
    'johannschopplich.blurry-placeholder' => [
        'pixel-target' => 60
    ]
];
return [
    'thumbs' => [
        'format' => 'webp',
        'srcsets' => [
            'default' => [
                '300w'  => ['width' => 450],
                '600w'  => ['width' => 900],
                '900w'  => ['width' => 1350],
                '1200w' => ['width' => 1800],
                '1800w' => ['width' => 2400],
                '2400w' => ['width' => 3200],
                '3000w' => ['width' => 4000]
            ],
            'webp' => [
                '300w'  => ['width' => 450, 'format' => 'webp'],
                '600w'  => ['width' => 900, 'format' => 'webp'],
                '900w'  => ['width' => 1350, 'format' => 'webp'],
                '1200w' => ['width' => 1800, 'format' => 'webp'],
                '1800w' => ['width' => 2400, 'format' => 'webp'],
                '2400w' => ['width' => 3200, 'format' => 'webp'],
                '3000w' => ['width' => 4000, 'format' => 'webp']
            ],
            'index-jpg' => [
                '300w'  => ['width' => 450],
                '600w'  => ['width' => 900],
                '900w'  => ['width' => 1350],
                '1200w' => ['width' => 1800],
                '1800w' => ['width' => 2400]
            ],
            'core-webp' => [
                '300w'  => ['width' => 450, 'format' => 'webp'],
                '600w'  => ['width' => 900, 'format' => 'webp'],
                '900w'  => ['width' => 1350, 'format' => 'webp'],
                '1200w' => ['width' => 1800, 'format' => 'webp'],
                '1800w' => ['width' => 2400, 'format' => 'webp']
            ],
            'core-jpg' => [
                '300w'  => ['width' => 450],
                '600w'  => ['width' => 900],
                '900w'  => ['width' => 1350],
                '1200w' => ['width' => 1800]
            ],
            'core-webp' => [
                '300w'  => ['width' => 450, 'format' => 'webp'],
                '600w'  => ['width' => 900, 'format' => 'webp'],
                '900w'  => ['width' => 1350, 'format' => 'webp'],
                '1200w' => ['width' => 1800, 'format' => 'webp'],
            ],
            'card-webp' => [
                '300w'  => ['width' => 450, 'format' => 'webp'],
                '600w'  => ['width' => 900, 'format' => 'webp']
            ],
            'card-jpg' => [
                '300w'  => ['width' => 450],
                '600w'  => ['width' => 900]
            ],
        ]
    ]
];

[hansipete]

Unfortunately I can't remember how I fixed it at the end, but it is working now: I have blurry placeholders and webp images loaded afterwards.

See this (stripped down) snippet that I use:

<picture>
    <source
        type="image/webp"
        data-srcset="<?= $image->srcset('webp') ?>"
        sizes="<?= $sizes ?>"
        data-lazyload
    >
    <img
        src="<?= $image->placeholderUri() ?>"
        data-src="<?= $image->resize(400)->url() ?>"
        data-srcset="<?= $image->srcset() ?>"
        sizes="<?= $sizes ?>"
        data-lazyload
        width="<?= $image->resize(1920)->width() ?>"
        height="<?= $image->resize(1920)->height() ?>"
        alt="<?= $image->alt() ?>"
    >
</picture>

I had issues with loadeer so I moved over to lozad. Hope this helps!

[johannschopplich]

I had issues with loadeer so I moved over to lozad. Hope this helps!

Sad. 😄 Would be great to know what the exact issue was!

Since I'm neither using the <picture> tag, nor WebP in this context, I unfortunately can't provide a solution (also don't have the time to test). Would be great to provide a minimal reproducible example to help the community test your setup and let the issue be found more easily