Bildbearbeitung fuer deine WordPress Website

Die perfekte Bildbearbeitung für deine Website

So optimierst du deine Fotos richtig!

Bilder, Grafiken und Fotos beleben deine Website, visualisieren deine Aussage und bekräftigen deine Worte. Ohne Fotos wäre deine Website leer und eintönig, die Verweildauer würde massiv sinken.

Bildoptimierung fuer deine Website

Hier kommen meine Antworten, die deine Bildoptimierung für deine (WordPress) Website mit Sicherheit erleichtern werden.

# 1

Welche Bildformate empfehle ich?

Grundsätzlich solltest du die zwei gängigsten Bildformate für deine Website verwenden: JPEG und PNG. Mit diesen zwei Dateiformaten kannst du fast alles abdecken.

Fotos sind am besten als JPEG abgespeichert und hochgeladen. JPEGs verfügen über eine geringere Dateigröße, das die Ladezeit deiner Website begünstigt, können aber leicht pixelig werden, wenn sie zu sehr verkleinert werden.

Grafiken speicherst du am besten als PNG ab, sowie Bilder ohne Hintergrund müssen auch PNG sein, denn bei JPEG hast du immer einen Hintergrund. PNGs sind viel Pixel dichter, also scharfer, dafür aber auch viel größer, das deine Ladezeit senken kann.

Logos empfehle ich für deine Website auch als PNG hochzuladen, ohne Hintergrund für die beste Verwendung.

# 2

Welche Dateigröße ist am vorteilhaftesten?

Hier musst du aufpassen nicht zu kleine oder zu große Bilder zu verwenden. Damit deine Website schnell genug ladet, solltest du alle deiner Bilder und Fotos unter 1 MB haben. 

Es kann einige wenige Ausnahmen für größere Dateien geben, wenn du z.B. eine große Grafik anzeigen möchtest, die sehr detailliert ist und eine Verkleinerung ein sehr pixeliges Aussehen verleihen würde.

Bereits kleine Bildformate – unter 100 KB würde ich nicht mehr verkleinern.

# 3

Wie komprimierst du deine Bilder am besten?

tinypng Bildverkleinerung

Am einfachsten und schnellsten geht die Bildverkleinerung über die Website Tinypng. Hier ziehst du deine Bilder einfach mit Drag and Drop in das Fenster in der Mitte der Website, deine Bilder werden innerhalb von Sekunden verkleinert und du kannst sie wieder runterladen.

Hier musst du aber aufpassen, dass die Bildergröße maximal 5 MB sein darf und durch die Komprimierung die Farbentreue eventuell nicht mehr gegeben sein wird. Das ist wichtig, wenn du z.B. Produktbilder für dein Webshop erstellst, wo du überall die gleiche Hintergrundfarbe einfügst, du aber nur manche Bilder mit Tinypng verkleinerst und manche nicht. Beim Aufladen auf deine Website wird der Unterschied deutlich zu sehen sein.

Bei Fotos von dir kann es vorkommen, dass deine Haut durch die Verkleinerung des Bildes blasser erscheint und die Farbe deines Lippenstifts auf einen „nude“ Ton wechselt.

Insgesamt ist diese Website aber wirklich zu empfehlen, denn sie funktioniert ohne Vorkenntnisse, schnell, einfach und kostenlos.

webdesign leitfaden

Hole das meiste aus deiner Website!

In meinem 0€ Leitfaden zeige ich dir, wie du:

# 4

Wie verkleinerst du deine Fotos / Grafiken, wenn sie über 5 MB haben?

Du kannst klassisch in Photoshop deine Dateien verkleinern, wenn du ein Adobe Abo hast oder mit Canva kannst du leicht die Dateigröße reduzieren. Du ladest das große, originale Foto in Canva hoch und als benutzerdefinierte Größe nimmst du die Maße deines Originalbildes. Du ziehst das Bild als Hintergrund ein und ladest das so erstellte Foto wieder runter.

Canva empfiehlt dir die Qualität bereits hier zu reduzieren, jedoch empfehle ich dir 100% als Qualität einzustellen und das so gewonnene Bild in Tinypng zu verkleinern. So erhältst du garantiert ein qualitativ hochwertiges Bild, das aber die kleinstmögliche Dateigröße hat.

# 5

Solltest du deine Bilder zuschneiden?

Hier gebe ich ein klares Ja. Du kannst die Maße deiner Fotos beliebig ändern, also die Länge und Breite neu bestimmen, einen neuen Ausschnitt wählen, von einem liegenden Foto ein Stehendes erstellen oder umgekehrt. 

Am einfachsten nutzt du dafür Canva oder Befunky.

Bilder für Webseite zuschneiden

# 6

Wie findest du die perfekten Bildverhältnisse?

Wenn du ein ungefähres Layout deines Menüpunktes mit Texten hast, kannst du die Größe des Bildes einfach am Bildschirm mit einem Lineal Browser Extension ausmessen.

Hierfür nutze ich den Chrome Extension „Page Ruler“ mit dem du am Desktop den Platz für dein Foto einfach in Pixel ausmessen kannst.

Wenn du z.B. eine Größe von 400 x 600 Pixel gemessen hast, empfehle ich dir immer ca. die dreifache Größe des Bildes zu nehmen, also 1200 x 1800 Pixel, damit es nicht pixelig wird.

page ruler nutzen

# 7

Was solltest du SEO technisch bei deinen Bilder beachten?

Speichere deine Bilder mit aussagekräftigen Keywords ab, damit der Dateiname bereits zeigt, worum es sich auf der jeweiligen Unterseite geht, wo du diese aufladest. Also benenne das Bild als „websitebilder_optimieren_in_wordpress.jpg“ und nicht als „bild0123.jpg“

In der Mediathek füge immer einen Alternativtext mit deinen relevanten Keywords hinzu, ohne Striche und Punkte (mache nicht einfach Copy und Paste der Dateiname), denn anhand diesen Text kann Google dein Bild richtig zuordnen und deine Website für relevante Keywords noch mehr vorne in den Google Suchergebnissen reihen.

# 8

Bilder optimieren mit PlugIn

Diese Option habe ich bewusst als Letzte gelassen, denn bereits aufgeladene Bilder mit einem PlugIn zu verkleinern ist nur für Websites zu empfehlen, die sehr viele große Bilddateien haben und diese nicht einzeln wieder verkleinert aufladen können. 

Die Schwäche dieser PlugIns besteht darin, dass du kaum Einstellmöglichkeiten hast und der Prozess automatisch abläuft. Manche Bilder, die verkleinert werden könnten, werden nicht verkleinert und manche Bilder werden zu stark verkleinert, so dass das Ergebnis pixelig wird. Daher empfehle ich nach Möglichkeit die Bildoptimierung vor dem Hochladen manuell zu machen oder bestehende Dateien manuell zu ersetzen.

Zusammenfassung

Das klingt zwar viel auf einmal, aber wenn du deine Website oder deinen Webshop selbstständig betreust, wirst du diese Punkte nach ein wenig Übung automatisch, ohne darüber nachzudenken anwenden können.

Zusammengefasst solltest du vor allem die Dateigröße beachten und deine Bilder je nach Platzbeschaffenheit optimal zuschneiden. Vergiss nicht die Datei sinnesgemäß zu benennen und den Alternativtext mit Keywords zu versehen.

So werden deine Fotos und Grafiken für den Web optimiert und die Geschwindigkeit deiner Website leidet nicht unter der Größe der Bilder.

Adrienn
Share on facebook
Share on email
Share on pinterest

Ich wünsche dir alles Liebe und gutes Gelingen:

Deine Adrienn

Adrienn_Webseitendesigner_

Hi aus der Online Welt!

Hier ist Adrienn

Freue mich riesig, dass du da bist! Du bist hier genau richtig, wenn du nicht nur das Aussehen deiner Website, sondern deine gesamte Online Strategie voranbringen möchtest.  

Mein Name ist Adrienn und ich bin Webdesignerin und Online Strategistin für hoch konvertierende Websites.

Bereits habe ich zahlreichen Unternehmerinnen geholfen, eine Website zu entwerfen, die nicht nur schön aussieht, sondern Neukunden Rund-um-die-Uhr für sie gewinnt.

blank

Hebe deine Website auf das nächste Level!

Hole dir deinen

unverzichtbaren Leitfaden

für 0€ direkt in dein Postfach

Bin mir sicher, dass du viel mehr aus deiner Website holen kannst!

Feminines Webdesign Wien

Möchtest du eine professionelle Website mit echter Strategie?

Du bist bereit deine Website auf das nächste Level zu heben, ohne deine kostbare Zeit dafür in Anspruch zu nehmen und dich durch tausende Tutorial Videos durchzuschlagen? Dann bist du hier genau richtig! 

Ich bin Adrienn: deine WebseitenDesignerin und Online Expertin für sichtbare Websites, die hoch konvertieren, Neukunden richtig ansprechen und eine große Last von deinen Schulter nehmen. Sei stolz auf deine Website, schicke gezielt Interessenten auf deine Landingpages, verkaufe deine Produkte und Dienstleistungen geschickt direkt auf deiner Website.

Lasst uns deine Reichweite und Sichtbarkeit mit deiner professionellen Website und den richtigen Online Strategien ausbauen!

Wir verwenden Cookies