Bildoptimierung fürs Web – Tipps und Tricks

Wie Bildoptimierung für die Online-Welt am besten klappt und nützliche Tipps, wie du damit auch deine Suchmaschinenoptimierung verbessern kannst, gibt es hier!

Grafik: Ein Badge auf buntem Hintergrund mit der Aufschrift "Bildoptimierungs fürs Web - Tipps und Tricks"

Worin unterscheiden sich Bilder für Druck und Web?

Große Bilder (damit ist die Bildgröße gemeint und nicht die Abmessungen des Bildes!) speichern wesentlich mehr Informationen und benötigen länger, um hochgeladen zu werden. Sie benötigen auch mehr Zeit, um vollständig dargestellt zu werden und verbrauchen Speicherplatz. Große Bilder haben für das Web aber keinen Mehrwert, denn die gespeicherte Information wird für qualitativ hochwertige Druckprojekte benötigt. Auf Ausgabegeräten mit Screen kann diese Information nicht wiedergegeben werden und sorgt somit für unnötigen Ballast. Der Trick ist also, bei einem Bild die goldene Mitte aus bestmöglicher Bildqualität zu möglichst geringer Bildgröße zu finden.

Folgende zwei Bilder haben die gleichen Abmessungen (500 x 334 Pixel) aber die Details sind unterschiedlich fein.

  • Das obere Bild hat 300PPI und ist somit für Druck optimiert. PPIs sind „Pixels per Inch“ und wenn Bilder gedruckt werden, benötigt man viel mehr Details für ein gutes Ergebnis als bei webbasierten Bildern. In diesem Fall sind es 300 Pixel pro Inch, was ein sehr gutes Druckergebnis erzielen würde, weil die Punkte dicht nebeneinander liegen und mehr Details erkennbar sind.
  • Das untere Bild hat nur 72PPI bei gleicher Breite und Höhe und ist somit für das Web optimiert. Ausgedruckt wäre die Qualität im Vergleich zum 300PPI Bild um einiges schlechter.  Schau dir beide Bilder genau an, siehst du mit freiem Auge einen Unterschied? Den großen Unterschied macht hier die Bildgröße und die sehen wir nicht.

Das obere Bild ist fast 4x (!) größer als das untere. Für webbasierte Nutzung ist das aber ein Nachteil.

Foto: Close-Up einer rosa Margerite auf blauem Hintergund

Ein 300PPI Bild mit einer Bildgröße von 197KB

Foto: Close-Up einer rosa Margerite auf blauem Hintergund

Ein 72PPI Bild mit einer Bildgröße von 53KB

Warum sollst du deine Bilder optimieren?

  • Studien zeigen, dass beinahe 50% der Online-Shopper nicht länger als drei Sekunden warten, bis eine Seite mit Bildern vollständig geladen ist, sondern stattdessen bei der Konkurrenz weitersurfen.
  • Google verwendet deinen „Page Load“ als Ranking-Faktor in seinem Algorithmus. Es ist also höchste Zeit, den Bildgrößen mehr Aufmerksamkeit zu widmen!
  • Viele Seiten und Anbieter drosseln die Qualität der Bilder schon automatisch beim Upload. Andere überlassen den UserInnen diese Entscheidung. Mit folgenden Tipps steht deiner Bildoptimierung nichts im Weg:

Praktische Tools für die Bildoptimierung

  • Gimp – Diese kostenlose Software ähnelt Photoshop in der Handhabung und ist verfügbar für Windows, Mac und Linux. Sie ist sehr verbreitet und es gibt viele Tutorials online.
  • Pic-Monkey – Hier gibt es eine gratis Testversion.
  • PIXLR – Hier gibt es eine kostenlose Web und App-Version, unkompliziert und ohne Download.
  • Canva Photo Editor Das ist die Erweiterung von Canva. Lies hier mehr über Canva und ähnliche Online-Tools und wie du damit einfache Grafiken selber erstellen kannst.

Foto: Vogelperspektive. Verschiedene ausgerollte Maßbänder liegen kreuz und quer. Eines davon ist gelb, alle anderen weiß.

Darauf musst du bei der Bildoptimierung achten:

Farbraum: Für Druck verwendet man das Farbprofil CMYK. Im Web verwendet man RGB.

Bildgröße:  Es gibt keine vorgegebene Standard-Bildgröße für Web. Eine Empfehlung für mittelgroße Bilder im Web ist 70-100kB. Wenn du aber ein Bild für einen breiten Slider oder als Hintergrund-Bild benötigst, darf es natürlich größer sein. Idealerweise sollte die Größe im Kilobyte-Bereich bleiben!

Bildformat: Bei Fotos empfiehlt sich .jpg oder .png. Bei Grafiken oder dekorativen Bildern mit wenig Farben, eignet sich auch .gif. Generell gilt: JPGs sind meistens die beste Wahl, was Qualität und kleine Bildgröße betrifft.

Bilddimensionen: Das Web ist in Pixeln aufgebaut und deine Bilder sitzen auf deiner Webseite in Containern mit einer bestimmten Pixel-Breite. Das kann zwischen ein paar Pixeln für z.B. Custom-Aufzählungszeichen bis hin zu über 2000 Pixeln bei Wallpapers sein. Die Container-Größe für Bilder gibt der/die DesignerIn und/oder ProgrammiererIn vor. Wenn du deine Bilder für Retina-Screens optimieren willst, dann musst du die Bilddimensionen verdoppeln. Dann werden die Bilder auch auf Retina schön scharf dargestellt. So würdest zu zum Beispiel ein Bild, das im Web eine Größe von 300×300 Pixel einnehmen soll, mit 600×600 Pixel (bei 72 DPI!) aufbereiten und hochladen.

Wenn du auf keine eigenen Bilder zurückgreifen kannst, findest du hier ganz viele kostenlose Bilddatenbanken. Beachte hierfür aber die Regeln für die Online-Nutzung von Bildern!

Bilder richtig benennen und SEO gleich mitdenken

Foto: Drei Scrabble-Steine liegen auf einem Holztisch und bilden das Wort "SEO".

Du willst die SEO deiner Seite verbessern und im Google Ranking weiter oben gelistet werden?

Gute Nachrichten: Darauf kannst du durch die Namensgebung deiner Bilder Einfluss nehmen. Suchmaschinen durchsuchen nicht nur Texte auf deiner Webseite, sondern auch Bildnamen. Wenn du also einen Online-Shop hast oder ein Service anbietest und von Google und der Google-Bildersuche gefunden werden möchtest, lohnt es sich auch besonderes Augenmerk auf die Namen deiner Bilder zu legen.

Tipps, wie du mit Bildnamen deine SEO verbessern kannst:

  • Überlege wonach UserInnen suchen, um die Seite mit dem Bild zu finden. Verwende relevante Keywords im Bildnamen, statt dem nichtssagenden Kamera-Titel DCMIMAGE10.jpg könnte das Bild oben rosa-margerite.jpg oder pink-chrysanthemum.jpg heißen.
  • Schlaue Köpfe analysieren mit SEO-Tools, welche Suchbegriffe die Zielgruppe verwendet, um auf deine Seite zu kommen und passen die Bildnamen an das Suchverhalten der UserInnen nachträglich noch an.

Hier findest du weitere SEO-Tipps zum Selbermachen

Bilder mit Alt-Texten sind barrierefrei im Web

Alt-Texte erscheinen, wenn der Web-Browser das Bild nicht darstellen kann. Der Browser zeigt dann eine Text-Alternative an, die im Idealfall das nicht vorhandene Bild beschreibt. Alt-Texte sind auch unerlässlich für Barrierefreiheit im Web. Barrierefreiheit ist auch ein wichtiger Faktor für ein gutes Google-Ranking! Hier erfährst du mehr über Barrierefreiheit im Web und warum sie so wichtig ist.

Foto: Eine Dame arbeitet an einem Laptop. Man sieht nur ihre Hände. Sie scrollt durch eine Bildersuche.Tipps, wie du Alt-Texte richtig definierst:

  • Beschreibe deine Bilder in einfacher Sprache. Stelle dir vor du müsstest einer anderen Person, die das Bild nicht kennt, kurz und knapp erklären, was zu sehen ist.
  • Idealerweise kannst du auch im Alt-Tag relevante Keywords verpacken.
  • Wenn du einen Online-Shop hast mit bestimmten Modell- oder Typen-Nummern zu Artikeln, dann erwähne diese ebenfalls.
  • Übertreibe es nicht mit den Keywords und stopfe nicht alles was irgendwie relevant sein könnte in den Alt-Tag. Beschreibe nur was wirklich auf dem Bild ersichtlich ist.
  • Rein dekorative Bilder, die nicht zum besseren Verständnis deiner Inhalte beitragen, benötigen keine Alt-Tags (z.B. Hintergrundbilder, Divider, Icons).

Du hast viele Fotos und möchtest sie gerne schnell und effizient von einem Profi optimiert haben? Schreib uns unter office@datenwerk.at und wir helfen dir gerne weiter!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.