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"

Warum lohnt sich Bildoptimierung?

  • Kürzere Ladezeiten

    Fällt dir auch manchmal auf, dass manche Webseiten langsamer laden als andere? Oft liegt das daran, dass Bilder direkt von der Kamera auf eine Webseite hochgeladen werden. Dabei wird viel Bildinformation und unnötiger Ballast mitgegeben, der fürs Web aber nicht benötigt wird. 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. Um große Bilder von unnötigem Ballast zu befreien, müssen sie vor dem Upload komprimiert werden.

  • Besseres Google-Ranking

    Google verwendet deinen „Page Load“ als Ranking-Faktor in seinem Algorithmus. Es ist also höchste Zeit, den Bildgrößen mehr Aufmerksamkeit zu widmen!

  • Mehr Kontrolle

    Viele Seiten und Anbieter drosseln die Qualität der Bilder schon automatisch beim Upload. Andere bieten dieses Feature nicht an und überlassen den UserInnen diese Entscheidung. Hier lohnt es sich, genauer nachzusehen, damit du Anpassungen schon vor dem Upload treffen kannst. Bilder in Web-Qualität sind auch für Diebe, die keine Bilddatenbanken aufsuchen möchten, weniger attraktiv!

  • Das Ziel

    Bei Bildern fürs Web kommt es auf die die goldene Mitte aus bestmöglicher Bildqualität zu möglichst geringer Dateigröße an.

Welchen Unterschied macht Komprimierung?

Jedes Bild besteht aus ganz vielen linear nebeneinander liegenden Bildpunkten. Die Auflösung von Bildern wird im Web in Pixeln angegeben. Beträgt diese zum Beispiel 72 ppi, was manchen Monitoren entspricht, dann werden pro inch 72 einzelne Bildpunkte dargestellt. Die meisten Screens, wie z.B. Retina- und Smartphone-Displays, verfügen aber über eine bessere Auflösung (96dpi, 150dpi oder mehr). Daher solltest du dir Gedanken machen, für welche Ausgabegeräte du deine Bilder optimieren willst. Passe zuerst die Dimensionen deines Bildes oder deiner Grafik an und komprimiere sie nachher. Dabei wird die Qualität der Bilder gedrosselt. Ist die Qualität zu gering, erscheinen sie auf hochaufgelösten Screens unscharf und verpixelt. Ist die Qualität größer als für Web benötigt, verschlechtert sich die Ladezeit deiner Webseite.

Hier ein Beispiel, wie die Komprimierung des gleichen Bildes (600×400 Pixel) die Dateigröße beeinflusst:

Sehr scharfes Foto einer Blume zeigt garkeine Bildoptimierung

Ohne Komprimierung, 135KB (Bild von Jill Wellington / Pixabay.com)

Scharfes Foto einer Blume zeigt niedrige Bildoptimierung

Mit niedriger Komprimierung, 70KB

Unscharfes Foto einer Blume zeigt hohe Bildoptimierung

Mit hoher Komprimierung, aber auch nur 16KB

Praktische Tools für die Bildoptimierung und -Bearbeitung

  • 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. Wenn du dein Bild exportierst, kannst du den Grad der Komprimierung einstellen.
  • Affinty Photo – Das ist eine günstige Alternative zu Photoshop.
  • 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.
  • Wenn du nur schnell ein paar Bilder komprimieren willst, ohne Software und ohne Registrierung, eignet sich zum Beispiel auch dieses Online-Tool
Foto: Vogelperspektive. Verschiedene ausgerollte Maßbänder liegen kreuz und quer. Eines davon ist gelb, alle anderen weiß.

Bild von Bruno Glätsch / Pixabay.com

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. Die Bildgrößen orientieren sich an dem vorgesehen Platz auf der Webseite. Für Bilder im Fließtext eignet sich z.B. eine Seitenlänge von 300-500 Pixeln. Bilder die über die ganze Bildschirmbreite reichen, oder sich z.B. in einer Lightbox öffnen lassen, sollten 1000-2000 Pixel Seitenlänge haben. Eine geeignete Dateigröße für mittelgroße Bilder im Web wäre 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!

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!

Bildformat: Bei Fotos empfiehlt sich .jpg oder .png. Bei (bewegten) 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.

Bilder richtig benennen und SEO gleich mitdenken

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

Bild von William Iven / Pixabay.com

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 von der Blüte 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.

Bild von Pexels / Pixabay.com

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!

2 Antworten

  1. Markus Heidenrieder sagt:

    Die Beispiele mit den beiden Bildern sind Unsinn. Davon abgesehen, dass dpi (dots per inch) ein Wert aus dem Druckwesen ist und es bei Bildschirmen ppi (pixel per inch) heißen müsste, habt ihr wohl leider die Thematik nicht verstanden. Es ist völlig egal, welcher ppi-Wert im Bild eingestellt ist – es werden auf dem Monitor einfach nur die Pixel dargestellt. Der ppi-Wert hat keinerlei Einfluss auf die Dateigröße! Wenn eure beiden Bilder eine unterschiedliche Dateigröße haben, dann liegt das an der unterschiedlichen JPEG-Komprimierung. Bildschirme haben auch nicht pauschal 72 ppi, das ist ein uralter Mythos. Ein iMac mit Retina-Display kommt auf ca. 200 ppi, ein gutes Handy-Display auf noch deutlich höhere Werte.

  2. Stephanie Jedek sagt:

    Hallo Markus,
    Danke für deine Anregungen! Ich habe diese bereits in den Text einfließen lassen.
    Liebe Grüße,
    Stephi

Schreibe einen Kommentar

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