Heute geht es um Bilder und wie man diese Bilder erstmal fürs Netz eigentlich optimieren
kann.
Und im Anschluss zeige ich in einem zweiten kleinen Minitipp, wie man die Bilder dann
zum Beispiel als runde Kontaktkarten hier darstellt.
Das heißt, das Ziel vom heutigen Tipp der Woche ist es, dass man am Ende eine Übersichtseite
mit solchen Kontakten erhält.
Wieso ist dieser Tipp der Woche jetzt in zwei Videos aufgeteilt?
Das liegt einfach daran, dass sie dann den ersten Teil schnell überspringen können und
direkt zum Beispiel mit der Erstellung der Kontaktkarten entsteigen.
Für alle, die jetzt noch nicht wissen, wie man Bilder optimieren kann und zuschneiden
kann, für die gibt es jetzt in diesem ersten Teil eine kleine Einführung.
Wie funktioniert das jetzt mit dem Bildzuschneiden?
Dafür braucht man natürlich eine Software.
Ich verwende dafür gerne Photoshop, aber es geht auch sehr gut mit der gratis Software
GIMP.
Wenn Sie also noch keine Software für Bildbearbeitung haben, dann holen Sie sich einfach die gratis
Software GIMP und zwar unter gimp.org und im Anschluss müssen Sie einfach auf Download
klicken und für Ihr Betriebssystem dann den entsprechenden Download Link anklicken.
Bei Windows wäre das zum Beispiel dieser Link Download GIMP directly oder falls man
den Microsoft Store verwendet, kann man das auch über den Microsoft Store herunterladen.
Das dauert etwas, da die Download Server hier etwas langsamer sind, aber im Anschluss,
nachdem Sie sich einen Kaffee geholt haben, sind Sie dann auch bereit weiter mit dem Video
mitzumachen, Ihre eigenen Bilder zuzuschneiden.
Nachdem Sie also GIMP installiert haben, öffnen Sie das Programm, also nach der Installation
öffnen Sie einfach GIMP und es öffnet sich dann diese Oberfläche.
Die sieht bei Ihnen vielleicht etwas anders aus.
Manchmal ist hier die Seitenleiste etwas schmal geraten bei Windows, dann können Sie hier
einfach zwischen diese zwei Reiter klicken und das etwas breiter ziehen.
Das heißt, hier haben Sie natürlich die Möglichkeit, das etwas anzupassen und ansonsten
steigen wir direkt ein.
Das heißt, ich öffne erstmal meinen Datei Explorer und suche mir meine Bilder, die ich
für den heutigen Tipp der Woche verwenden möchte.
Bei mir sind das vier Bilder von verschiedenen Personen und wenn ich mir diese Bilder einmal
anschaue, dann sehe ich, dass diese Bilder nicht perfekt ausgerichtet sind oder sich
jetzt vielleicht nicht für einen Kontakt perfekt eignen, da die Person eben nicht im
Mittelpunkt steht.
Das heißt, hier hat man viel Raum oben, wo man dann eben hier nochmal keinen Kontakt
sieht.
Wenn man sich das vorstellt, wenn das die Mitte nimmt, dann ist das vielleicht nicht
so optimal.
Das heißt, wenn auf der Webseite die Mitte des Bildes ausgewählt wird, dann sieht man
hier vielleicht nur den Kopf, aber man sieht den Rest eigentlich nicht, der vielleicht
mit auf eine Kontaktkarte draufgehört.
Auch hier, hier ist das Bild jetzt so geschossen worden, dass hier links eben viel Raum entsteht,
den man vielleicht auch nicht braucht, vor allem nicht für ein rundes Bild und ich zeige
jetzt einfach, wie man das lösen kann.
In einem ersten Schritt wähle ich die Bilder, die ich bearbeiten möchte aus und ziehe
sie dann einfach in das GIMP Fenster.
GIMP fragt Sie dann vielleicht, ob Sie den Farbraum umwandeln möchten, klicken Sie da
einfach auf umwandeln.
Sie können auch einen Haken setzen bei immer umwandeln.
Das heißt, es wird dann einfach die vorhandenen Werte der Kamera etwas anpassen auf den Farbraum
des Computers, auf RGB oder sRGB und dann sind Sie auch schon bereit, hier das Bild
passend zuzuschneiden.
Bei GIMP gibt es hierfür ein extra Werkzeug, das heißt auch zuschneiden und das sieht
man hier oben in der Werkzeugleiste.
Das ist so ein kleiner Beschnittrahmen, den man hier auswählen kann, das heißt das Icon
zeigt schon, dass es sich um ein Beschnittrahmen handelt und dass man hier Bereiche vom Bild
oder von Ebenen entfernen kann, wie es die Beschreibung schon sagt.
Wenn ich jetzt darauf klicke, dann wähle ich das Werkzeug aus und habe hier unten weitere
Möglichkeiten.
Das heißt, ich sehe jetzt hier zuschneiden.
Falls ich das nicht sehe, muss man vielleicht erst draufklicken und man sieht dann hier
verschiedene Möglichkeiten, die ich jetzt für dieses Bild auswählen kann.
In meinem Beispiel mache ich einen Haken oder einen Kreuz neben fixiert und suche mir dann
ein Seitenverhältnis aus.
Das heißt, wenn Sie jetzt gerade ein Bild für einen Kontakt benötigen, der vielleicht
3 zu 2 ist oder 2 zu 2 oder oft hört man auch für Beitragsbilder, dass diese zum Beispiel
das Format 3 zu 2 verwenden, dann würden Sie jetzt hier einfach 3 doppelt Punkt 2,
also ein Verhältnis von 3 zu 2 eingeben.
In meinem Beispiel möchte ich heute runde Kontaktkarten erstellen, deshalb werde ich
die Bilder einfach quadratisch zuschneiden.
Sie können aber auch natürlich weiter mit einem 3 zu 2 Bild arbeiten.
Das heißt, das Bild wird trotzdem relativ gut mittig positionieren.
Das heißt, wenn Sie jetzt diesen Kontakt an verschiedenen Stellen verwenden, einmal
im runden Format und einmal im 2 zu 3 Format, dann macht es natürlich Sinn, dass Sie das
Bild nicht quadratisch zuschneiden, sondern auf das 2 zu 3 Format.
Also, nochmal um es zu vereinfachen, wenn Sie jetzt hier dieses Bild, ich zeige das
jetzt einfach mal, wenn Sie das Bild auf 2 zu 3 hier zuschneiden, also ich mache das
einfach mal, dann erhalten Sie so ein Bild, das in etwa so ausschaut später.
Es ist jetzt kein Problem für WordPress, das auch in einem runden Format zu verwenden,
weil es dann halt einfach ein mittiges Format, also die mittige Position des Bildes wählen
wird.
Wenn das Bild etwas weiter hoch ist, dann wird das trotzdem relativ gut ausschauen
im Netz.
Das heißt, wenn Sie das Bild in verschiedenen Formaten, verschiedenen Orten und verschiedenen
Größen verwenden möchten, dann bleiben Sie bei einem Format, das Sinn macht, zum Beispiel
2 zu 3 oder 2 zu 3,5 etc.
In meinem Beispiel heute weiß ich, dass ich diese Bilder nur für meine Seite mit diesen
runden Bildchen benötige und der Kontakt an sonst keiner anderen Stelle erscheint.
Deshalb wähle ich jetzt hier links ein Seitenverhältnis von 1 zu 1 aus und klicke auf die bestätigen
Taste, also durch Enter und jetzt kann ich hier im Bild einfach meine Auswahl ziehen,
das heißt, ich klicke einfach und ziehe, bis mir das Bild in der gewünschten Größe
dargestellt wird.
Ich nehme hier so viel Raum mit, wie ich mitnehmen kann, das heißt, ich nutze die komplette
Bildfläche aus.
Manchmal hat man ja Bilder, die vielleicht etwas kleiner sind, dann macht das natürlich
Sinn, dass man auch wirklich den komplett verfügbaren Raum hier verwendet.
Und sobald ich damit zufrieden bin, bestätige ich den Zuschnitt durch die Enter-Taste.
Falls Sie sich jetzt verschnitten haben oder vielleicht gerade nicht ganz zufrieden sind
mit Ihrer Auswahl, dann können Sie immer noch mit Command-Z oder Steuerung-Z einfach
zum vorherigen Ergebnis zurückwechseln und dann eine neue Auswahl ziehen, das heißt,
dann können Sie erneut den Schnittrahmen setzen und das Ganze in Position bringen,
bis Sie damit zufrieden sind.
Das ist erstmal das generelle Prinzip bei diesem Zuschnitt.
Und nachdem Sie das Ganze zugeschnitten haben, kommt man zum nächsten wichtigen Schritt,
dem Optimieren fürs Netz.
Vielleicht haben Sie das schon gesehen, dass diese Bilder unterschiedliche Dateigrößen
besitzen.
Man sieht das ja zum Beispiel im Datei Explorer, dass dieser auch die Bildgröße anzeigen kann
und hier sieht man dann, dass 1,2 MB eben sehr groß wäre zum Beispiel für ein Bild
im Netz.
Dieses Bild dagegen ist schon relativ klein mit 217 KB, kann man also gerne auch so verwenden,
sage ich mal.
Wie funktioniert das jetzt mit dem Optimieren des Bildes?
Hierfür klicke ich auf Datei und im Anschluss auf Exportieren nach.
Es öffnet sich jetzt die Ansicht vom Datei Explorer hier in GIMP und ich habe hier die
Möglichkeit entweder einen vorhandenen Ordner auszuwählen oder hier oben rechts auf Ordner
Anlegen zu klicken.
Das heißt, ich wähle erstmal bei mir einen Ordner an und jetzt kann ich den Dateinamen
etwas anpassen.
Ich muss aufpassen, dass ich nur den Namen vor dem Punkt natürlich verändere, also
zum Beispiel hier der Name des Fotografen und dann nähe ich das einfach mal Kontakt,
Beispiel A.
Im Anschluss klicke ich auf Exportieren und es öffnet sich jetzt ein Exportfenster.
Hier kann ich ein Kreuz bei Vorschau im Bildfenster Anzeigen setzen und daraufhin sehe ich die
Dateigröße des Bildes.
Jetzt kann ich anhand des Sliders hier die Qualität etwas verändern, etwas runterschrauben,
falls ich das möchte, da es sich nur um ein kleines Kontaktbild handelt, kann ich hier
schon mal, da es eben vorher ein sehr großes Bild war, um die Qualität auf 50 runterschrauben
zum Beispiel.
Im Anschluss klicke ich auf Exportieren und das Bild wird an den entsprechenden Ort gespeichert.
Das heißt, in meinem Ordner finde ich jetzt das Bild, was ich erstellt habe und ich sehe,
dass es eben in meinem 1 zu 1 Format in einer kleineren Dateigröße eben abgespeichert
wurde.
Ich wiederhole das jetzt auch mal bei den anderen Bildern.
Auch hier wähle ich wieder den Beschnittrahmen aus, also hier oben und im Anschluss klicke
ich auf Seitenverhältnis 1 zu 1 und wähle einfach wieder meinen Kontakt aus, das heißt,
ich schneide mir den hier zu, bestätige das Ganze mit der Enter-Taste und ich sehe, das
Bild ist perfekt zugeschnitten.
Wenn ich jetzt sage, ja gut, ich möchte vielleicht noch etwas in das Bild hineinzoomen, dann
wähle ich eben einen Bereich aus, der vielleicht weiter innen liegt und bestätige wieder durch
die Enter-Taste.
Man muss natürlich immer auch ein bisschen ein Gleichgewicht finden, wenn man jetzt ein
Bild hat, wo eigentlich die Landschaft fotografiert wurde und die Person ist sehr klein, dann
muss man schauen, ob das dann am Ende auch scharf genug ist, also dass es nicht unscharf
auf der Webseite vielleicht wirkt, weil man nicht so viele Pixel zur Verfügung hat, weil
das Bild nicht so groß war am Anfang.
Auch hier klicke ich wieder auf Datei, exportieren nach, ich wähle mir meinen Ordner aus, kann
den Namen wieder umändern, das heißt, hier nenne ich das den Namen des Fotografen, der
Fotografin und dann Kontaktbild 2 oder Kontaktbild B und dann speicher ich das wieder ab, exportieren,
es öffnet sich wieder das Fenster und ich habe hier die Möglichkeit, die Dateigröße
etwas herunterzuschrauben, zum Beispiel auf die Qualität 60.
Ich kann auch die Standardwerte speichern, das heißt, hier gibt es diesen Button, Standardwerte
speichern und wenn ich jetzt auf exportieren klicke, wird mir das Bild wieder in meinem
Ordner abgelegt.
Das heißt, wenn ich mir das anschaue, sehe ich hier das Bild im 1 zu 1 Format.
Das wiederhole ich auch mit dem nächsten Bild, ich gehe also wieder auf den Beschnittrahmen,
wähle ein Seitenverhältnis von 1 zu 1, falls ich das noch nicht gemacht habe und wähle
dann einen Ausschnitt, den ich für die Kontaktkarte verwenden möchte.
Sobald ich zufrieden bin, kann ich mit der Enter-Taste bestätigen und über Datei exportieren
nach ein Ordner auswählen, wo das ganze hin gespeichert werden soll.
Auch hier werde ich wieder den Namen etwas anpassen, zum Beispiel Kontaktbild C.
Bei der Dateigröße kann ich jetzt auf Standardwerte laden klicken, um meine Werte von letztem
Mal eben wieder zu laden und ich erhalte dann eine Dateigröße von 235 KB.
Meine Devise ist immer alles unter 350 KB ist in Ordnung, je kleiner, desto besser, solange
die Qualität nicht darunter leidet.
Also, Sie sollten jetzt nicht 10 KB Bilder hochladen, wenn diese total unscharf wirken,
wissen Sie.
Also, es ist dann besser, dass die Dateigröße schon etwas größer ist, aber das Bild dafür
deutlich schärfer und hochqualitativer.
Ich klicke also wieder auf exportieren und das Bild wurde gespeichert.
Das heißt, Sie haben gesehen, es ist ganz leicht, Bilder ins passende Format zuzuschneiden
und das ohne eine teure Software, den man sich erst kaufen muss.
Das funktioniert auch einfach mit der gratissoftware GIMP und zwar ziemlich flott.
Das war also der erste Teil für diesen Tipp der Woche, eigentlich schon ein Tipp der Woche
wüssig.
Im nächsten Schritt sehen Sie oder lernen Sie, wie Sie diese Bilder nutzen können, um
Ihre eigenen kleinen runden Kontaktkarten auf einer Inhaltsseite darzustellen.