Contao-Camp 2024
Ergebnis 1 bis 1 von 1

Thema: Bildgrößen Einstellungen / webp / Device Pixel Ratio / Vorgehensweise

  1. #1
    Contao-Urgestein Avatar von Franko
    Registriert seit
    22.06.2009.
    Beiträge
    1.503
    Partner-ID
    6122

    Standard Bildgrößen Einstellungen / webp / Device Pixel Ratio / Vorgehensweise

    Hallo,
    ich spiele lokal etwas mit den Bildgrößen Einstellungen und würde dazu gerne eure Vorgehensweisen erfahren.
    Zum Test habe ich folgenden Output:

    HTML-Code:
    <div class="col-sm-6 col-md-3 ">
      <div class="ce_image block">
        <figure class="image_container">
          <picture>
            <source srcset="assets/images/3/demo-800-7fea6f29.webp 800w, assets/images/1/demo-800-e27f58ca.webp 400w" sizes="(min-width:  550px) 400px, 800px" type="image/webp">
            <img src="assets/images/4/demo-800-e512523a.jpg" srcset="assets/images/4/demo-800-e512523a.jpg 800w, assets/images/e/demo-800-48f6866e.jpg 400w" 
            sizes="(min-width:  550px) 400px, 800px" width="800" height="600" alt="" itemprop="image">
          </picture>
        </figure>
      </div>
    </div>
    Ich verwende zum Test ein Photo in einem 4Spalten/2Spalten/1Spalten Grid. Das Ausgangs Bild hat die Ausmaße von 800x600 Pixel.
    In den Chrome DevTools erhalte ich die currentSrc Angaben wie erwartet:

    - Auf dem Desktop (DPR Faktor 1) ab 550px (in den mehspaltigen Grid) das 400er Image, ansonsten das 800er.
    - Bei der mobilen Simulation (DPR Faktor 2) immer das 800er

    Eigentlich müßte man für letztere ja mit einem Original Bild von 1600x1200 arbeiten und in den Bildgrößen für "Pixeldichte/Skalierungsfaktor" dann mit "0.5x, 1x, 2x".
    Allerdings ist die Dateigröße für das 2x auch als .jpg groß und eigentlich für mobile Geräte nicht zu empfehlen. Diesbezüglich ist die .webp Ausgabe/Datei Größe zwar besser - Aber:
    Nutzt wenig wenn Safari/ios-Safari webp nicht unterstützen s.: https://caniuse.com/#feat=webp

    Also entweder scharfe Bilddarstellung vs. Dategröße (von 3.x gar nicht zu reden) ...
    Wie geht Ihr damit um?
    Geändert von Franko (14.02.2020 um 11:34 Uhr)
    Freelancer, Digital Design Enthusiast, Contao Aficionado and Tutorial Junkie @MoinFranko - Carpe diem ...

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •