Wieso du von Anfang an Bilder in der richtigen Bildgröße auf deine Website laden solltest?

Erstmal sind die Bildgrößen wichtig für die Ladezeit und Darstellung deiner Website. Die Bildgröße nachträglich anzupassen, kostet dich viel Zeit, Nerven und Geld.

Ich darf regelmäßig die Mediathek von Kunden ausmisten und alle Bilder ersetzen. Das ist schon echt aufwendig und je nach Website-Größe kann das auch ein paar Stunden in Anspruch nehmen. Nein, ein Plugin zur Optimierung nimmt dir das nicht vollständig ab. Denn hier braucht es auch wieder Zeit und einen Cache, die Bilder entsprechend runterzurechnen und optimiert auszuliefern.

Es ist auch wirklich einfach, das von Anfang an zu beachten und vor Finalisierung der Website alle Bilder korrekt hochzuladen.

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

Die optimale Dateigröße deiner Websitebilder

Bilder von tollen Kameras in top Auflösung haben locker mal 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. Kommt gleich.

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 größer, 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 1500px) brauchst du hier keine gigantischen Abmessungen. Ausnahme: Vollbreite Bilder brauchen eine Breite ab 1920 px, außer wir wollen eine optimale 4k Darstellung, dann braucht es mehr. Aus Erfahrung kann ich hier sagen: Je besser die Qualität der Bilder, umso weiter können wir die Abmessungen reduzieren.

Kleiner Vergleich:

 

Wie du Bilder vor dem Upload auf deine Website bearbeitest

Ich zeige dir die gängigen Wege:

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.

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 kannst es nochmal enorm verkleinert wieder herunterladen.

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 direkt die neue Dateigröße. Ist die noch zu hoch, senke ich bei JPG die Qualität. Speichern, fertig.

Hier kannst du übrigens auch ideal 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.

Wann solltest du das Dateiformat png verwenden?

PNG brauchst du nur für transparente Hintergründe. Also freigestellte Bilder, Logos etc. Da sie aber enorm hohe Dateigrößen haben, weichen wir wenn möglich auf WebP um.

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 es 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 weiteren 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)!