Die Größe an den Anzeigeort anpassen
Sehen Sie sich den breitesten Platz an, den das Bild auf Ihrer Seite ausfüllt. Ein Banner über die volle Breite braucht vielleicht etwa 1600-2000 Pixel. Ein Bild in einer Artikelspalte braucht oft 800-1200 Pixel. Ein kleines Vorschaubild braucht möglicherweise nur einige hundert. Die Entwicklerwerkzeuge Ihres Browsers oder die Einstellungen Ihres Themes verraten meist die angezeigte Breite. Wenn Sie sie nicht kennen, ist eine Breite von 1200 Pixeln eine gängige, sichere Wahl für ein Artikelbild.
Scharfe Bildschirme berücksichtigen
Bildschirme mit hoher Pixeldichte zeigen mehr Details pro Pixel. Bei wichtigen Bildern bleibt das Bild scharf, wenn Sie etwa die doppelte angezeigte Breite verwenden. Bei gewöhnlichen Bildern genügt die angezeigte Breite. Eine Verdopplung der Größe vervierfacht ungefähr die Pixelanzahl, tun Sie das also nur dort, wo Schärfe wichtig ist. Fotos mit feinen Details profitieren stärker als einfache Grafiken oder unscharfe Hintergründe.
Die Proportionen beibehalten
Ändern Sie nur die Breite oder nur die Höhe und lassen Sie den anderen Wert folgen. Wenn Sie beide auf feste Werte strecken, werden Personen und Kreise verzerrt. Wenn Sie eine exakte Form brauchen, schneiden Sie zu, statt zu strecken. Um zum Beispiel ein 4:3-Foto in ein Quadrat zu verwandeln, schneiden Sie es zuerst quadratisch zu und verkleinern es dann auf die gewünschte Breite.
Verkleinern, nicht vergrößern
Ein Bild zu verkleinern funktioniert gut. Beim Vergrößern lassen sich keine Details hinzufügen, es wirkt daher weich. Wenn Sie ein größeres Bild brauchen, gehen Sie von einem größeren Original aus. Ist das Original klein, ist es oft besser, es kleiner anzuzeigen, als es zu strecken.
Ein Beispiel aus der Praxis
Angenommen, Sie haben ein Handyfoto mit 4000x3000 Pixeln für einen Blogbeitrag, dessen Textspalte 800 Pixel breit ist. Verkleinern Sie es auf 800x600 oder auf 1600x1200, wenn es auf Bildschirmen mit hoher Pixeldichte scharf sein soll. In beiden Fällen sinkt die Pixelanzahl gegenüber dem Original stark, und die Komprimierung kann die Datei anschließend weiter verkleinern. Die Zahlen sind beispielhaft, die tatsächlichen Einsparungen hängen vom Bild ab.
Ein zweiter Fall ist ein Raster aus Vorschaubildern, in dem jedes Bild etwa 300 Pixel breit erscheint. Dort Fotos in voller Größe zu laden, macht die Seite schwer, ohne sichtbaren Nutzen. Wenn Sie jedes auf etwa 300-600 Pixel Breite verkleinern, bleibt das Raster schnell und scharf. Bei Produktbildern ist es ähnlich: Zeigt die Shopvorlage sie mit 600 Pixeln Breite an, genügt eine Version mit 1200 Pixeln meist völlig, auch für scharfe Bildschirme, während ein Original mit 5000 Pixeln nur die Ladezeit verlängert.
Hero-Banner brauchen mehr Sorgfalt. Sie füllen die gesamte Breite, prüfen Sie also das breiteste Layout, das Sie unterstützen, und vermeiden Sie wichtigen Text im Bild, der beim Zuschneiden auf kleinen Bildschirmen abgeschnitten werden könnte.
Schritt für Schritt
- Ermitteln Sie die angezeigte Breite des Bildes auf Ihrer Seite.
- Entscheiden Sie, ob Sie die einfache oder etwa die doppelte Breite möchten.
- Öffnen Sie das Original, nicht eine zuvor verkleinerte Kopie.
- Legen Sie die Breite fest und lassen Sie das Seitenverhältnis gesperrt.
- Schneiden Sie zuerst zu, wenn Sie eine andere Form brauchen.
- Komprimieren Sie das verkleinerte Bild für das Web.
- Prüfen Sie es auf einem Handy und auf einem Desktop-Bildschirm.
- Ersetzen Sie das alte Bild auf Ihrer Seite und laden Sie sie neu, um zu bestätigen, dass alles richtig aussieht.
Häufige Fehler
- Sich darauf verlassen, dass der Browser ein riesiges Bild verkleinert, sodass Besucher trotzdem alles herunterladen.
- Breite und Höhe beide festlegen und das Bild quetschen.
- Ein kleines Bild vergrößern, um ein Banner auszufüllen.
- Eine bereits komprimierte Kopie wiederholt verkleinern.
- Vergessen, das Original aufzubewahren.
- Für alle Bilder der Seite dieselbe Größe verwenden, statt jedes an seinen Platz anzupassen.
Kurze Checkliste
- Angezeigte Breite bekannt
- Größe auf das Einfache oder etwa das Doppelte davon eingestellt
- Proportionen beibehalten
- Original unangetastet
- Nach dem Verkleinern komprimiert
Tipp: Benennen Sie die verkleinerte Datei eindeutig, zum Beispiel mit der Breite am Ende, damit Sie sie später vom Original unterscheiden können.
Mit DoneImg verkleinern und komprimieren
Öffnen Sie das Tool zum Verkleinern in DoneImg, fügen Sie Ihr Bild hinzu und geben Sie die gewünschte Breite ein. Ihr Browser erledigt die Arbeit, es wird also nichts hochgeladen. Öffnen Sie anschließend das Komprimierungs-Tool, um die Dateigröße zu reduzieren, und laden Sie das Ergebnis herunter. Verwenden Sie für jedes Bild einer Galerie dieselbe Breite, damit die Seite einheitlich aussieht und vorhersehbar lädt. Sehen Sie sich das Ergebnis immer in der Vorschau an, bevor Sie es herunterladen, und lassen Sie das Original unangetastet. Wenn Sie eine andere Form brauchen, nutzen Sie vor dem Verkleinern das Tool zum Zuschneiden.
Sollte ich zuerst verkleinern oder komprimieren?
Verkleinern Sie zuerst, denn weniger Pixel geben dem Kompressor weniger zu tun und ergeben eine kleinere Datei.
Verringert das Verkleinern die Qualität?
Ein verkleinertes Bild bleibt in seiner neuen Größe scharf. Sie können es später aber nicht wieder ohne Unschärfe vergrößern, bewahren Sie also das Original auf.