Logo Tipps & Tricks

Wie Sie Ihre Bilder fürs Web vorbereiten

Wenn Sie eine Homepage haben, sind dort nicht nur Texte, sondern auch zahlreiche Bilder drauf. Mit tollen Fotos können Sie Ihre Homepage-Besucher dazu bringen, länger auf Ihrer Site zu bleiben, was Google mit einem guten Ranking belohnt.

Wichtig für Ihre Homepage-Besucher und fürs Google Ranking ist aber auch die Ladezeit Ihrer Site. Studien zeigen, dass viele Besucher abspringen, wenn die Ladezeit 3 Sekunden übersteigt – Ihre Besucher also länger als 3 Sekunden warten müssen, bis sie etwas sehen. Und auch hier spielen die Bilder eine wichtige Rolle: Je grösser die Fotos auf Ihrer Homepage sind, desto länger dauert es, bis sie geladen sind.

Wenn Sie also Ihre Bilder richtig fürs Web vorbereiten, schlagen Sie zwei Fliegen auf einen Streich: Sie machen Ihre Besucher glücklich, weil sie Ihre Inhalte schnell zu sehen bekommen. Und Sie verbessern Ihr Google-Ranking und werden besser gefunden. Hier ist das Rezept dafür.

Bei einem Foto gibt es zwei wichtige Arten von Grössen:

a) Einerseits die Grösse in Pixeln

b) Andererseits die Dateigrösse

Beides hat Auswirkungen auf die Ladezeit, und beides können Sie beeinflussen.

Beginnen wir mit der Grösse in Pixeln: Jedes Bild hat eine Breite und Höhe, die in Pixeln angegeben werden. Wenn Sie eine Kamera haben, die Bilder von 24 Megapixeln macht, dann haben Ihre Bilder eine Breite von 6’000 Pixeln und eine Höhe von 4’000 Pixeln. Damit Sie Ihr Bild auf Ihre Homepage stellen können, müssen Sie dieses Bild verkleinern, also die Anzahl Pixel reduzieren.

Auf welche Breite Sie ein solches Bild reduzieren, ist ein bisschen eine Glaubensfrage. Wenn Sie im Internet Angaben dazu suchen, werden Sie unterschiedlichste Empfehlungen erhalten: 2’000 Pixel, 1’500 Pixel etc. Testen Sie ein bisschen, was für Sie funktioniert und schauen Sie das Bild auf verschiedenen Geräten an (Desktop, Laptop, Smartphone). Persönlich bin ich der Meinung, dass 1’200 Pixel in der Breite in den meisten Fällen genügen.

Damit Sie Ihr Foto entsprechend bearbeiten können, benötigen Sie ein Programm, beispielsweise

In Photoshop gehen Sie dazu auf „Bild – Bild-Grösse“. Hier finden Sie nun die Angaben zu Ihrem Bild und können sie anpassen. Bei den anderen Foto-Programmen ist die Vorgehensweise ähnlich.

Wenn Sie jetzt die Anzahl Pixel Ihres Bildes reduziert haben, folgt der zweite Schritt: Die Dateigrösse verringern. Wenn Sie das Bild von oben nehmen, das 6’000 Pixel breit und 4’000 Pixel hoch ist, dann hat es eine Dateigrösse von mehreren Megabytes. Fürs Internet ist eine solche Datei viel zu gross. Aber inzwischen haben Sie bei Ihrem Bild ja schon die Anzahl Pixel reduziert, so dass es nun 1’200 x 800 Pixel misst. Damit reduziert sich automatisch auch die Dateigrösse. Aber Sie können noch mehr herausholen. Wenn Sie Ihr Bild jetzt abspeichern, wählen Sie nicht die grösstmögliche Qualität, sondern eine mittlere oder tiefe. Konkret heisst das: In Photoshop klicken Sie auf „Speichern unter“ und wählen bei der Qualität einen Wert zwischen 4 – 6 (niedrig – mittel). Das reduziert die Dateigrösse nochmals massiv.

Das Ziel ist es, dass die Dateigrösse deutlich unter 1 MB (Megabyte) liegt. Je geringer die Dateigrösse, desto schneller ist die Ladezeit. Wenn Ihr Bild z.B. unter 200 KB (Kilobytes) gross ist, haben Sie einen guten Wert erreicht. Das gelingt nicht immer, und Sie müssen auch abwägen zwischen Bildqualität und Ladezeit. Am besten schauen Sie sich das Bild an und entscheiden, ob es gut genug aussieht für Ihre Homepage. Wenn die Qualität gut ist, können Sie versuchen, die Dateigrösse noch etwas zu reduzieren, indem Sie in Photoshop wieder auf „Speichern unter“ gehen und dann bei der Qualität einen tieferen Wert wählen. Als Alternative können Sie auch „Für Web speichern“ wählen. Das hat den Vorteil, dass die Meta-Informationen in Ihrem Bild (z.B.  welche Kamera verwendet wurde, welche Blende, welche Verschlusszeit etc.) ebenfalls gelöscht werden und das Foto so noch kleiner wird.

Wenn Sie die Dateigrösse Ihrer Fotos nicht selbst von Hand verkleinern wollen, gibt es verschiedene Sites und Plugins, die diese Arbeit für Sie erledigen. Hier zwei Beispiele:

Hinweis: Die Dimensionen und Dateigrösse eines Fotos können Sie einfach eruieren, indem Sie im Explorer mit der Maus über das Foto fahren. Unter dem Mauszeiger erscheint ein Kästchen, das alle wichtigen Angaben zum Foto enthält: Der Name des Bildes, die Dimensionen in Pixeln, die Dateigrösse in Kilobytes, das Aufnahmedatum etc.

Deckblatt Flyer Webdesign

5 Schritte zu Ihrem erfolgreichen Homepage-Projekt

Planen Sie eine neue Homepage? Dann laden Sie meinen Guide herunter, der Ihnen zeigt, wie Sie Ihr Website-Projekt reibungslos durchführen:

Wenn Sie schon dabei sind, Ihre Fotos bezüglich Grösse anzupassen, geben Sie ihnen auch gleich einen sinnvollen Namen. Auch das hilft fürs Google-Ranking. Benennen Sie Ihr Foto also nicht „IMG_1234.jpg“, sondern z.B. „Sonnenuntergang-ueber-Eiger.jpg“ oder „Kapellbruecke-Luzern.jpg“. Die Roboter von Google, die Ihre Homepage erfassen und indexieren, können keine Fotos sehen. Sie sind deshalb darauf angewiesen, dass Sie Ihren Fotos einen sinnvollen Namen und eine Beschreibung hinzufügen, um zu wissen, was das Bild darstellt.

Wichtig ist auch, dass Sie den sogenannten Alt-Text (Alternativen Text) ausfüllen und das Bild dort kurz beschreiben. Der Alt-Text wird von Suchmaschinen erfasst. Er hilft einerseits Google, Bing und Co. und andererseits auch sehbehinderten Menschen zu verstehen, was das Bild darstellt. Und wenn ein Bild in einem Browser aus irgend einem Grund nicht angezeigt werden kann, erscheint dafür der Alt-Text.

Gefällt Ihnen dieser Blog? Dann erzählen Sie es bitte weiter.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on email