webp und Contao

Hallo,

benutzt ihr bei Bildern das webp-Format und wenn ja, wie?

Ich habe es mit der Erweiterung contao-webp-bundle ausprobiert. Sah sehr vielversprechend aus, doch leider scheint es dort kein Fallback zu geben und deshalb wurden mir im Safari gar keine Bilder angezeigt.

Laut spooky könnte ein Fallback ja so aussehen:

Code:

---

<picture>
  <source srcset="files/images/image.webp" type="image/webp">
  <source srcset="files/images/fallback.jpg" type="image/jpeg">
  <img src="files/images/fallback.jpg" alt="">
</picture>

---

Ich stelle es mir aber sehr aufwendig vor, diese Art von Fallback in den Templates zu integrieren.

Wie benutzt ihr das webp-Format?

Welche Contao Version setzt du ein?

Die neue LTS 4.9 bringt alles mit um auch den Fallback auszuliefern.

4.10

Heißt das, man braucht gar keine Erweiterung? Einfach eine .webp-Datei auswählen und fertig?

Der Safari zeigt mir das Bild einfach nicht an.. und im Quelltext wird kein Fallback erzeugt, zumindest nicht in der oben genannten Art.

Nope, das macht Contao über die Bildgrößen Einstellungen, zu finden unter Themes.

Danke, es klappt :)

Ich bin immer wieder begeistert, wie viel Arbeit Contao einem mit nur wenigen Klicks abnimmt.

Hallo,

habe gerade per Zufall ;) gesehen, dass der ie11 als Fallback meiner großen webp-Headerbilder das jpg in der kleinsten Größe und dann hochskaliert ausgibt. Sieht entsprechend unscharf aus.
Hat jemand das schon mal beobachten können?

Habe ich vielleicht was falsch konfiguriert?

picture_default

Code:

---

<?php if ($this->sources): ?>
  <picture>
    <?php foreach ($this->sources as $source): ?>
      <source srcset="<?= $source['srcset'] ?>"<?php if (!empty($source['sizes'])): ?> sizes="<?= $source['sizes'] ?>"<?php endif; ?><?php if (!empty($source['media'])): ?> media="<?= $source['media'] ?>"<?php endif; ?><?php if (!empty($source['type'])): ?> type="<?= $source['type'] ?>"<?php endif; ?>>
    <?php endforeach; ?>
<?php endif; ?>

<img src="<?= $this->img['src'] ?>"<?php if ($this->img['srcset'] !== $this->img['src']): ?> srcset="<?= $this->img['srcset'] ?>"<?php endif; ?><?php if (!empty($this->img['sizes'])): ?> sizes="<?= $this->img['sizes'] ?>"<?php endif; ?><?php if (!empty($this->img['hasSingleAspectRatio']) && !empty($this->img['width']) && !empty($this->img['height'])): ?> width="<?= $this->img['width'] ?>" height="<?= $this->img['height'] ?>"<?php endif; ?> alt="<?= $this->alt ?>"<?php if (!empty($this->img['loading'])): ?> loading="<?= $this->img['loading'] ?>"<?php endif; ?><?php if ($this->title): ?> title="<?= $this->title ?>"<?php endif; ?><?php if ($this->class || !empty($this->img['class'])): ?> class="<?= trim($this->class.' '.$this->img['class']) ?>"<?php endif; ?><?= $this->attributes ?> itemprop="image">

<?php if ($this->sources): ?>
  </picture>
<?php endif; ?>

---

Bildgrößeneinstellung
Anhang 23844

Viele Grüße,
conter

Hast du mal probiert, die 100vw bei sizes wegzulassen?

das probier ich morgen mal,

Danke und Gruß
conter