Richtige Bildgrößen für deine Website

5 Tipps zu richtigen Bildgrößen für deine Website

Autor: Nadin

24. Dezember 2021

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.

Was du zu Bildgrößen auf deiner Website wissen musst

Da gibt es einmal 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.

Dann wäre da 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:

Vergleich Abmessungen Bild

 

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

Bildgrösse volle Breite

Bildgrösse 2 Spalten

Bildgrössen 3 4 Spalten

 

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.

Letzte Tipps

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

 

Autor: Nadin

24. Dezember 2021

Kategorien

Sag mal, was taugt deine Website eigentlich?

Trag dich für den Newsletter ein und erhalte die Checkliste!

Einwilligung
Marketing von
Nadin Schmidt

Hi, ich bin Nadin.

Als introvertierte Freelancerin ist das Onlinemarketing meine Wohlfühlwelt.

Mein Fokus liegt auf WordPress mit DIVI und dem E-Mail-Marketing mit Active Campaign. Denn die Website und der Newsletter sind das perfekte Vertriebspaar, nicht nur für Introvertierte.

Damit Onlinemarketing für dich einfach wird, bin ich als Wegbegleiterin vor allem für Coaches, Berater & Therapeuten da.

Ich verschaffe dir einen Überblick und räume dir die Hürde der Technik aus dem Weg!

Fragen? Schrei(b).



ALL-INKL.COM - Webhosting Server Hosting Domain Provider

*Meine Website wird gehostet bei AllInkl. Hierbei handelt es sich um einen Affiliate-Link. Wenn du darüber kaufst, erhalte ich eine kleine Provision – du zahlst dafür nicht mehr.

Lies doch auch mal…