Bilder auf der Webseite

Die tat­säch­li­che Größe der Bilder soll­te ca. 1,5x grö­ßer sein als die dar­ge­stell­te Größe. So wird sicher­ge­stellt, dass auch auf 4K-Bildschirmen die Bilder in guter Qualität ange­zeigt wer­den. Achte des­halb dar­auf, dass die dar­ge­stell­te Größe klei­ner ist als die tat­säch­li­che Größe des Bildes.

Komprimieren von Bildern

Viele Komprimierungs-Plugins kom­pri­mie­ren Bilder, indem sie die Bilder kurz zu exter­nen Servern des Anbieters schi­cken, dann dort kom­pri­mie­ren und wie­der zurück zu WordPress zurück­schi­cken. Dafür musst du in den meis­ten Fällen einen kos­ten­pflich­ti­gen Tarif beim Anbieter buchen. Ich nut­ze sol­che Plugins nicht, weil es mich von einem Anbieter abhän­gig macht.

EWWW Image Optimizer dage­gen nutzt dei­nen Webserver, um dort lokal die Bilder zu kom­pri­mie­ren. Es fal­len kei­ne Kosten an und dei­ne Bilder wer­den auch nicht zu einem exter­nen Anbieter weitergeleitet.

Eine wei­te­re Möglichkeit ist es die Bilder schon vor dem Upload zu kom­pri­mie­ren. Hierfür bie­ten sich drei Lösungen an: ImageOptim, FileOptimizer oder ShortPixel.

<?php
    
    //check if method is post
    <span class="wpsdc-drop-cap">i</span>f($_POST){
        
        //get username
        $user_name = $_POST['user_name'];


        //show the user text on image
        echo '<img src="img.php?user='.$user_name.'">';

    }else{
        echo '<img src="img.php">';
    }
?>

WebP als Bilder-Format nutzen

Für die ulti­ma­ti­ve Optimierung von Bildern hat Google 2010 ein neu­es eigens ent­wi­ckel­tes Format namens „WebP“ ver­öf­fent­licht. WebP ist neben JPG und PNG ein wei­te­res Dateiformat für Bilder. WebP hat bei­de Vorteile von JPG und PNG vereint.

	PNG	JPG	WebP
Transparenz	Ja	Nein	Ja
Animation	Nein	Nein	Ja
Dateigröße	groß	Klein	Sehr klein
Qualität	Sehr gut	Ok	Sehr gut
Optimal für	Grafiken, Illustrationen	Fotos	Fotos, Grafiken, Illustrationen, Animationen

Damit du ein Gefühl dafür bekommst, wie viel Dateigröße du mit WebP spa­ren kannst, habe ich einen klei­nen Vergleich gemacht. In der fol­gen­den Tabelle habe ich jeweils ein PNG und ein JPG zu WebP kon­ver­tiert und die Dateigröße verglichen:

PNG			JPG
Nicht kom­pri­miert	Verlustfrei kom­pri­miert	WebP	Nicht kom­pri­miert	Verlustfrei kom­pri­miert	WebP
1756 KB	1132 KB	891 KB	1821 KB	1719 KB	627 KB

Das Problem bei WebP

WebP kann aktu­ell in fast allen Browsern dar­ge­stellt wer­den, außer im Internet Explorer (Stand 2023). Safari (14 – 15.6) bie­tet den vol­len Support von WebP an, benö­tigt jedoch macOS 11 Big Sur oder neuer.

Bei Browsern oder Systemen, die kein WebP unter­stüt­zen muss wei­ter­hin JPG oder PNG aus­ge­lie­fert wer­den. WebP-fähi­ge Browser las­sen den Webserver beim Seitenaufruf wis­sen, dass sie auch WebP unter­stüt­zen. Der Webserver ant­wor­tet in die­sem Fall mit einem WebP-Bild. Es gibt ein light-weigth WordPress Plugin, das auto­ma­tisch jedes neu hoch­ge­la­de­ne Bild in WebP kon­ver­tiert und es sogar auto­ma­tisch dann als WebP aus­lie­fert, wenn ein WebP-fähi­ger Browser das Bild anfragt.

Das Plugin EWWW Image Optimizer kann die­se Funktion übernehmen.

So setzt du WebP richtig ein:

1. Installiere und akti­vie­re das Plugin
2. Gehe in Einstellungen -> EWWW Image Optimizer
3. Setze im Tab „WebP-Einstellungen“ den Haken bei „JPG/PNG nach WebP“
4. Änderungen spei­chern
5. Scrolle nach unten zum Code-Snippet, der mit fol­gen­der Zeile beginnt:

   <IfModule mode_rewrite.c>

6. Klicke unter Code-Snippet auf den Button „Setze Rewrite-Regeln ein“
7. Das Code-Snippet wird jetzt auto­ma­tisch in die .htac­cess-Datei dei­nes Webservers eingefügt.
8. Sollte es Probleme mit dem auto­ma­ti­schen Einfügen geben, kopie­re das Code-Snippet manu­ell in die .htac­cess-Datei dei­nes Stammverzeichnisses.
9. Jedes neu hoch­ge­la­de­ne Bild wird auto­ma­tisch konvertiert.

Anders sieht es jedoch mit den Bildern aus, die du vor der Plugin-Installation hoch­ge­la­den hast. Diese Bilder müs­sen jetzt noch als WebP-Version ange­legt wer­den. Nutze dafür die „Massenoptimierung“ von EWWW Image Optimizer.