Bildgrößen – Bilder für den Websiteupload bearbeiten

Korrekt bearbeitete Bilder und Bildgrößen sind wichtig für die Ladezeit und Darstellung auf deiner Website. Die Bildgröße nachträglich anzupassen, kostet Zeit, Nerven und Geld.

Nein, ein Plugin zur Optimierung übernimmt das nicht. Das ist nur der Feinschliff.

Zusammengefasst optimierst du deine Bilder vor dem Upload auf deiner Website wie folgt:

• Sie sollten in der Abmessung der dargestellten Größe entsprechen. Wenn du z. B. ein Bild in voller Breite einsetzen möchtest, genügt meist die Auflösung HD, welche 1920 px in der Breite entspricht. Ein Bild, welches auf dem halben Inhalt platziert wird, entspricht 960 px Breite etc.
• Die Dateigröße sollte unter 200 KB liegen.

Wie das im Detail funktioniert, schauen wir uns jetzt an.

Zwei Messgrößen für Bildgrößen auf deiner Website: Abmessungen und Dateigröße

Wir sprechen einmal von den Abmessungen in Pixeln und von der „Schwere“, also Größe in KB oder MB.

Die optimale Dateigröße deiner Websitebilder

Bilder in top Auflösung haben locker 12–18 MB. Das Bild ist gestochen scharf, würde aber eine Ewigkeit zum Laden brauchen. Wir wollen Schnelligkeit!

Das heißt: Bilder für Webseiten auf maximal 150 KB verkleinern. Ja richtig, KB.

Wie wir das schaffen? Indem wir zuerst die Abmessungen auf die benötigste Größe reduzieren und dann das ideale Dateiformat wählen. Dazu gleich mehr.

Die idealen Abmessungen deiner Websitebilder

Die Abmessung von Bildern werden in Pixeln angegeben und sorgen für die Schärfe des Bildes. Je mehr einzelne Pixelchen je Millimeter nebeneinander liegen, umso gestochen schärfer das Bild. Leider ist es dann auch schwerer (KB, MB), da mehr Pixel auch mehr Gewicht haben.

Da die Bilder auf deiner Website aber immer in etwa dieselbe Darstellungsgröße haben (deine Website wird meist mit einer festen Inhaltsbreite angelegt, irgendwas zwischen 1080 und 1640px, schau dir mal in Divi die Breite deiner Zeilen in den Einstellungen an) brauchst du hier keine gigantischen Abmessungen. Ausnahme: Vollbreite Bilder brauchen eine Breite ab 1920 px (HD, hier platzieren wir das Bild in der Sektion, welche sich – im Gegensatz zur Zeile – in der Größe an den Bildschirm anpasst).

Wollen wir eine Darstellung in 4k, braucht es entsprechend größere Abmessungen. Aus Erfahrung kann ich hier sagen: Je besser die Qualität der Bilder, umso weiter können wir die Abmessungen reduzieren. Kompromisse zu Lasten der Ladezeit gehen wir hier ein für z. B. Fotografenwebsites, wo die Qualität der Bilder entsprechend wirken soll.

Kleiner Vergleich:

Links siehst du ein scharfes Bild in größer Abmessung und hoher Dateigröße, rechts runtergerechnet, hier als Extrembeispiel zur Verdeutlichung.

Bilder vor dem Upload auf deine Website bearbeiten

Ich zeige dir die gängigen Wege:

Affinity Photo oder Adobe Photshop

Mit gängigen Fotobearbeitungstools kannst du natürlich noch viel mehr Bearbeiten.

Öffne das Bild im jeweiligen Programm und klicke dann direkt wieder auf exportieren. Im Exportmodus kannst du deine gewünschten Abmessungen angeben und siehst die neue Dateigröße. Ist diese noch zu hoch, senke ich bei JPG die Qualität. Speichern, fertig.

Hier kannst du übrigens auch als WebP exportieren und sparst dir so hinterher ein Bildoptimierungsplugin! WebP ist ein Bildformat, das ideal für Browser ist und enorm kleine Dateigrößen ermöglicht. Wenn möglich, verwende das.

Sollte die Qualität des Bildes zu stark gelitten haben, erhöhe deine Abmessungen.

Affinity gibt es übrigens zum Einmalpreis für knapp 50-60€. Vorteil bei beiden Tools: Du kannst mehrere Bilder als Stapel verarbeiten. Damit gehts schneller.

Bilder mit Canva für deine Website optimieren

Dazu legst du in Canva ein neues Design in benutzerdefiniertes Größe an (mehr zu den Größen weiter unten) und ziehst dein Foto rein. Also zB legst du dir Formate in 600×400 px an und platzierst darin dein Bild als Hintergrund. So hast du schon die richtige Abmessung. Speichere jetzt als jpeg und schau, ob die Dateigröße 150 kb überschreitet. Mit dem Pro-Account kannst du die Größe auch nachträglich anpassen.

Ich nutze das nicht so gerne, weil Bilder nach Canve meist etwas unschärfer werden, vor allem Bilder mit Schrift darauf (was du aus SEO-Gründen sowieso nicht machen solltest). Das Titelbild dieses Beitrags wurde so erstellt.

Die Dateigröße zusätzlich minimieren mit tinypng

Egal, womit ich die Bilder bearbeitet habe, vor dem Upload auf die Website lasse ich sie einmal von tinypng optimieren. Das ist eine Cloudlösung. Lade dazu das Bild kurz bei tinypng hoch und du kannst es nochmal enorm verkleinert wieder herunterladen.

Funktioniert auch mit webp Formaten. Vorher sollten die Bilder IMMER zuerst in einem anderen Tool beschnitten worden sein. Tinypng ist nur der extra Schliff und für manche Bilder zuviel des Guten. Wird dein Bild zu unscharf, lass es weg.

Wann welches Dateiformat verwenden?

PNG ausschließlich für scharfe Bilder mit transparentem Hintergrund, z. B. Logos, freigestellte Bilder. Nachteil: Hohe Dateigröße.
(Logos und ähnliches laden wir übrigens NIEMALS mit weißem Hintergrund hoch. Das sieht im Dark Modus nämlich ziemlich besch***en aus.)

JPG für jegliche Art von Bildern. Dateigröße niedriger als png.

WebP kann alles davon, nutzen wir aber nur für Websites. Nachteil: teilweise leidet die Qualität zu sehr, je nach Ausgangsbild.

Brauchst du keinen transparenten Hintergrund und kannst kein WebP auswählen, dann wähle möglichst JPG und lasse WebP über Plugins wie WP Optimize oder Imagify ausliefern.

Wähle die richtige Abmessung für deine Websitebilder

Fast jedes Theme und sogar WordPress hat feste Größen für Bilder. Am Ende solltest du dich aber für die Abmessung entscheiden, die auf möglichst vielen Geräten gut aussieht.

Optimierst du eher für mobil, dann achte auch hier auf separate Mobilbilder in Breiten von ca 500px.

Ansonsten probier die möglichst kleinsten Abmessungen aus und schau, ob dein Bild qualitativ gut aussieht.

Orientiere dich zuerst an der Breite und stimme dann die Höhe darauf ab, denn im Webdesign haben wir Luft nach oben und unten, aber nicht beliebig nach rechts und links (wir wollen ja nicht nach links und rechts scrollen…)

Verwende für die gleiche Darstellung immer dieselbe Bildgröße auf deiner Website

Wenn du zum Beispiel 3 Spalten hast, dann achte darauf, dass jedes Bild darin dieselben Abmessungen hat.

Verwende auch für deine Beitragsbilder immer dieselbe Größe.

Bilder mit voller Breite sollten mindestens (meist ausreichend) 1920 px breit sein. Bei Hintergrundbildern mit Überlagerung darf es auch mal weniger sein.

Wenn du Parallaxen einsetzt, denk daran, das Bild in der Höhe nicht zu sehr zu beschränken. Hier brauchst du mindestens das doppelte an Spiel nach oben und unten als die tatsächlich angezeigte Höhe.

Meine verwendeten Bildgrößen

Hier findest du grafisch Richtwerte, an welchen du dich orientieren kannst. Die Höhe musst du selbst anpassen, je nachdem, wie du dein Bild dargestellt haben willst.

Es kommt immer darauf an, ob du dein Bild als Hintergrund einsetzt, als Bildmodul, als Beitragsbild und ob du Breite und Höhe manuell festlegst (vom Festlegen der Höhe rate ich ab, da die Responsive Anpassung verloren geht!). Es muss nach dem Einsetzen eben gut aussehen und das auf jedem Gerät. Darum orientiere ICH mich nicht an den Divi-Größen. Wenn du das erstmal probieren willst, dann findest du hier die DIVI-Größen.

Übersicht über meine Bildgrößen

 

Plugins, um deine Websitebilder zu optimieren

Bildoptimierungs-Plugins

Obwohl ich Bilder vor dem Upload bearbeite, gebe ich zusätzlich den Feinschliff durch ein Plugin. Plugins wie WP-Optimize, ShortPixel oder Imagify geben den Bildern nochmal den Kick, optimieren die Dateigröße und liefern da, wo es möglich ist, in Webformaten aus. Das unterstützt zusätzlich die Ladezeit, ist aber kein Ersatz für die richtige Vorarbeit!

Auf CDN solltest du aufgrund des Datenschutzes verzichten. Dabei werden Bilder auf einem externen Server platziert und dort abgerufen.

Websitebilder in der Mediathek austauschen

Mit Enable Media Replace kannst du Bilder direkt in der Mediathek austauschen. Das hat bisher bei mir gut funktioniert. Aktiviere das Plugin, geh in die Mediathek, klicke auf ein Bild und suche den Button Bild ersetzen.

Dann lädst du einfach das verkleinerte Bild hoch und es wird ausgetauscht.

Tipp: probier das erstmal mit einer Webseite und warte einen Tag, ob alles so geklappt hat. Das kann manchmal kurz dauern. Dann kannst du den Rest machen.

Weitere Tipps für gute Fotos für die Website

Quer- oder Hochformat für Websitefotos?

Wir neigen alle dazu, bei Fotoshootings vor allem Hochformat-Bilder zu machen. Querformat lässt sich auf Webseiten aber viel öfter und besser einsetzen. Am besten, wenn du rechts oder links platziert bist, sodass sich in der anderen Hälfte Text unterbringen lässt.

Ausleuchtung & Farben der Websitebilder

Achte beim Shooting auf eine gute Ausleuchtung und passende Farben. Auf deiner Website soll die Farbe Rot überwiegen? Dann werden sich Bilder auf grünen Wiesen schlecht unterbringen lassen. Die Farben sollten gut ausgeleuchtet, stark und gesättigt sein.

Stimmung & Thema deine Websitefotos

Fang in den Fotos bereits die Stimmung ein, die auf deiner Website übermittelt werden soll. Möglichst Themennah. Schön, dass du Bilder am Strand hast. Häng sie ins Wohnzimmer, aber pack sie nicht auf deine Website, wenn du Autos verkaufst. Ausnahme: du willst auf der über mich Seite Stimmung vermitteln.

Blickrichtung auf deinen Websitefotos

Schau deine Websitebesucher an. Wähle Fotos mit Blickrichtung zum Text, also nach innen.

Last but not least

Bildgrößen direkt vor Upload anzupassen, ist echt easy. Vor allem wenns mal im Kopf drin ist, passiert das fast schon automatisch.

Ganz wichtig auch: Bilder, die du hochlädst und dann doch nicht verwendest, direkt wieder aus der Mediathek zu löschen! So vermüllt sie nicht und du behältst den Überblick. Bei sehr vielen Bildern bietet sich auch ein Plugin wie Real Media Library an, um die Mediathek zu sortieren.

Viel Spaß und wenn du Hilfe brauchst schrei(b)!