In der Reihe “Basic Tipps” geht es diesmal um die korrekte Bildgröße.
Diese ist wesentlich für die Ladezeit deiner Webseite und somit auch für dein Ranking bei den Suchmaschinen.
Auch deine Besucher werden es dir danken, wenn du Bilder in korrekter Größe in deine Webseite integrierst.
Und das Beste daran: Du brauchst mittlerweile keine Spezialprogramme mehr!
Die integrierten Programme in Windows 10 reichen dafür völlig aus!
Woran erkennst du, ob ein Bild gut und klein genug für die Verwendung im Web ist?
Im Windows Explorer siehst du in der Ansicht “Details”, welche Abmessungen und welche Dateigröße dein Foto hat. (Du kannst dir die gewünschten Spalten mit der rechten Maustaste einblenden.)
Das hier gezeigte Bild ist fürs Web viel zu groß: Es hat mehr als 10 Mb und ist 4592px breit.
Vermutlich wurde das Bild mit einer guten Kamera aufgenommen und in voller Qualität abgespeichert.
Wir müssen es also verkleinern.
Du brauchst dafür kein spezielles Programm mehr, sofern du Windows 10 hast (was ich hoffe…)
Zielgrößen, um das Bild auf deiner Webseite zu verwenden:
- Dateigröße: maximal 500 kb (je weniger desto besser!)
- Abmessungen: für ein normales/kleines Foto reichen 1000px (lange Kante)
Wenn du das Foto über die gesamte Bildschirmbreite verwenden möchtest, nimm 1920px oder noch besser 2560px - Dateiformat/Dateiendung: jpg für ganz “normale” Fotos, png für Bilder mit transparenten Details/Hintergrund
- und noch was: speicher deine Bilder mit einem sprechenden, ordentlichen Namen ab (Google mag das :-))
Öffne das Bild mit dem Windows Programm FOTOS
Klick mit der rechten Maustaste auf das Foto im Explorer und gehe auf “Öffnen mit – Fotos”
Du kannst in FOTOS
- das Bild auf ein bestimmtes Seitenverhältnis zuschneiden (sehr praktisch, wenn alle Bilder gleich sein sollen)
- die Größe verändern, d.h. verkleinern und fürs Web abspeichern
- das Bild auch mit Text versehen, ein Video draus machen, usw. – aber das ist nicht unser Thema heute.
Die Größe des Bildes ändern (Dateigröße und Abmessungen)
Klick rechts oben im Programm auf die 3 Punkte und öffne “Größe ändern”
Du kannst dann
- rasch das Foto verkleinern indem du die Variante 2MP auswählst – das passt für ein normales Bild immer.
- Benutzerdefinierte Abmessungen eingeben.
Das empfehl ich dir, wenn du möchtest, dass alle Bilder gleich groß sind.
Meine Empfehlungen:
- nimm Abmessung 1000px (lange Kante) und 80% Qualität
- Wenn du das Foto über die gesamte Bildschirmbreite verwenden möchtest, nimm 1920px und dann evtl. nur 70% Qualität
- Wenn es dir sehr wichtig ist, dass das Foto qualitativ perfekt ist, bleib bei 100% und schau im Explorer, wie groß die Datei geworden ist.
- Wenn du das Foto nur für Hintergründe oder zur Deko brauchst, reichen sogar 50% Qualität. Du wirst – je nach Foto und Motiv – keinen bis wenig Unterschied sehen.
- Wichtig ist dass deine Bilder möglichst klein sind
Du siehst hier rechts im Bild, wie groß die Bilder – ausgehend von unserem riesengroßen Bild mit 10Mb – nach dem Abspeichern geworden sind. Alle Bilder sind kleiner als 500kb (nur jenes, das ich nur auf das Verhältnis 3:2 zugeschnitten habe, aber sonst nicht verkleinert habe, ist noch immer über 2Mb groß)
Wenn du mehr Anleitungen rund um deinen Webauftritt haben möchtest, melde dich zu meinem Newsletter an:
Schreib einen Kommentar