Bildbearbeitung für Ihre Website
Warum Sie diesen Artikel lesen sollten:
Sie erhalten Informationen zu den Bildformaten und eine einfache Anleitung rund um’s Thema “Bildbearbeitung – Website einfach selbst pflegen”.
Sie brauchen:
– Das Wissen, wie Sie Bilder auf Ihre Website laden können.
– Ihre ausgewählten Bilder
– Bildbearbeitungsprogramm (Empfehlungen kostenlose Bildbearbeitungsprogramme)
– SEO Tags (ALT-Attribut, Title-Tag, (Bild-) Beschreibung, Beschriftung)
– “sprechender” Dateiname
Die beschriebenen Maßnahmen haben Auswirkungen auf:
– geringere Ladezeit
– weniger Speicherbedarf
– mehr Kundenfreundlichkeit
– Optimierung für mobile Geräte
– Suchmaschinenoptimierung
Informationen
Vielleicht haben Sie sich schon mal gewundert, dass das Laden einer Webseite unterschiedlich lange dauert. Das liegt oftmals an der Dateigröße der Dokumente, die übers Internet auf Ihren PC bzw. Ihr Smartphone übertragen werden.
Der Faktor den Sie am einfachsten ändern können, sind die Bilder Ihrer Webseite. Bei manchen Systemen können Sie auch größere Bilder hochladen, die dann verkleinert angezeigt werden. Der Haken dabei ist, dass das große Bild, also die große Datei, geladen wird. Das Bild wird nur verkleinert angezeigt.
Ein unbearbeitetes, direkt vom Handy oder Fotoapparat heruntergeladenes Bild kann durchaus 1 MB oder größer sein. Im Schnitt sind auf der Startseite 4-6 Bilder, also 4-6 MB oder mehr, die beim Seitenaufruf erstmal geladen werden müssen.
Für manche Handy-Netze (und -Tarife) eine enorme Herausforderung. Je nach Versorgung kann das auch die Bandbreite des heimischen Internetanschlusses sprengen.
Kurz-Anleitung
Das können Sie einfach lösen, indem Sie die Bilder vor dem Hochladen auf die passende Größe zuschneiden und die Auflösung anpassen.
Im allgemeinen sind es nur 4 Schritte, egal, welches Programm Sie verwenden:
- Bild im Bildbearbeitungsprogramm öffnen
- Größe anpassen (z.B. 200 x 135 Pixel)
- Auflösung auf 96 dpi einstellen
- unter einem “sprechenden” Dateinamen speichern
Ein so bearbeitetes Bild hat dann nur noch um die 100 KB, also knapp ein Zehntel der vorherigen Dateigröße. Und so gehen Sie vor:
- Öffnen Sie das zu bearbeitende Bild in Ihrem Bildbearbeitungsprogramm (Datei – öffnen)
- im Menü bzw. in der Menüleiste auf “Bild” – “Größe ändern” klicken
- Hier finden Sie die Werte für die Bildbreite und die -Höhe, meist Pixel z.B. 960 x 720
- ändern Sie diese in die gewünschten Werte und achten Sie darauf, dass das Seiten-Verhältnis beibehalten wird (Proportional)
- jetzt noch die Auflösung auf 72 DPI einstellen
- Wenn Sie möchten, können Sie das Foto noch nachschärfen, das finden Sie unter “Effekte” – “nachschärfen”. Bei PNG/GIF Grafiken ist das nicht nötig.
- jetzt noch unter dem “sprechenden Dateinamen” abspeichern und Sie können es auf Ihre Website hochladen und einfügen.
Bildformate (.jpg, .png, .gif, .svg, .webp)
Das sind die häufigsten Bildformate für Websites:
.jpg (sprich: tschäipeg) wird für Fotos verwendet, weil der Farbumfang am größten ist.
.png (pi-än-dschi) kommt für Grafiken, Logos etc. in Frage und kann auch transparent sein
.gif (giff) wird meist für animierte Grafiken verwendet.
Nicht zu empfehlen sind .bmp, .tiff oder .eps Dateien, die sind viel zu groß und können schon mal 20 MB groß sein, was eine sehr lange Ladezeit zur Folge hat. Im Webdesign sind diese Formate aber nicht so verbreitet, kommen aber schon mal aus dem Scanner oder vom Grafikdesigner.
Für Logos und Grafiken kommen Bildformate wie .svg zum Einsatz. Das sind skalierbare Vektorgrafiken, die sich ohne Qualitätsverlust skalieren lassen. Das ist vor allem für die Anzeige auf mobilen Geräten wichtig (responsive Design).
Bilder im .webp Format lassen sich auf eine möglichst geringe Dateigröße reduzieren, man spricht von bis zu 30 % weniger als .jpg oder .png Formate. Allerdings werden sie noch nicht von allen Browsern unterstützt.
Auswirkungen auf die Suchmaschinenoptimierung (SEO)
Auch Bilder haben Auswirkungen auf die Suchmaschinenoptimierung (SEO). Die Bildgröße, der “sprechende” Dateiname, das sog. “ALT Attribut” und der “Title-Tag” werden von Suchmaschinen wie Google, Bing, Yahoo usw. ausgelesen. Je kleiner die Datei und je besser die Beschreibung des Bildinhaltes ist, umso einfacher tut sich die Suchmaschine beim Auslesen und letztlich beim Anzeigen in den Suchergebnissen.
Was ist mit “sprechender Dateinamen” gemeint?
Der “sprechende” Dateiname hilft Ihnen nicht nur Ihre Bilder auszuwählen, auch Suchmaschinen lesen ihn aus. Dateinahmen von _DSC0200 bis _DSC250 sind recht unübersichtlich. Abhilfe schaffen Dateinamen wie Wintertanne04.jpg oder Kachelofen02.jpg.
Für die Feinauswahl kommen Sie nicht darum herum, sich die Bilder anschauen. Google und Co. können die Bilder nicht anschauen. Sie haben nur die digitalen Angaben wie Dateiname, ALT-Attribut und Title Tag zur Verfügung. Speichern Sie also die Bilder, die auf ihre Webseite kommen mit einem “sprechenden” Dateinamen wie eben Hobelbank01.jpg ab.
Ich speichere die Bildernamen auch noch mit der Bildbreite (z.B. Hobelbank01_400.jpg). Das hilft mir, in der Bilderverwaltung der Website die richtige Größe auszuwählen, wenn mehrere Größen des Bildes vorhanden sind.
Das “ALT-Attribut” bzw. “alternativer Text”
Das “ALT-Attribut” soll ein Bild beschreiben, wenn dieses im Browser nicht angezeigt werden kann. Beispielsweise bei geringer Bandbreite, z. B. im Mobilnetz. Anstelle des Bildes wird das ALT-Attribut eingeblendet. Bei einem Logo wäre das “Logo Schreinerei Baum”. Idealerweise enthalten Alt-Attribut und Titel das Hauptkeyword.
Wichtig ist, dass ein Bezug zum Unternehmen hergestellt wird. Ein Beispiel: Das ALT-Attribut (und der Bildtitel) eines Bildes mit einer Brotzeit auf einem Holztisch würde ich für ein Gasthaus mit “kernige Brotzeit auf rustikalem Holztisch” benennen. Das selbe Bild auf der Website der Schreinerei, die den Tisch hergestellt hat, würde bei mir “Ahorn Holztisch mit deftiger Brotzeit” heissen.
Für Menschen mit Sehbehinderung wird der “alternative Text” mit speziellen Programmen, z. B. Screenreader, vorgelesen. Ohne alternativen Text werden evlt. Teile des Dateinamens vorgelesen. Ein Bild ohne ALT-Attribut und dem Dateinamen _DSC 235.jpg gibt Sehbehinderten keine brauchbaren Bild-Informationen.
Der “Title-Tag” oder Bildtitel
Hier kann man auch ein relevantes Keyword unterbringen, die eigentliche Funktion ist aber die etwas verzögerte Anzeige des Bildtitels, wenn man mit der Maus darüberfährt. Gerade bei Bildern ohne Bilduntertitel kann das für den Betrachter sehr nützlich sein.
Die Bild-Beschreibung bzw. Beschriftung
Die Bild-Beschreibung kann durchaus etwas ausführlicher sein, sie wird allerdings nur auf der Dateianhangseite angezeigt, also wenn Sie sich nur das Bild anzeigen lassen würden. Auf der Website erscheint die Beschreibung nicht.
Die Bildbeschriftung ist die Bildunterschrift und wird z.B. in Galerien sichtbar und Hier kann man auch ein relevantes Keyword unterbringen, die eigentliche Funktion ist aber die etwas verzögerte Anzeige des Bildtitels, wenn man mit der Maus darüberfährt. Gerade bei Bildern ohne Bilduntertitel kann das für den Betrachter sehr nützlich sein.
kostenlose Bildbearbeitungsprogramme:
– IrfanView (einfach, schnell, reicht um Bilder zuzuschneiden)
– Paint.net (für eine erweiterte Bildbearbeitung, z.B. Freistellen von Objekten)
– GIMP (für erweiterte Bildbearbeitung, noch umfangreicher wie Paint.net)
Zum Komprimieren verwende ich meist Tiny.jpg, es gibt aber noch andere:
– www.tinyjpg.com
– www.verkleinern.de
– www.online-verkleinern.de
oder geben Sie in Ihre Suchmaschine “Bilder komprimieren” ein und wählen Sie das für Sie Passendste.
So, das war’s für heute. Viel Spaß und Erfolg beim nächsten Bild hochladen.
Ihr
Franz Konietzko