Von Anfang an die richtige Bildgröße auf deine Website hochzuladen ist echt wichtig.
Erstmal sind die Bildgrößen wichtig für die Ladezeit und Darstellung deiner Website. Nicht gleich beim Upload die richtige Bildgröße zu verwenden, kostet dich später viel Zeit, Nerven und Geld.
Ich darf das regelmäßig für Kunden machen. Die Mediathek ausmisten und alle Bilder runterladen, bearbeiten und neu hochladen. Das ist schon echt aufwendig und je nach Website-Größe kann das auch ein paar Stunden in Anspruch nehmen.
Dabei ist das gar nicht so schwer. Es hört sich nur erstmal kompliziert an.
Verkaufen durch Vertrauen statt Kaltakquise?
Was du zu Bildgrößen auf deiner Website wissen musst
Die Dateigröße der Websitebilder
Die kann von einigen KB bis zu mehreren MB groß sein. Super tolle Fotografenbilder in top Auflösung mit super Kamera 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.
Die richtige Abmessung der Websitebilder
Die werden in Pixel angegeben und sorgen für die Schärfe des Bildes. Je mehr Pixel den bunten Vogel darstellen, umso schärfer ist er – macht Sinn, oder? Das Bild ist dann halt auch größer, da ein Pixel eben ein Pixel groß ist. Wenn mehr davon nebeneinander sind, ist das Bild auch entsprechend größer. Druckst du es dann auf ein 10 × 15 cm Foto und „quetschst“ die ganzen Pixel so in eine kleine Form, dann hast du ein gestochen scharfes Bild.
Da die Bilder auf deiner Website aber immer in etwa dieselbe Darstellungsgröße haben (deine Website wird meist in einer festen Breite von 1920 Pixel angelegt) brauchst du hier keine gigantischen Abmessungen. Das Maximum für Bilder in voller Breite sind somit 1920 px.
Kleiner Vergleich:
Wie du Bilder vor dem Upload auf deine Website bearbeitest
Dazu gibt es mehrere Wege.
Wenn du mit Canva arbeitest
dann leg das Bild direkt als eigenes Format an. Dazu legst du in Canva ein neues Design in benutzerdefiniertes Größe an (mehr dazu unten) und ziehst dein Foto rein. 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 minimieren
Dazu kannst du Cloudlösungen wie tinypng verwenden. Du lädst das Bild kurz hoch und kannst es direkt verkleinert wieder runterladen.
Affinity Photo oder Adobe Photshop
Das sind nach wie vor meine Favoriten. Dazu öffne ich das Bild im jeweiligen Programm und exportiere es dann direkt wieder. Im Exportmodus kann ich meine Abmessungen angeben und sehe auch die neue Dateigröße. Ist die noch zu hoch, senke ich bei jpg die Qualität. Speichern, fertig.
Noch kurz das Bild öffnen und die Qualität checken. Es muss noch scharf genug sein. Sonst muss die Qualität höher oder ein anderes Bild her.
Vorteil bei beiden Tools: Du kannst mehrere Bilder als Stapel verarbeiten. Damit gehts schneller.
Wann brauchst du png?
PNG hat meist die größere Dateigröße. Das brauchst du eigentlich nur, wenn du Bilder mit transparentem Hintergrund hast. Logos oder Mockups werden gerne so gespeichert. Für alles andere reicht jpg. Für die Auslieferung in Browsern gibt es auch Webformate wie WebP oder Aviv. Die können aber nicht alle Browser, also helfen wir da später mit einem Plugin nach.
Wähle die richtige Abmessung für deine Websitebilder
Ich geb zu: ich mach das nach Gefühl. Es gibt überall feste Größen. Sowohl von WordPress, als auch von DIVI und sonstigen Tools. Ich hab die besten Erfahrungen mit selber ausprobieren gemacht. Wenn ich unbedingt ein bestimmtes Bild haben möchte, DIVI aber eine Größe von 360 px Breite empfiehlt und das Bild damit einfach nicht aussieht, dann mach ich es größer! Dann ist das eben so.
Übrigens orientiere ich mich immer an der Breite und stimme dann die Höhe darauf ab.
Verwende für die gleiche Darstellung immer die selbe Bildgröße
Wenn du zum Beispiel 3 Spalten hast, dann achte darauf, dass jedes Bild darin die selben Abmessungen hat.
Verwende auch für deine Beitragsbilder immer die selbe Größe.
Bilder mit voller Breite sollten immer 1920 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 viel mehr Spiel nach oben und unten als die tatsächlich angezeigte Höhe.
Meine verwendeten Bildgrößen
Das sind Richtwerte, mit welchen ich arbeite. Die Höhe musst du selbst anpassen, je nachdem wie du dein Bild dargestellt haben willst.
Es kommt ja auch 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, 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 für deine optimierten Website-Bilder
Bildoptimierungs-Plugins
Obwohl ich Bilder vor dem Upload bearbeite, gebe ich den Feinschliff nochmal durch ein Plugin. Plugins wie 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 hilft einfach nochmal super viel für die Ladezeit, ist aber kein Ersatz für die richtige Vorarbeit!
Wenn du viele Bilder auf einmal optimieren willst, dann nutze die Mengenoptimierung. Mein Geheimnis: ich brauche keinen Pro-Account, weil ich einfach so viele Bilder wie möglich optimieren lasse und den Rest dann einen Monat später. Wenn du immer von Anfang an auf die richtigen Größen achtest, wirst du sowieso keine Mengenoptimierung brauchen, sondern die Bilder direkt beim Upload anpassen lassen.
Du könntest die Bilder hier sogar über ein CDN laden lassen. Ich verzichte wegen des Datenschutzes darauf.
Websitebilder in der Mediathek austauschen
Mit Enable Media Replace kannst du Bilder direkt in der Mediathek austauschen. Das hat bisher bei mir ganz 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. Dann kannst du den Rest machen.
Weitere Tipps für gute Fotos für die Website
Quer- oder Hochformat
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, so dass sich in der anderen Hälfte Text unterbringen lässt.
Ausleuchtung & Farben
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.
Stimmung & Thema
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 der Fotos
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 gar nicht so schwer. 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)!
