Blog | Webdesign, Branding, Squarespace

Ich checke nervös die Zeit auf dem Handy. Mein Blick springt hin und her. Wo bleibt der nur?

Die Bahnhofsdurchsage erklärt rauschend auf halb-deutsch, halb-klingonisch: “ qoH mIw'a' … Ver…spätung… 'oH mIwchaj'e.”

Ooookay, Geduld Madlen.

Da! Schnaufend rollt er mit 0,0001 km/h zum Gleis. Doch dann das: Die Anzeige zeigt plötzlich ein anderes Ziel. Ich bin verwirrt. Mir bricht der Schweiß aus und ich will nur noch eins: Weg hier. Nicht mehr auf diesen kack Zug warten und dann auch noch auf den falschen… Ich bin total genervt.

Ist passiert. Und nicht nur einmal 🙈 Als Zugpendler:in ist es mir 1x pro Woche so ergangen.

Mir ist dann die Lust aufs Zugfahren vergangen. Ich hab mir 'ne Fahrgemeinschaft gesucht.

Ich bin also wortwörtlich ausgestiegen.

Mit deinen Bildern auf der Website verhält es sich ähnlich.

Wenn du sie nicht richtig beschriftest, werden sie nicht gefunden, fehlgeleitet und landen für die Suchmaschinen irgendwie im Nirwana.

Komprimierst du ihre Größe nicht, sorgen sie für seeeehr lange Wartezeiten bei deinen Kund:innen. Und die steigen dann womöglich genauso aus wie ich und suchen sich ‘ne Website, auf der sie schneller fündig werden.

Damit deine Bilder also mehr als hübsche Deko werden, lernst du hier und heute:

Wie du Bilder für Google optimierst und damit auch deine Kund:innen wahnsinnig glücklich machst. 🥳

Inhaltsverzeichnis

Schritt 1: Verkleinere die Dateigröße deiner Bilder

2 Sekunden.

Länger wartet heutzutage keiner mehr auf ein sich ladendes Bild. Wir sind ungeduldig, wollen alles schnell erledigen.

Oft sehe ich, dass Bilder mit 8 MB (also absurd gigantomansich!) und mehr auf Webseiten sind und dadurch uuuultra langsam werden. Das gilt es unbedingt zu vermeiden, weil es für den Leser ätzend ist und Google das auch mit schlechteren Rankings bestraft.

Damit deine Seite schnell bleibt, musst du die Datengröße der Bilder also verringern. Yes yo, ist zum Glück gar kein Hexenwerk 🙂

Allgemeine Größen und Regeln

Als Faustregel gilt, die Bildgröße so klein wie möglich zu halten, ohne dass die Qualität verloren geht oder das Bild verpixelt wird.

Welches Datei-Format ist optimal?

JPG/JPEG für alle Bilder.

PNG nur in Ausnahmefällen, da dieses Format sehr große Daten erzeugt. Ich verwende es nur, wenn ich einen transparenten Hintergrund benötige (z.B. für ein Logo). Das geht nämlich nur mit PNG-Dateien 🙂

Achtung dpi!
Immer 72 dpi für Bilder im Web nutzen.
Fotografen liefern ganz oft Bilder mit 250 oder mehr dpi. Das macht das Bild aber super groß und ist fürs Internet nicht notwendig.

Welche Pixelgrößen sind die richtigen?

Große Bilder und Banner:

2000 - 2500 Pixel breite
max. 500 Kb oder kleiner

Mittelgroße Bilder, die ca. die Hälfte des Bildschirms einnehmen:

1000 - 1500 Pixel breite
150 - 400 KB oder kleiner

Kleine Bilder, die z.B. für Angebotsübersicht, Blog:

ca. 500 Pixel breite
20 - 100 KB

Anleitung: Wie du Bilder verkleinerst

Gute Nachricht: Du brauchst dafür kein Photoshop, sondern kannst das ganz einfach mit vorinstallierten Programmen auf deinem Rechner tun. Bei Windows kannst du mit “Paint” arbeiten und beim Apple nutzt du das Programm „Vorschau“.

Öffne das Bild in einem der folgenden Programme auf deinem Rechner
- Apple: Öffne das Programm Vorschau, klicke auf Werkzeuge und wähle Größenkorrektur
- Windows: Öffne das Programm Paint, klicke auf Start und wähle Größe ändern

2. Ändere die Bildbreite (Höhe passt sich automatisch mit an)

3. Lade das Bild jetzt noch mal bei https://tinypng.com/ hoch
Hier wird es nochmals stark komprimiert und spart dir unheimlich viel Ladezeit. Zum Hochladen ziehst du deine Bilder einfach per Drag and Drop in die Mitte des Bildschirms. Zum Herunterladen kannst du auf „Download all“ klicken.

Jetzt hast du deine Bilder auf ein Optimum verkleinert, was sehr, sehr, seeeehr gut ist 🥳 Denn deine Website wird dadurch schneller laden und für deine Kund:innen ruckizucki sichtbar sein - ohne langes warten.

Im nächsten Schritt kümmern wir uns um die Auffindbarkeit bei Suchmaschinen.

Schritt 2: Ändere den Dateinamen deiner Bilder

Suchmaschinen lesen die Dateinamen deiner Website und spielt Bilder in der Bildersuche aus. Wenn also z.B. jemand nach "Tipps Backen Ostern" sucht und du "zufällig" dein Bild so benannt hast, wird es dieser Person angezeigt, die dann deine wiederum deine Website findet :) Cool oder?

Wenn deine Bilder bisher also “DCS_1874926494.jpg” oder “ich-startseite.jpg” hießen, kannst du hier SEO-mäßig doch noch einiges für deine Website tun.

Wichtig ist: Überlege dir aber genau WIE du sie benennen willst.

Der Bildtitel sollte:

zu deinem Angebot passen
relevante Suchwörter (Keywords) enthalten
das Motiv auch noch beschreiben

Bilder umbenennen: So easy geht´s

Ich arbeite hier wieder im Apple-internen Programm “Vorschau”, aber so ähnlich sollte es auch beim Windows-Äquivalent “Paint” funktionieren.

01 // Wähle dein Bild im Ordner aus und mache einen Rechtsklick, wähle dann “Umbenennen”.

02 // Jetzt kannst du einfach den Text ändern.

Beachte außerdem:

Verwende Bindestriche
Kein ü, ä, ä, ß, sondern ue und so weiter
Name darf nicht zu lang sein
Name soll nicht offensichtlich “vollgestopft mit Keywords” sein
MUSS auch gleichzeitig das Bild beschreiben bzw. damit in Verbindung stehen

Tipp: Später, wenn du dein Bild in deine Website geladen hast, kannst du auch zusätzlich den sog.”Alternativ-Text” (sowas wie eine Bildbeschreibung) ausfüllen. Bei Squarespace geht das super einfach und du kannst das Bild sogar auf jeder Seite anders benennen.

Bilder optimieren zusammengefasst:

Achte auf möglichst kleine Bilddaten, damit deine Seite so schnell ist wie der Shanghai Maglev (der schnellste Zug der Welt 🤓). Das lieben Suchmaschinen UND deine Kund:innen
Benenne alle deine Bilder sinnvoll nach relevanten Suchwörtern und wenn es passt, bringe dein Angebot auch darin unter. Dafür kannst du auch den Alternativtext (Bildbeschreibung/Caption) nutzen.