Open hansipete opened 1 year ago
Hey @hansipete I have the exact same issue. Did you find any solution in the meantime? 🙏 Or maybe @johannschopplich got any hint?
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]
],
]
]
];
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!
I had issues with
loadeer
so I moved over tolozad
. 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
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:
Hope someone can help me with that.
Thank you for creating that plugin!
Hans