Das Auge isst mit – auch im Internet.
Webseiten profitieren von tollen Bildern. Egal ob selbst geschossen oder aus einer Bilddatenbank, Bilder wirken immer. Seiten mit ansprechender Optik besucht jeder gern. Sie laden zum Bleiben und Wiederkommen ein. Selbst ein eher trockenes Fachmagazin mit Business-Themen wie das Unternehmerhandbuch wirkt gleich viel lesenswerter durch ein paar gezielt ausgewählte Bilder.
Außerdem ist die Google-Bilder-Suche ein nicht zu unterschätzender Traffic-Faktor, aber das nur am Rande…
Damit die genutzten Bilder die eigene Seite auch wirklich positiv beeinflussen, gibt es, neben dem Motiv, ein paar wichtige technische Punkte, auf die man achten sollte.
Wie man Bilder fürs Internet optimiert in 3 einfachen Schritten – so geht‘s!
Inhalt
Fotografieren, Hochladen & Freuen?
Ich gehe jetzt mal davon aus, dass ihr das perfekte Motiv gefunden habt.
Schnell ein Foto machen und ein wenig nachbearbeiten – Programme für die Bildbearbeitung gibt es ja genug. Egal ob Photoshop oder fotor (inklusive toller Foto-App – übrigens das Lieblingsprogramm von nicmag.de) – für jede Kreativitäts- und Professionalitätsstufe ist ein passendes Programm auf dem Markt. Filter, Rahmen, Beschriftung – alles tipptopp.
Nur noch hochladen und freuen!
Wirklich? Oder doch noch ein paar mehr Handgriffe vornehmen, damit eure Bilder im Web wirklich gut performen? Da lässt sich nämlich noch so einiges optimieren:
- Ladezeiten: nicht jeder, der eure Bilder betrachtet sitzt an seinem Laptop im Büro und hat eine schnelle und leistungsstarke Datenleitung zur Verfügung. Je größer die Bilder sind, desto langsamer werden sie geladen. Und umso mehr Datenvolumen verbrauchen sie auch. Das ist nicht userfreundlich!
- Serverkapazität: je größer eure Bilder sind, desto mehr Platz benötigen sie auf dem Server. Das mag am Anfang kein Problem sein, aber spätestens beim ersten Serverumzug belastet die enorme Datenmenge gewaltig!
- Blinde Internetnutzer: Blinde & Bilder? Ja, ein ganz wichtiges Thema! Man kann im Internet so genannte Meta-Informationen zu jedem Bild hinterlegen. Diese werden dann von der Lesesoftware von blinden Internetnutzern ausgewertet und so kann sich auch der nicht-sehende Leser über eure Bilder freuen. (Mehr zum Thema hier: https://www.tagseoblog.de/google-ist-behindert-barrierefreiheit-mensch-maschine)
- Google: klar, auch an Google sollte man denken, wenn man Bilder einsetzt. Denn Google wertet jedes Detail eurer Seite aus. Auch die Bilder. Enthalten eure Bildangaben kaum Informationen, die die Maschine lesen kann, bringen sie keinen Zusatznutzen. Laden sie extrem langsam und vermindern so den PageSpeed eurer Seite, kann dies sogar zu einer Abwertung im Google Ranking führen.
Ihr seht, eine technische Optimierung eurer Bilder ist super sinnvoll!
Und da ich meiner Freundin Nicole von nicmag.de versprochen habe eine Anleitung zu schreiben, wie man Bilder für den Einsatz im Internet optimal überarbeitet, hier die drei wichtigsten Punkte:
1. Bildgröße minimieren
Als aller erstes sollte man sich fragen: wie groß muss das Bild wirklich sein, wenn es im Internet erscheint? Möchte ich es als bildschirmfüllenden Hintergrund einsetzen oder nur als minikleines Designelement? Jedes gesparte Pixel erzeugt kleinere Dateigrößen und somit bessere Ladezeiten.
Im Unternehmerhandbuch setzte ich beispielsweise in jedem Beitrag ein Titelbild ein. Die Spalte für den Text ist 840 Pixel breit. Daher verkleinere ich alle Titelbilder auf 840 px Breite – mehr ist ja eh nicht zu sehen.
Manche Bilder nutze ich auch nur im Text, da reicht oft die halbe Spaltenbreite oder gar noch weniger. Andere sind zum Download gedacht und können per Klick vergrößert werden. Bei jedem einzelnen Bild entscheide ich, wie es genutzt werden wird und wähle dann die kleinstmögliche Bildgröße.
Das Tool: Das Programm meiner Wahl ist dafür der „Microsoft Office Picture Manager“. Der ist bei meinem Office Paket dabei gewesen und super einfach zu bedienen. Einfach das gewünscht Bild öffnen, auf Bearbeiten klicken, Punkt „Größe ändern“ wählen, die Pixel eingeben – fertig.
2. Dateigröße komprimieren
Nach dem ersten Schritt ist die Bilddatei meist schon wesentlich kleiner als direkt nach dem Fotoshoot. Aber da geht noch mehr!
Schritt a: das richtige Dateiformat wählen
Zum Thema Dateiformate und ihr Einsatz im Internet gibt es viele viele Beiträge im Internet. Verlustfreie Komprimierung, Auflösung, Bildqualität etc. Alle Details wurden bereits besprochen und veröffentlicht. Leider sind die Informationen oft widersprüchlich.
Daher an dieser Stelle lediglich meine persönliche Erfahrung: Ich bevorzuge JPGs. Sie liefern in den meisten Fällen bei mir ein gutes Ergebnis bei möglichst geringer Dateigröße. Lediglich für Vorlagen und Grafiken nutze ich stellenweise PNGs, wenn ich z.B. eine Tabelle als Bild einsetzen möchte (Beispiel: https://das-unternehmerhandbuch.de/wp-content/uploads/2013/02/Kassenbuch-Tagesblatt.png, das sah als JPG ganz verschwommen aus).
Wer noch mehr zum Thema lesen möchte: https://www.netzmarginalien.de/bildformate
Als Faustregel gilt für mich:
- Fotos oder Bilder mit vielen Details: JPG
- Grafiken, die transparente oder viele einfarbige Flächen beinhalten: PNG
- Grafiken mit Animation (also z.B. durchlaufende Bilder): GIF
- TIFFs und BMPs besser nicht fürs Web verwenden.
Schritt b: die Bilddatei komprimieren
Ich habe jetzt also ein tolles Motiv, in der richtigen Größe und im richtigen Format. Mein letzter Schritt vorm Hochladen ins Netz: das Bild komprimieren.
Das Tool: Für das Komprimieren von JPGs nutze ich RIOT. Ein kleines kostenfreies Programm, das mein Ausgangsbild nahezu ohne Qualitätsverlust kleiner rechnet. Im Automatik-Modus werden alle Einstellungen zur Umrechnung von allein vorgenommen. Man kann sogar mehrere Bilder gleichzeitig verkleinern lassen. Super Easy! Aber Achtung: Immer das Ergebnis überprüfen. Manchmal wandelt das Programm ein Bild ungewollt in PNG um und es wird dadurch sehr pixelig. Nach meiner Erfahrung ist RIOT eigentlich nur zum Komprimieren von JPGs wirklich gut, bei PNGs kommt meist Murks heraus.
Für das Komprimieren von PNGs nutze ich meist den Online-Dienst TinyPNG. Nicht ganz so komfortabel, aber das Ergebnis zählt.
Mac-User können es mit ImageOptim versuchen, da kann ich aber leider keine Erfahrungen beisteuern, weil ich keinen Mac besitze.
3. Metainformationen optimieren
Die einfachste Möglichkeit, einem Bild hilfreiche Informationen mitzugeben ist der Dateiname!
IMG_05678.jpg – nun ja, aussagekräftig ist anders.
Besser: Thema, Fotografenname und ggfs. Name & Bild-ID-Nummer der Bilddatenbank im Dateinamen unterbringen. Dann hat man, d.h. Google und andere Maschinen, wenigsten schon mal eine Mini-Info, worum es auf dem Bild geht. Wichtig: beim Bildnamen keine Umlaute und keine Leerzeichen verwenden. Das führt im Netz oft zu Problemen.
Noch besser ist es, wenn man den sogenannten ALT-Tag, einen Titel und eine Beschreibung hinzufügt.
Das Tool: Je nach CMS-Software ist es unterschiedlich, wie man diese Metainformationen zu Bildern im Internet hinzufügen kann. Da muss man sich einfach mal reinfuchsen.
Und ja, JETZT dürft ihr eure wunderschönen Bilder endlich wirklich ins Netz hochladen :-)
Mit diesen 3 Tipps sollte der optimalen Nutzung von Bildern im Internet eigentlich nichts mehr im Weg stehen!
Zusatztipps!
Zwei Tipps habe ich noch für euch:
Der goldene Schnitt
Schon mal gehört? Dabei geht es um das Teilungsverhältnis von z.B. Seitenlängen eines Rechtecks zueinander. Auch beim Bildmotivaufbau kann der goldene Schnitt helfen. Mehr Infos bei Wikipedia oder hier: https://foto-kunst-kultur.de/der-goldene-schnitt/.
Ich benutze den goldenen Schnitt, um z.B. Bildhöhen zu berechnen, da ich die Bildbreite meist kenne. Für meine Titelbilder heißt das: da sie 840 px breit sind, dürfen sie maximal 519 px hoch sein. Dann sieht das im Gesamtbild am schönsten aus (finde ich).
Wie man den goldenen Schnitt berechnet steht hier: http://lemats.net/tech/tools/goldener-schnitt-berechnen/.
Bildformate in WordPress
Meine Blogs laufen alle auf WordPress. Das ist eine freie CMS-Software, die leicht zu bedienen ist. Die Mediathek ist übersichtlich gestaltet und bietet einige Features, um Bilder im Web optimal einsetzen zu können.
In WordPress lassen sich z.B. Standard-Bildformate festlegen, für kleine mittlere und große Bilder. Das geht im Bereich „Einstellungen / Medien“. Lädt man nun ein Bild in die WordPress-Mediathek hoch, legt WordPress automatisch die entsprechenden kleineren Bildformate an. Man sollte sich also genau überlegen, welche Formate man in seinem Blog nutzen möchte und dann die Voreinstellungen automatisch anpassen. Super, wenn man dann mal eine kleinere Variante eines Bildes benötigt.
Lädt man dann die Bilder zu einem Beitrag hoch, werden sie in der Mediathek automatisch mit diesem verknüpft. Toll, wenn man mal etwas nachgucken oder ein Bild erneuern möchte.
Beim Upload kann man dann auch die Metainformationen einfügen, die Google so sehr liebt :-)
Zusätzlich nutze ich noch das PlugIn Optimus, das beim Upload der Bilder eine finale Dateigrößen-Optimierung durchführt.
Mein Fazit
Mit ein paar zusätzlichen Handgriffen ist es leicht für das Web optimierte Versionen seiner Bilder zu erstellen. Dateigröße minimieren und sinnvolle Metainformationen hinterlegen und das alles mit kostenfreien Tools.
Eure Leser und Google werden es euch sicherlich danken!
Alle Beiträge rund ums Bloggen findet ihr übrigens hier:
Rund ums Bloggen von A-Z
[…] Bilder fürs Internet optimieren in 3 einfachen Schritten! […]
Vielen Dank für die super Tipps! Ich bin auch bei WordPress, verwende überwiegend JPEG´s aber auch 5 PNG´s. hierfür hat mir etwas zum komprimieren gefehlt. Mit dem Programm ging es super!
Wunderbar, das freut mich sehr :-)
Danke für die Info. Meine Fotos rechne ich auf 680px Breite runter. Aber ich habe keins davon nochmal komprimiert.
Mein Blog läuft auch auf WP. Gibt es einen Trick, die ich die Bilder in der Mediathek noch komprimieren kann oder muß ich jedes Bild einzeln neu hochladen und die alten aus der Datenbank löschen?
Danke schon mal vorab. LG!
Hallöchen,
man kann sich die Bilder direkt vom FTP-Server runter laden, komprimieren und dann wieder hochladen.
Dann werden alle vorhandenen Bilder einfach überschrieben & man muss nicht mit WordPress jedes einzelne neu hochladen und neu einbinden.
So merkt WordPress das in seiner Mediathek nicht und man muss nicht jeden Artikel einzeln neu bebildern.
ACHTUNG: ganz genau gucken, dass die Dateinamen gleich bleiben, sonst klappt es nicht!
LG
Heike
Hallo Heike,
kann mich dem Kommentar von Johanna nur anschließen. Du hast ja nichts vergessen, was bei Bildern wichtig ist, und sehr gute Tipps gegeben.
Viele Grüße
Claudia
Danke Claudia!
4 Jahre Erfahrung zahlen sich aus :-)
Viele Grüße
Heike
Whow, das ist doch mal fundierte Info. Knapp und präzise und mit weiterführenden Links, für die Bereiche, die man vertiefen will. Klasse gemacht und richtig hilfreich. Werde ich jetzt gleich mal teilen. Herzlichen Dank für diesen Artikel.
Schöne Grüße,
Johanna
Danke schön :-) Das freut mich richtig, wenn es jemand hilft!