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 deiner Webseite sind, gibt es einiges zu beachten. Damit aus dem Vorteil einer ansprechenden Webseite kein Nachteil einer langsamen Ladezeit wird.
Worauf du bei der Wahl deiner Bilder und ihrer Bearbeitung achten musst, erfährst du hier.
Was heißt Bild bearbeiten?
Unter Bildbearbeitung kann man viel verstehen. Vor allem geht es aber um die Optimierung von Größe und Aussehen deiner Bilder. Zudem müssen Bilder für Soziale Medien bearbeitet und optimiert werden.
Es geht hier um:
- Das richtige Bilddateiformat (früher PNG, JPG, GIF, SVG – heute immer mehr WebP, AVIF)
- 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 jeder deiner Webseiten.
Mehr zum Thema Optimierung der Ladezeit, für deine Website, findest du hier.
Eine schnelle Ladezeit ist 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 eine Webseite, 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ößen.
Im folgenden Abschnitt erfährst du wie groß dein Bild am besten sein sollte.
Bildgröße - Wie groß muss/darf dein Bild sein?
Deine Website 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 deine 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.
Zum einen durch die geringere Größe der Bilddatei und zudem muss der Computer das Bild zum Anzeigen nicht noch umrechnen.
Kein Bild auf deinen Webseiten sollte über 1920×1280 Pixel betragen. Selbst dieses Maß ist nur für Vollflächiges Anzeigen gedacht und sollte mit Bedacht gewählt werden.
Wenn die meisten deiner Kunden über ihr Handy auf deine Website kommen, macht ein großes Bild nur wenig Sinn.
Da im B2B-Business meist über Desktop-PCs bzw. Notebooks gearbeitet wird, ist es hier aber anders. Dann solltest du die großen Bilder an der Breite deines Fließtextes ausrichten. Wenn deine Seite beispielsweise mit 1000px Breite dargestellt wird, dann müssen deine Bilder normalerweise auch nicht größer sein.
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 TinyPNG, bevor du die Bilder hochlädst oder du nutzt ein Plugin wie TinyPNG – JPEG, PNG & WebP image compression. Das übrigens auch von Tiny PNG ist, aber nicht nur für PNG-Dateien verwendet werden kann.
Ideale Bildgröße 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 und Bedürfnisse angepasst werden.
Hier heißt es einen guten Kompromiss, zwischen Dateigröße und Bildqualität, zu finden.
- 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
- Logo 400×400 Pixel
- Header 1500×500 Pixel
- Stream 1024×512 Pixel
- Profilbild 110×110 Pixel (Besser etwas größer, damit es nicht unscharf wird.)
- Feed 1080×1080 Pixel
- Story 1080×1920 Pixel
- Profilbild 160×160 Pixel werden Angezeigt (Besser 600×600 Pixel, damit es nicht unscharf wird)
- Pin 1000×1500 Pixel (wichtig ist das Verhältnis 2:3)
Ideale Bildgröße auf deiner Website
Dein Vorhaben und Design entscheiden was die ideale Bildgröße für deine Website oder einen 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.
- 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
Es gibt viele verschiedene Bildformate. Für die Bilder auf deiner Website, kommen aber nur wenige infrage. Eigentlich sogar nur zwei, nämlich PNG und JPG .
Seit 2010 werden diese beiden immer mehr durch WebP und seit 2019 auch von AVIF abgelöst.
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 deiner Website.
WebP
WebP wurde von Google als alternative für PNG und JPEG entwickelt und ist bekannt für die kleinen Bilddateien für komprimierte Bilder.
Laut Google sollen sie ca. 26% kleiner als bei PNG-Bildern sein und das bei verlustfreier Komprimierung. Außerdem sollen sie ca. 25-34% kleiner als bei JPEG-Bildern sein, allerdings bei geringfügig verlustbehafteter Komprimierung.
Wer also viele Bilder auf seiner Website hat, sollte über eine Umstellung seiner Bilddateien auf WebP nachdenken.
Nachteil von webP ist, dass es noch nicht von allen Browsern verarbeitet werden kann. Das sollte sich aber in Zukunft ändern.
AVIF
AV1 Image File Format
AVIF wurde von der Alliance for Open Media gegründet.
Es soll, je nach Quelle, nur 10% der Größe einer JPEG-Datei haben. Das kann ich so aber nicht bestätigen.
Außerdem ist es aktuell nur mit Plugins möglich dieses Format zu nutzen. Ich kenne aber kein Plugin, das AVIF in der Free-Version anbietet.
In Zukunft wird AVIF aber sicher stärker verbreitet werden. Erfahrungsgemäß braucht es einige Jahre bis neue Technologien von der breiten Öffentlichkeit akzeptiert werden.
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
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. Soweit 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 iOS Geräte 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
Bilder sind auch für SEO relevant.
Was musst du jetzt aber eigentlich genau 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 führen, wenn deine Kunden Bilder über die Bildsuche bei Google suchen.
Was die einzelnen Felder bedeuten und wofür du sie brauchst erfährst du jetzt.
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://deine-website.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 können sich Sehbehinderte diesen Text durch Leseprogramme vorlesen lassen und so verstehen was du mit dem Bild zeigen möchtest.
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 du die Beschriftung durch dein Theme nicht einblendest.
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
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 wenig Dinge die du, vor dem Hochladen deiner Bilder, beachten solltest. Diese sind aber umso wichtiger.
- Dateiformat (PNG, JPG, GIF, SVG)
- Dateigröße (max. 150-200 kB für große Bilder)
- 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.
