So komprimieren Sie Bilder für eine Webseite

Warum die Optimierung von Bildern eine Website verbessert

Bilder stellen typischerweise einen erheblichen Teil der von einer Seite heruntergeladenen Daten dar. Eine große Datei verzögert die Darstellung von Inhalten, verbraucht mehr mobile Daten und kann das Besuchererlebnis verschlechtern. Die Optimierung kombiniert drei Entscheidungen: Dimensionen, Format und Komprimierungsstufe.

Es gibt keine perfekte Grenze für alle Bilder. Ein Miniaturbild sollte viel weniger wiegen als ein Foto, das den gesamten Bildschirm einnimmt. Das Ziel besteht darin, genügend Pixel und Qualität für den realen Raum bereitzustellen, ohne den Browser zu zwingen, Informationen herunterzuladen, die er nicht benötigt.

Empfohlener schrittweiser Ablauf

1. Gibt die maximale Breite an, mit der das Bild im Layout angezeigt wird.
2. Schneiden Sie den Rahmen vor dem Komprimieren zu, um zu vermeiden, dass Bereiche erhalten bleiben, die entfernt werden.
3. Wählen Sie das Format entsprechend dem Inhalt und dem Bedarf an Transparenz.
4. Öffnen Sie die Datei im Bildkomprimierer und versuchen Sie es mit einer mittleren bis hohen Qualität.
5. Vergleichen Sie die Gewichtung und untersuchen Sie Text, Kanten, Flächen und Farbverläufe.
6. Veröffentlichen Sie das Ergebnis und überprüfen Sie die Seite auf Mobilgeräten und Desktops.

Abmessungen: Vermeiden Sie das Hochladen von mehr Pixeln als nötig

Wenn auf einer Karte ein Bild mit einer Breite von 600 Pixeln angezeigt wird, ist das Hochladen eines 5000 Pixel großen Fotos normalerweise eine Verschwendung. Der Browser verkleinert es optisch, muss aber zunächst die gesamte Datei herunterladen. Bereiten Sie eine Version vor, die der für das Design erforderlichen Maximalgröße entspricht.

Für Bildschirme mit hoher Dichte kann es sinnvoll sein, eine Version bereitzustellen, die etwa doppelt so groß ist. Idealerweise sollte die Website jedoch reaktionsfähige Bilder mit verwenden Quelle y Größen. Auf diese Weise lädt jedes Gerät eine entsprechende Variante anstelle derselben riesigen Datei herunter.

Welches Format soll gewählt werden?

• JPG: Gute Kompatibilität und angemessene Größe für nicht transparente Fotos.
• WebP: nützlich für Fotos und Webgrafiken; kann die Transparenz wahren und kompakte Dateien anbieten.
• PNG: geeignet für Transparenz, Screenshots mit klarem Text und einfache Grafiken; Auf Fotos kann es viel Gewicht haben.
• SVG: Ideal für Vektorlogos und -symbole, wenn die Datei sicher ist und das Design als Vektor erstellt wurde.

Das Konvertieren aus einem Format garantiert nicht, dass die Datei kleiner wird. Vergleichen Sie immer das Ergebnis und behalten Sie das Originalformat bei, wenn dies die effizienteste Option ist. Konsultieren Sie die Vergleich zwischen JPG, PNG und WebP wenn Sie nicht wissen, welches Sie wählen sollen.

So wählen Sie die Komprimierungsqualität aus

Beginnen Sie mit einer Einstellung, bei der das Aussehen an erster Stelle steht, und arbeiten Sie sich nach unten vor. Fotos vertragen die Komprimierung besser als Screenshots, Diagramme und kleine Texte der Benutzeroberfläche. Wenn Lichthöfe, Blöcke oder verschwommene Kanten auftreten, erhöhen Sie die Qualität oder versuchen Sie es mit einem anderen Format.

Bewerten Sie die Datei innerhalb der Seite, nicht nur in einer erweiterten Ansicht. Ein kleiner Unterschied, der bei 300 % sichtbar ist, ist bei normaler Größe möglicherweise nicht erkennbar. Allerdings ist eine unleserliche Handschrift auf einer Karte ein echtes Problem.

Komprimierung ist kein Ersatz für eine gute Implementierung

Reservieren Sie zusätzlich zur Optimierung der Datei Speicherplatz mit Attributen Breite y Höhe , um das Überspringen von Inhalten zu vermeiden. Verwenden Sie Lazy Loading für Bilder, die sich außerhalb des ersten sichtbaren Blocks befinden, aber verzögern Sie das Hauptbild nicht, wenn dies zum Verständnis der Seite erforderlich ist.

Es ist auch eine gute Idee, einen langen Cache für Dateien mit versionierten Namen zu definieren und zu vermeiden, dass dasselbe Bild in mehreren Auflösungen mithilfe von CSS geladen wird. Diese Entscheidungen erfordern Änderungen an der Website, ergänzen aber die durch die Komprimierung erzielten Einsparungen.

Häufige Fehler

Komprimieren Sie, bevor Sie die Größe festlegen

Eine spätere Größenänderung erzwingt die doppelte Verarbeitung der Datei und kann zu Verlusten führen. Entscheiden Sie sich zunächst für den Rahmen und die Abmessungen; am Ende komprimieren.

Screenshots in JPG mit geringer Qualität konvertieren

Feine Buchstaben und Linien können zu Verschmierungen führen. Probieren Sie PNG oder WebP in höherer Qualität aus und vergleichen Sie das Gewicht.

Verwenden Sie ein kleines Bild als Kopfzeile

Beim Erweitern werden keine Details wiederhergestellt. Es beginnt mit einer ausreichend großen Quelle und generiert aus dieser Version kleinere Varianten.

Häufig gestellte Fragen

Wie viel sollte ein Webbild wiegen?

Es hängt von seiner Dimension, Bedeutung und Komplexität ab. Verwenden Sie als Kriterium das niedrigste Gewicht, das in seiner endgültigen Größe eine akzeptable Qualität beibehält, anstatt einen universellen Wert zu verfolgen.

Soll ich alle Bilder in WebP konvertieren?

Nicht unbedingt. WebP ist nützlich, aber ein einfaches PNG oder eine bereits optimierte Datei verbessert möglicherweise nicht. Konvertieren Sie eine Probe, messen Sie und bewahren Sie die Originale auf.

Verbessert das Komprimieren von Bildern allein die Positionierung?

Es hilft bei Erfahrung und Leistung, aber das Ranking hängt auch von nützlichen Inhalten, Crawling, Links, Suchabsicht und vielen anderen Signalen ab. Komprimierung ist ein Teil einer gut vorbereiteten Website.