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:

1. Bild im Bildbearbeitungsprogramm öffnen
2. Größe anpassen (z.B. 200 x 135 Pixel)
3. Auflösung auf 96 dpi einstellen
4. 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

Inhaltsverzeichnis:

1. Was ist SEO – Suchmaschinenoptimierung und warum gibt’s das?
2. Welchen Nutzen bietet Ihnen SEO – Suchmaschinenoptimierung?
3. Woher weiß eine Suchmaschine was sie mir anzeigen soll?
4. Was ist bei der Suchmaschinenoptimierung (SEO) zu beachten?
5. Praxis-Tipps zur Suchmaschinenoptimierung
6. Fazit

SEO Suchmaschinenoptierung was ist das und warum gibt es das?

SEO = Search Engine Optimization, deutsch „Suchmaschinenoptimierung“, wird eingesetzt um Ihre Website bei den Suchmaschinenergebnissen weiter vorne anzuzeigen.
Klar, die Seite 1 ist immer das Ziel. Ist nur leider nicht so einfach umzusetzen.

SEO Suchmaschinenoptimierung – der Nutzen?

Der Nutzen von SEO Suchmaschinenoptimierung ist, dass Ihre Website für Suchbegriffe weiter oben angezeigt wird. Wohlgemerkt sollten es Suchbegriffe sein, die von Ihren Kunden verwendet werden. Die sind oft ganz anders als Sie vermuten würden.

Allerdings geht Suchmaschinenoptimierung nicht von heute auf morgen – leider. Da braucht man schon etwas mehr Zeit um die Ergebnisse zu sehen. Aber vernachlässigen darf man es eben auch nicht. Am Ende des Blog Beitrags finden Sie meine Kontaktdaten, wenn Sie mehr dazu wissen möchten.

Woher weiß eine Suchmaschine eigentlich was sie mir anzeigen soll?

Suchmaschinen sind heute schon recht gut darin, die passenden Suchergebnisse für Ihre Suchanfragen anzuzeigen. Sie verwenden dafür einen sogenannten Algorithmus. Der ist leider nicht komplett offen gelegt auch um unfeine Manipulationen zu verhindern.

Google & Co. durchsuchen (crawlen) alle Websites und speichern die gewonnenen Daten in einer riesigen Datenbank ab, die gefundenen Websites werden indiziert. Weltweit gibt es etwa 860 Millionen Websites, ein Haufen Arbeit. Da freut sich auch Google über jede Hilfestellung und man kann den Index selbst anstoßen, über sog. Meta Tags und eingebundene Verzeichnisse steuern, was wichtig ist und durchsucht werden soll. Das spart Zeit.

In den Anfangszeiten des www gab es so manche „Kniffe“ um nach vorne zu kommen. Beispielsweise wurden viele Suchbegriffe (Keywords) in weißer Schrift auf weißem Hintergrund geschrieben und an das Seitenende gestellt. Oder man packte viele dieser Keywords in den Text, der sich dann in etwa so las:

„Kaufen Sie unsere Angel und Sie werden die größten Fische an der Angel haben. Wenn Sie noch keine Angel haben, dann bestellen Sie noch heute Ihre neue Angel bei uns im Angel Laden.“

Das Keyword des Textes dürfte ziemlich klar sein, oder?

Heute geht das nicht mehr, Google & Co. strafen solche Websites ab und zeigen sie gar nicht mehr an. Suchmaschinen können mittlerweile viel feiner unterscheiden.

Keywords sind auch heute noch ein wichtiger Teil in der Suchmaschinenoptimierung. Sie dürfen in Überschriften und Text nicht fehlen. Aber auch der Kontext des Inhalts wird von Google & Co. bewertet, also ob der Inhalt der Seite stimmig ist. So können auch Synonyme oder ähnliche Begriffe für die Bewertung herangezogen werden.

Was ist bei der Suchmaschinenoptimierung (SEO) zu beachten?

Google, Bing, Yahoo und wie sie alle heißen schauen unter anderem darauf wie oft die Website aufgerufen wird, wie schnell sie geladen wird und ob sie auf mobilen Geräten wie Smartphones und Tablets optimiert angezeigt werden. Man spricht hier vom „responsive Design“.

Auch der Inhalt, der Content, spielt eine wichtige Rolle. Bietet die Website den Besuchern wertvollen Inhalt? Websites mit dürftigem Inhalt werden nicht als wertvoll erachtet und nach hinten durchgereicht.

Drüber hinaus gibt es noch viele weitere Komponenten, die berücksichtigt werden sollten, um gute Ergebnisse zu erzielen.

Das Ziel der Suchmaschinen ist, die besten Websites für die jeweiligen Suchbegriffe (Keywords) anzubieten. Hier gibt es wiederum unterschiedliche Herangehensweisen um auch im harten Konkurrenzkampf seinen Platz zu finden.

Tipps aus der Praxis

Fragen Sie ein paar Kunden, was sie eingeben würden um Ihre Produkte oder Dienstleistung zu finden. Geben Sie einen dieser Suchbegriffe z.B. in Google ein und schauen Sie wo Ihre Website landet. Weiter als bis zur Seite 3 brauchen Sie nicht zu schauen. Schon auf Seite 2 schaut kaum mehr jemand.

Jetzt geben Sie mal Ihre Firma mit Angebot und Ort ein und schauen Sie sich das Suchergebnis an. Die erste Zeile ist Ihre Webadresse (URL), darunter der Meta Title und darunter die Meta Description. Ist das so aussagekräftig, dass Sie als Kunde draufklicken würden?

Jetzt ist es an der Zeit, SEO Status Ihrer Website zu bestimmen. Das können Sie zwar selbst machen, es gibt einige kostenlose Werkzeuge dafür, eine zweite Meinung ist hier aber auch recht hilfreich, wie beim Arzt.

Sie pflegen Ihre Website selbst und haben Administrator Rechte? Dann schauen Sie doch mal, ob Sie in der Seitenverwaltung, auch SEO-relevante Einträge (Tags) vornehmen können. Ist bereits eine „Meta Description“ und ein „Meta Title“ vergeben?

SEO – Suchmaschinenoptimierung kann unter Umständen kompliziert sein und ist ein fortwährender Prozess. Nicht immer ist es sinnvoll das selbst zu machen. Fragen Sie mich, oder fordern Sie hier einen SEO-Check Ihrer Website an.

Fazit:

SEO, also Suchmaschinenoptimierung, ist heute ein unverzichtbarer Teil Ihres Webauftritts. Eine Website zeigt Ihr Unternehmen im besten Licht. Sie macht aber nur Sinn, wenn sie von Ihren Kunden, Interessenten und Bewerbern auch gefunden wird. Eine genauere Beschreibung gibt Wikipedia unter „SEO-Suchmaschinenoptimierung“

Holen Sie sich Hilfe und klicken Sie hier für Ihren Website SEO-Check – Kostenlos und unverbindlich.

Button SEO-Check

Ihr

Franz Konietzko