Richtige Bildgrößen für deine Website

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

Autor: VA Nadin

24. Dezember 2021

Von Anfang an die richtige Bildgröße auf deine Website hochzuladen ist extrem 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 2das 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 auch echt nervig! Geb ich offen zu! Wärs nicht so nervig, würdens die Kunden ja selbst machen.

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ären da die Abmessungen 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×15cm 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 die selbe Darstellungsgröße haben (deine Website wird immer 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. Du kannst in Canva Designs in benutzerdefinierter Größe anlegen und dann dein Foto rein ziehen. So hast du schon die richtige Abmessung. Speichere jetzt als jpeg und schau, ob die Dateigröße 150 kb überschreitet.

Die Dateigröße minimieren

Dazu kannst du Cloudlösungen wie tinypng verwenden. Du lädst das Bild kurz hoch und kannst es kleiner wieder runterladen.

Affinity Photo oder Adobe Photshop

Sind nach wie vor meine Favoriten. Dazu öffne ich das Bild im jeweiligen Programm und exportiere es dann. Im Exportmodus kann ich meine Abmessungen angeben und sehe direkt die neue Dateigröße. Ist die noch zu hoch dann senke ich bei jpg die Qualität. Speichern, fertig.

Dann öffne ich das Bild kurz und checke die Qualität. Es muss noch scharf genug sein. Sonst muss die Qualität höher oder ein anderes Bild her.

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 mit einem Plugin nach.

Plugins für deine optimierten Website-Bilder

Obwohl ich Bilder vor dem Upload bearbeite geb 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!

Wähle die richtigen Abmessunge für deine Websitebilder

Ich geb zu: ich mach das nach Gefühl. Es gibt überall feste Größenwerte. Sowohl von WordPress, als auch von DIVI und sonstigen Experten. 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 ausnahmsweise 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 davon 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, dass Bild in der Höhe nicht zu sehr zu beschränken. Hier brauchst du 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, 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ößen direkt 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 ud behältst den Überblick. Bei vielen Bildern ist auch ein Plugin wie Real Media Library gut, um die Mediathek zu sortieren.

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

 

Autor: VA Nadin

24. Dezember 2021

Virtuelle Assistentin Website DIVI Blog

Hi, ich bin Nadin.

Website, Text & Technik sind mein Ding. Die Basis im Online-Business, ohne geht nichts.

Ich unterstütze dich als lokales und Online-Unternehmen, um deine Sichtbarkeit so aufzubauen, dass sie zu dir passt.

Mit im Gepäck habe ich DIVI & WordPress, Google & Social Media und mehr für deinen Online-Auftritt.

Fragen? Schrei(b).

Du hast keine Lust mehr auf Akquise und willst lieber über deine Website gefunden werden? Dann nimm sie mit meinem Websitecheck unter die Lupe!

Hier gehts zum Newsletter oder

Meine Website wird gehostet bei AllInkl*.



ALL-INKL.COM - Webhosting Server Hosting Domain Provider

*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…

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht.

Durch das Absenden deines Kommentars werden Daten von dir gespeichert. Näheres dazu erfährst du in meiner Datenschutzerklärung.