Bilder bearbeiten mit der kostenlosen und freien Software “Gimp”

Ein wichtiger Bereich der Suchmaschinenoptimierung (SEO) sind die Ladezeiten deiner Website und diese hängen u. a. mit der Größe deiner Bilddateien zusammen. In der Regel hast du keine professionelle Bildbearbeitungssoftware wie Photoshop bei dir installiert, denn diese ist kostenpflichtig und auch meistens überdimensioniert, wenn es nur darum geht, Fotos zu beschneiden und sie für deine Website zu optimieren.

Um aber eine gute Bildgröße zu generieren, die auch die Ladezeiten deiner Website nicht strapaziert, brauchst du eine Software die das kann. Ich zeige dir in diesem Tutorial wie du das mit “Gimp” umsetzen kannst. “Gimp” gibt es für Linux, Windows und MacOsX und ist komplett frei und kostenlos. Leider ist dieses Programm nicht intuitiv bedienbar, deshalb hier die wichtigsten Schritte für dich zusammengefasst und bebildert.

Was genau die richtige Bildgröße für deine Website ist, kann ich dir pauschal leider nicht beantworten, denn das hängt ganz stark von deiner Website Struktur ab und bei welcher Displaygröße aus z.B. einem 3-spaltigen Layout ein 1-spaltiges wird bzw. wo die Umbrüche stattfinden. Das musst du im Einzelfall klären und recherchieren. Helfen können dir dabei die Entwicklertools im Google Chrome Browser.

Ein Beispiel:
Meine Website “mueller-macht-web.de” ist in WordPress programmiert und als Designtemplate bzw. Theme verwende ich “Divi” von Elegantthemes. Hier weiß ich, dass bei 980px bei vielen Spalteneinstellungen ein Umbruch stattfindet und es 1-spaltig wird. Das bedeutet für mich, dass meine Bilder, die in meiner Desktop Version 3-spaltig angelegt sind, eine Breite von 980px haben müssen, auch wenn sie im 3-spaltigen Layout nur mit 400px dargestellt werden.
 

Nun geht es los!

1. Installiere dir das Programm auf deinem Rechner und öffne es: https://www.gimp.org/

2. Gehe auf “Datei > öffnen” und öffne das Bild, das du bearbeiten möchtest.
 
Gimp - Datei öffnen

3. In diesem Beispiel möchtest du dein Bild so beschneiden, dass es über die volle Breite deiner Seite geht und ungefähr ein Seitenverhältnis von 2:1 hat. Dazu drückst du das von mir markierte Symbol und ziehst im Bild einen Rahmen. Danach drückst du die Enter-Taste, um deine Auswahl zu bestätigen.
 
Gimp - Bild beschneiden

4. Gehe nun zu “Bild > Bild skalieren”
 

 
Ich habe gute Erfahrungen mit einer Bildbreite von 1200px gemacht. Auch bei hochauflösenden Displays hast du hier noch eine angemessene Qualität, natürlich hängt das auch immer von der Qualität des Fotos ab. Die Auflösung des Bildes solltest du derzeit auf 150 dpi einstellen.
 
DPI: Das bedeutet die Anzahl der Pixel pro inch. Je höher die DPI Zahl desto feiner das Bild, allerdings wächst die Bildgröße damit erheblich. 150dpi ist eine mittlere Auflösung, die derzeit gut funktioniert (aber im Zeitalter von 5k Bildschirmen schon bald zu wenig sein kann) und auch auf Retina Displays, wie dem iPhone oder iMac noch gut aussieht. Eigentlich bräuchte man für eine optimale Darstellung 230dpi, denn das ist das was z. B. ein iMac darstellen kann, aber dann hätte man eine sehr viel größere Datei und Google hätte uns nicht lieb 😉
 
Beachte: eine Verdopplung von 100dpi auf 200dpi bedeutet die 4-fache Dateigröße
 

 
Drücke auf “Skalieren”

5. Gehe zu “Datei > Exportieren als” und gib dem Bild einen neuen Namen und klicke dann auf “Exportieren”
 

6. Aktiviere das Kästchen “Vorschau im Bildfenster anzeigen”, denn nur dann wird dir die Dateigröße angezeigt. Eine Qualität von 30 ist bei diesem Bild eine gute und ausreichende Einstellung. Damit erreiche ich eine Dateigröße von 70,7 KB (KiloByte) mit der ich sehr zufrieden bin. Ideal wäre alles unter 50 KB, aber bei einem Headerbild gehe ich schon mal bis 100 KB, denn das ist ja in der Regel mein Eyecatcher und geht über die ganze Breite.
 

 
Jetzt drücke auf “Exportieren” und dein Bild ist fertig.

7. Das ist nun dein fertiges Ergebnis 🙂
 

 
Möchtest du nun noch das Äußerste aus deiner Bildgröße rausholen, kannst du auf folgende Seite gehen https://tinypng.com/ und dort deine Datei per Drag and Drop reinziehen. Jetzt komprimiert Tinypng dein Bild noch einmal und du sparst eventuell ein paar weitere KiloByte. In meinem Fall ist die Datei um 7 KB leichter geworden. Du kannst sie über den “download” Link auf deinen Rechner speichern.

 

 

Fazit

Du siehst, das mit den Bildgrößen ist eine Wissenschaft für sich. Du solltest deine Websitestruktur und wenn du mit WordPress arbeitest dein Theme gut kennen. Denn du benötigst Informationen wo genau Umbrüche stattfinden, um so deine Bilder optimal anpassen zu können. Hast du noch Fragen? Dann melde dich gern. Auch freue ich mich über Kommentare und Anregungen. Was fehlt dir noch zu diesem Thema?

Nun wünsche ich dir viel Spaß und gern kannst du diesen Beitrag teilen!

Du möchtest gern wissen was man bei einer guten Website alles beachten muss?

Dann melde dich einfach zu meinen Tipps und Tools an. Du erhältst von mir meinen 30-minütigen Vortrag mit dem Thema "Die Geheimnisse einer guten Website" und regelmäßig tolle kostenlose Tipps und spezielle Angebote.

* Pflichtfeld

Du hast dich erfolgreich eingetragen! Schau bitte in dein Postfach.