Aktualisiert am 10. März 2021
  • Sven 

Bildbearbeitung – 8 unglaublich wichtige Tipps und Tricks

Bildbearbeitung in 2021

Jetzt den Beitrag teilen!

Wenn du eine Website oder einen Blog erstellen willst oder erstellt hast, wirst du um schöne Bilder nicht herumkommen.

Sie haben visuelle Anziehungskraft, lockern deinen Text auf und sind auch für die Suchmaschinen-Optimierung sinnvoll.

Da Bilder aber alles andere als vorteilhaft für die Ladegeschwindigkeit deines Blogs sind, gibt es einiges zu beachten. Damit aus dem Vorteil einer ansprechenden Website kein Nachteil einer langsamen Ladezeit wird.

Worauf du bei der Wahl deiner Bilder und ihrer Bearbeitung achten musst, erfährst du hier.

Inhaltsverzeichnis

Was ist Bildbearbeitung?

Unter Bildbearbeitung kann man viel verstehen. Vor allem geht es aber, um die Optimierung von Größe und Aussehen. Zudem müssen Bilder für Soziale Medien bearbeitet und optimiert werden.

Es geht hier um:

  •  Das richtige Bilddateiformat (PNG, JPG, GIF)
  • Das Bild muss komprimiert werden
  • Die richtige Bildgröße und Auflösung (Bild zuschneiden)
  • Eventuell das Bild schärfen
  • Einen Namen geben (ohne Leerzeichen, Umlaute oder Sonderzeichen)

Bildgröße und Auflösung werden oft für dasselbe gehalten, sind es aber nicht.

Die Bildgröße wird durch ihre Pixel beeinflusst. Je mehr Pixel, desto größer das Bild. Je mehr Pixel pro definierte Länge, desto höher die Auflösung.

Die Auflösung wird entweder in dpi (dots per inch) oder ppi (pixel per inch) angegeben. 1 inch entspricht dabei 2,54 cm.

Warum du deine Bilder bearbeiten musst

Hauptgrund für die Bildoptimierung ist die Verbesserung der Ladezeit deiner Website.

Inzwischen ist eine schnelle Ladezeit auch ein Ranking Faktor für Google! Wer also eine schnelle Ladezeit seiner Website hat, rankt eher auf den vorderen Plätzen.

Jedes Bild, dass du für deinen Blog oder Social Media Post einsetzt, muss optimiert sein! Die Größe sollte den Anforderungen angepasst werden.

Jede Social Media Plattform hat ihre eigenen optimalen Bildgrössen.

Im folgenden Abschnitt erfährst du wie groß dein Bild am besten sein sollte.

Bildgröße - Wie groß muss/darf dein Bild sein?

Bildbearbeitung ist elementar für Website, Blog und Social Media. Lerne wie du das machst und auf was du dabei achten musst. Außerdem bekommst du Anregungen, Tipps und Tricks rund um die Bearbeitung deiner Bilder. Erfahre was der richtige Name, Alt-Tag, Beschriftung und Beschreibung, ist und wofür du diese unbedingt brauchst. Plattformen für kostenlose Bilder und deren Bearbeitung und vieles mehr gibt es in diesem Artikel.

Dein Blog lebt durch Bilder.

Um deinen Lesern ein angenehmes Leseerlebnis zu schaffen, musst du alles für eine schnelle Ladezeit machen. Ein guter Ansatz ist die Größe deiner Bilder auf deren Verwendungszweck anzupassen.

In den folgenden Absätzen erfährst du unter anderem, wie du die Dateigröße deiner Bilder so groß wie nötig, aber gleichzeitig so klein wie möglich machst.

Bilder verkleinern

Deine Bilder zu verkleinern ist ein Muss für deine Website.

Die normalen Kameras oder auch Handys, haben eine viel zu hohe Auflösung und Größe. Sie sind damit zu umfangreich. Je kleiner diene Bilder sind, desto geringer fällt auch deren Ladezeit aus.

Kein Bild sollte größer sein als es muss. Wer riesige Bilder auf seiner Website einfügt, der straft sich gleich doppelt.

Erstens braucht das Bild, aufgrund seiner Dateigröße, viel Zeit zum Laden. Es braucht aber sogar noch mehr Zeit. Denn das (zu große) Bild muss noch klein gerechnet werden, um angezeigt werden zu können.

Wer das Bild direkt richtig einstellt, es also auf das benötigte Maß zuschneidet, der spart erheblich Ladezeit.

Erstens durch die geringere Größe der Bilddatei und zudem muss der Computer das Bild zum Anzeigen nicht noch umrechnen.

Kein Bild auf deinem Blog sollte über 1920×1280 Pixel betragen. Selbst dieses Maß ist nur für Vollflächiges Anzeigen gedacht und sollte mit bedacht gewählt werden.

Du kannst das Feld, in dem das Bild ist, händisch in WordPress zusammenschieben. Wenn das Feld zu klein wird, wird auch das Bild darin verkleinert. Das sollte nicht passieren.

Wenn du mit einem kleineren Bild hinkommst. Schneide es kleiner. Oder du machst das Feld wieder größer um das Bild in voller Größe anzeigen zu lassen.

Tools für das zuschneiden deiner Bilder gibt es weiter unten. Genauso wie die empfohlenen Größen.

Bilder komprimieren

Alle Bilder deines Blogs müssen zwingend komprimiert werden.

Entweder du machst das von Hand z.B. mit Tiny PNG, bevor du die Bilder hochlädst oder du nutzt ein Plugin wie Compress JPEG & PNG Images dafür. Das übrigens auch von Tiny PNG ist, aber nicht nur für PNG-Dateien verwendet werden kann.

Ideale Bildgrösse bei Social Media

Die idealen Bildgrößen werden durch die einzelnen Social Media Kanäle immer wieder mal angepasst. Daher sind sie nur als Anhaltspunkt zu verstehen und sollten an die individuellen Wünsche angepasst werden.

Hier heißt es einen guten Kompromiss, zwischen Dateigröße und Bildqualität, zu finden.

Facebook

  • Profilbild 180×180 Pixel (Besser etwas größer, damit es nicht unscharf wird.)
  • Titelbild 820×312 Pixel (640×360 Pixel für Handy)
  • Veranstaltung 500×262 Pixel
  • Chronik 1200×628 Pixel

Twitter

  • Logo 400×400 Pixel
  • Header 1500×500 Pixel
  • Stream 1024×512 Pixel

Instagram

  • Profilbild 110×110 Pixel (Besser etwas größer, damit es nicht unscharf wird.)
  • Feed 1080×1080 Pixel
  • Story 1080×1920 Pixel

Pinterest

  • Profilbild 600×600 Pixel (160×160 Pixel werden Angezeigt)
  • Pin 1000×1500 Pixel (wichtig ist das Verhältnis 2:3)

Ideale Bildgrösse auf deiner Website

Dein Vorhaben und Design entscheiden was die ideale Bildgröße für deinen Blog ist.

Hier sind Anhaltspunkte mit denen du experimentieren kannst. Meistens sollten diese Größen gut passen.

Das Beitragsbild deines Blogbeitrags richtet sich nach den vorgaben deines Themes. Bei mir ist es aktuell 930×620 Pixel.

  • Maximal sind 1920×1280 Pixel für flächendeckende Bilder zu empfehlen.
  • Für Galerie-Bilder ohne Möglichkeit der Vergrößerung, bietet sich einen Bildbreite von 500 Pixel an.
  • Für Galerie-Bilder mit Möglichkeit der Vergrößerung verdoppelt sich die Breite der Bilder auf ca. 1000 Pixel.
  • Für kleine im Text eingebettete Bilder ist eine Bildbreite von 300 Pixel zu empfehlen.

Das richtige Format für dein Bild

Bildbearbeitung ist elementar für Website, Blog und Social Media. Lerne wie du das machst und auf was du dabei achten musst. Außerdem bekommst du Anregungen, Tipps und Tricks rund um die Bearbeitung deiner Bilder. Erfahre was der richtige Name, Alt-Tag, Beschriftung und Beschreibung, ist und wofür du diese unbedingt brauchst. Plattformen für kostenlose Bilder und deren Bearbeitung und vieles mehr gibt es in diesem Artikel.

Es gibt viele verschiedene Bildformate. Für die Bilder auf deinem Blog, kommen aber nur drei infrage. Eigentlich sogar nur zwei, nämlich PNG und JPG.

Ausnahme bildet hier noch die Vektorgrafik. Die Vor- und Nachteile erfährst du jetzt.

PNG

Portable Network Graphic

Dieses Format wird hauptsächlich für Schriften, Logos, Icons und Grafiken mit transparentem Hintergrund verwendet.

PNGs können verlustfrei komprimiert werden, verlieren aber im Gegenzug an Farbspektrum (Farbvielfalt). Was ja aber bei Schriften, Icons und Logos (mit wenigen Farben) kein großes Problem darstellt.

PNG Bilder sind sehr hochwertig. Daher benutze ich sie mit Vorliebe für Pinbilder, die bei Pinterest gemerkt werden können.

JPG/JPEG

Joint Photographic Experts Group

Wird in Digitalkameras, beim Versand von E-Mails und Druckdateien verwendet.

JPG ist das am häufigsten vorkommende Bildformat im Internet. Grund dafür sind das extrem große Farbspektrum von 16,7 Millionen Farben und gute Komprimierung bei geringem Qualitätsverlust.

Dieses Format, haben wahrscheinlich die meisten deiner Bilder auf dem Blog.

GIF

Graphics Interchange Format

GIFs haben ein Farbspektrum von nur 256 Farben und werden daher meist nur für Schwarz-Weis Grafiken verwendet.

Besonders ist die Fähigkeit der Darstellung von bewegten Bildern (Animationen). Diese können sich in endlos Schleifen wiederholen.

Transparenter Hintergrund ist auch hiermit möglich.

SVG

Scalable Vector Graphics

Vektorgrafiken sind ideal für Grafiken wie Icons und Logos. Eine SVG-Datei kann ohne Verlust der Qualität auf alle Größen skaliert werden.

Zudem ist die Dateigröße sehr klein, was gut für die Ladezeit deiner Website ist.

Die besten Tools für die Bildbearbeitung

Bildbearbeitung ist elementar für Website, Blog und Social Media. Lerne wie du das machst und auf was du dabei achten musst. Außerdem bekommst du Anregungen, Tipps und Tricks rund um die Bearbeitung deiner Bilder. Erfahre was der richtige Name, Alt-Tag, Beschriftung und Beschreibung, ist und wofür du diese unbedingt brauchst. Plattformen für kostenlose Bilder und deren Bearbeitung und vieles mehr gibt es in diesem Artikel.

Für die Bildbearbeitung sind die richtigen Tools unerlässlich. Zum Glück bietet der Markt eine Vielzahl an Möglichkeiten. 

Egal ob du die Bildbearbeitung gern an einem Desktop PC, am Handy oder was auch immer, machst.

Viele dieser Tools verwende ich selbst und habe damit sehr gute Erfahrungen gemacht.

Canva

Canva ist mein bevorzugtes Tool, wenn es um die Gestaltung meiner Bilder für Websites und Social Media geht. 

Es ist super um Bilder oder Grafiken zu Designen. Egal ob am PC oder als App auf deinem Handy. 

Dieses Programm bietet auch in der kostenlosen Variante eine große Auswahl an Vorlagen. Zudem gibt es tolle Möglichkeiten wie Video- oder Karussell Pins für z.B. Pinterest.

Die Dateigrößen sind trotz hochwertiger Qualität und auch ohne Komprimierung schon klein. 

Was ein Riesenvorteil ist. 

Eine Komprimierung solltest du dir dennoch nicht sparen.

Desygner

Desygner ist Canva nicht unähnlich. Ein schönes Tool mit allerhand Vorlagen für alle Social Media Kanäle, deinen Blog und vieles mehr. 

Über PC und Handy nutzbar. Testen lohnt sich.

Gimp

Gimp soll eine Alternative zu Photoshop sein. So weit würde ich nicht gehen, aber für ein kostenloses Tool bietet es doch etwas.

Image Online

Image Online ist ein tolles kleines Tool, um den Hintergrund eines Bildes transparent zu machen. Achte auf PNG-Format. Auch hier fallen keine Kosten an.

Optimizilla

Mit Optimizilla kannst du Bilder direkt Online verkleinern.

Vintage Logo (App)

Vintage Logo kenne ich nur über App fürs iPhone. Es ist innovativ gestaltet und einfach zu bedienen. 

Ideal zum Entwerfen von Grafiken. Auch dieses Tool bietet schon in der kostenlosen Variante viele Möglichkeiten. 

Nachteil von Vintage Logo ist eine höhere Dateigröße. Vor allem, wenn du es mit Canva vergleichst.

Skitch (App)

Skitch ist ideal für das erstellen von Infografiken. Leider nur als App für iPhone, iPad und Mac verfügbar. 

Dafür mit einer Vielzahl an Möglichkeiten. Es ist ideal um etwas hervorzuheben. Um dein Bild mit Pfeilen, usw. zu markieren.

Infografiken lassen sich so sehr schnell erstellen.

Nachteil ist, dass dadurch die Dateigröße ordentlich erhöht wird. Eine nachträgliche Komprimierung hat, nach meiner Erfahrung, immer zu einem Qualitätsverlust geführt.

PencilSketch (App)

PencilSketch ist eine tolle kleine App für das konvertieren von Fotos in Bleistift-Skizzen. 

Leider ist auch diese App nur für iPhone und iPad. Hier gibt es aber allerhand Filter für die Gestaltung.

Bildgröße (App)

Bildgröße ist eine einfache, kostenlose App für Apple Produkte, um deine Bilder auf ein genaues Maß zu schneiden. 

Mit dieser App kannst du ganz einfach die Bildgröße kleiner skalieren. 

Cropper (App)

Cropper ist ebenfalls eine einfache App für iPhone und iPad, zum zuschneiden deiner Bilder. 

Hier aber eher für den Zuschnitt von einem Detail des Bildes. Cropper ist ebenfalls kostenlos.

SEO für Bilder

Bildbearbeitung ist elementar für Website, Blog und Social Media. Lerne wie du das machst und auf was du dabei achten musst. Außerdem bekommst du Anregungen, Tipps und Tricks rund um die Bearbeitung deiner Bilder. Erfahre was der richtige Name, Alt-Tag, Beschriftung und Beschreibung, ist und wofür du diese unbedingt brauchst. Plattformen für kostenlose Bilder und deren Bearbeitung und vieles mehr gibt es in diesem Artikel.

Bilder sind auch für SEO relevant. Was musst du aber eigentlich machen, damit dir deine Bilder einen Vorteil bei Google und co. verschaffen? 

Wichtig ist immer erstmal die Dateigröße. Das weist du ja schon. Diese sollte so klein wie möglich sein. 

Wie das geht hast du bereits gelesen. Aber es gibt natürlich noch mehr, dass du an deinen Bildern optimieren kannst und solltest.

Hier siehst du die 4 Felder, die du unbedingt ausfüllen solltest um einen optimalen SEO-Boost zu bekommen. 

Dadurch kannst du aber zudem Interessenten, über die Bildsuche, auf deinen Blog zu führen.

Was die einzelnen Felder bedeuten und wofür du sie brauchst erfährst du jetzt.

Dateiname vom Bild

Der Name vom Bild

Der nächste wichtige Punkt ist der Name. Google kann nichts mit Bildern anfangen. Suchmaschinen suchen ausschließlich über Texte. 

Das heißt, du musst Google erklären, worum es bei deinem Bild geht. 

Verwende einen sprechenden Namen, der dein Bild möglichst gut beschreibt.

Der erste Anhaltspunkt ist somit der Dateiname. Wenn du das Bild bei WordPress hochlädst, wird der Name der Bilddatei automatisch zum Permalink (Bild-URL). 

Den Dateinamen kannst du auch später nicht mehr ändern. Nur beim Permalink bekommst du noch eine umständliche Möglichkeit.

Du kannst den Permalink, nur noch direkt in der Datenbank ändern.

Rufe hierzu in der Tabelle …_posts den post_name auf. Hier kannst du den Namen manuell ändern. 

Am besten suchst du über die Bild-ID. Schau dazu nach dem anklicken des Bildes in der Mediathek ins Browserfenster. Dort steht dann sowas wie: https://blogfuchs.de/wp-admin/upload.php?item=1235

Die 1235 ist die Bild-ID, nach der du in der Datenbank filterst.

Das solltest du aber vermeiden, weil der Aufwand für das suchen und ändern nicht zu unterschätzen ist. 

Wer dem Bild einfach vor dem Hochladen den richtigen Namen gibt spart sich hier sehr viel unnötige Arbeit.

Solltest du aber dennoch den Namen im Nachhinein ändern wollen, weißt du jetzt wie es geht.

Alternativer Text

Der alternative Text wird auch Alt-Text, Alt-Attribut, Alt-Beschreibung oder Alt-Tag genannt. 

Dieser Text wird immer dann angezeigt, wenn das Bild nicht angezeigt wird. Egal ob bei einem Ladefehler oder wenn das Bild nicht auffindbar ist. Außerdem lassen sich Blinde diesen Text durch Leseprogramme vorlesen.

Doch der vielleicht wichtigste Punkt ist, dass Google (und natürlich andere Suchmaschinen) dadurch das Bild kategorisieren können. 

Damit hilfst du also Google dein Bild zu verstehen.

Am besten du beschreibst hier dein Bild sehr detailreich. So, dass sich der Leser vorstellen kann, was auf dem Bild abgebildet ist. Auch wenn er das Bild nicht sieht.

Wichtig ist, dass die Information relevant ist und das Bild wirklich gut beschreibt.

Hier solltest du auch das Thema deiner Webseite oder Blogbeitrags aufgreifen. Dein Keyword sollte auftauchen, aber vermeide unbedingt Keyword-Spam.

Du solltest hier aber auch keinen Roman schreiben. Fasse dich kurz und eindeutig.

Titel

Beim Titel ist Standardmäßig dein Permalink hinterlegt. Ob du das so lässt oder nicht, bleibt dir überlassen. 

Da aber bei manchen Themes der Titel unter dem Bild in der Galerie steht, macht es durchaus Sinn diesen zu ändern. 

Bei mir ist das oft der Name. Diesen passe ich nur noch in Groß- und Kleinschreibung an und ersetze die Bindestriche durch Leerzeichen. Damit ist der Titel besser zu lesen. 

Das würde ich auch dir empfehlen.

Beschriftung

Die Beschriftung ist das, was unter dem Bild steht. Du kannst sie normalerweise mit deinem Page Builder Ein- oder Ausblenden lassen. 

Manche mögen Text unter dem Bild, andere wiederum nicht. Deine Wahl. 

Wenn du eine Bildunterschrift möchtest, schreibe einen Sinnvollen Text in das Beschriftung Feld. Ich würde hier auch immer einen Text hinterlegen, selbst wenn dein Theme die Beschriftung nicht einblendet.

Wichtig zu wissen ist außerdem, dass du die Beschriftung des Bildes jeweils nur für das Bild selbst machst und nicht für die ganze Datei. Wenn du dasselbe Bild an unterschiedlichen Stellen einbindest, dann kannst du die Beschriftung individuell für alle Bilder gesondert einstellen.

Beschreibung

Bei der Bildbeschreibung fasst du am besten den Inhalt vom Titel und der Beschriftung zusammen. 

Die Beschreibung ist nicht direkt lesbar, es sei denn dein Theme unterstützt das. Text im Feld Beschreibung wird nur im Bildanhang gespeichert.

Bilder, Fotos, Grafiken, Vektoren, usw. finden

Bildbearbeitung ist elementar für Website, Blog und Social Media. Lerne wie du das machst und auf was du dabei achten musst. Außerdem bekommst du Anregungen, Tipps und Tricks rund um die Bearbeitung deiner Bilder. Erfahre was der richtige Name, Alt-Tag, Beschriftung und Beschreibung, ist und wofür du diese unbedingt brauchst. Plattformen für kostenlose Bilder und deren Bearbeitung und vieles mehr gibt es in diesem Artikel.

Bilder oder Fotos brauchen wir alle für einen gelungenen Webauftritt. Dumm nur, dass wir nicht alle Fotografen sind.

Zum Glück gibt es auch für die ungeübten von uns, ansprechende Vorlagen, in Netz.

Du brauchst Bilder, Fotos, Grafiken, Icons, Logos oder ähnliches? 

Hier ist eine Liste geeigneter Plattformen für dein Material. Oft bekommst du hier sogar kostenfreie Vorlagen.

Plattformen für Bilder, Fotos, Grafiken, Icons, Logos und mehr

Hier findest du einige Links zu Anbietern, die unterschiedliche Schwerpunkte, Formate und Bildrechte anbieten. 

Meine bevorzugte Plattform ist Pixabay. Hier hast du viele Rechte und wenig Pflichten.

Einige Anbieter erlauben beispielsweise die Bearbeitung oder Veränderung des Bildes, andere erlauben das nicht. Du musst vielleicht den Urheber namentlich nennen, verlinken oder eben nicht. 

Besser du investierst hier etwas Zeit um die Nutzungsrechte zu lesen. Meistens sind diese sehr gut strukturiert und verständlich beschrieben.

Fazit

Es gibt nur wenige Dinge auf die du bei deinen Bildern achten solltest, bevor du sie auf deinen Blog hochlädst. Diese sind aber umso wichtiger.

  • Dateiformat (PNG, JPG, GIF, SVG)
  • Dateigröße (max. 150-200 kB)
  • Bildgröße und Auflösung
  • Name, Titel, Alt-Text, Beschriftung und Beschreibung stimmig zum Bild 

Optimiere deine Website zusätzlich durch Tools für Lazy Load und Caching.

Feedback

Hast du noch Fragen oder fehlt Information?

Dann schreibe mir jetzt einen Kommentar!

Fandest du den Beitrag hilfreich? Dann teile ihn!
Share-Buttons findest du am Anfang und Ende des Beitrags.

Für mehr hilfreiche Tipps und Tricks.
Vergiss nicht mir zu folgen!
Die Follow-Icons findest du im Footer.

Jetzt den Beitrag teilen!

Schreibe einen Kommentar

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