Die ideale Bildgröße für deine Website – Vorbereitung in nur 5 Schritten

Lesezeit:
ca.   Minuten

Veröffentlicht:
 21. Juli 2023
aktualisiert:
2. März 2024

Wie groß soll denn ein Bild für meine Webseite sein? Ist eine Frage, die mir immer wieder begegnet. Hier ist es vor allem wichtig zwischen Bild-Maßen und Bild(datei)größe zu unterscheiden. Aber begleite mich doch einfach durch meinen Vorbereitungsprozess - du wirst sehen es ist eigentlich ganz leicht. In diesem Beispiel für ein Bild für den Blog. Du kannst dies aber für jedes andere Bild für deine Webseite ganz genauso machen.

Schau dir das folgende Video an oder lese darunter die Schritt für Schritt Beschreibung inklusive Screenshots.

Sie sehen gerade einen Platzhalterinhalt von Vimeo. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

1. Wie groß soll das Bild sein? Die Bild-Maße herausfinden

Wenn du die Abmessungen deines Bildes nicht bereits kennst, kannst du diese einfach über die Entwicklertools deines Browsers herausfinden:

  • Öffne z.B. in Google Chrome mit einem Rechtsklick das Kontextmenü und klicke auf „Untersuchen“
  • Wähle im Menü links außen das kleine Quadrat mit dem Mauspfeil
  • Bewege die Maus jetzt über das gewünschte Bild

Nun öffne sich ein kleines Informationsfenster, indem du die Maße – hier z.B. 600 x 340 (Pixel) – und du kannst die Abmessung ablesen.

2. Erhöhe die Maße um 30-50%

Damit das Bild scharf und unverpixelt angezeigt wird, erhöhst du nun die Maße indem du sie mal 1,3 oder 1,5 nimmst. Ich nehme – da ich Datenvolumen sparen möchte – nur 30%. Für sensiblere Darstellung, wie sie Mac nutzt, solltest du sicherheitshalber um 50% erhöhen.

3. Lege dir ein entsprechendes Canva Projekt an

Nun machst du dir in Canva ein Projekt mit der erhöhten Größe. In meinem Fall 800 x 450 und gestaltest dein Bild. Der große Vorteil ist hier, dass du nicht herumfummeln bzw. zuschneiden musst. Zieh dir das Bild in den Hintergrund – durch Doppelklick kannst du es auch bearbeiten, den Bildausschnitt vergrößern oder umpositionieren.

Solltest du mit Canva noch nicht 100%ig fit fühlen, dann kann ich dir meinen schnellen Canva Kurs mit allen wichtigen Funktionen in nur 30 Minuten für kleines Geld empfehlen.

4. Achte bereits beim Herunterladen auf folgende Dinge

Vergib einen sinnvollen, sprechenden Namen. Das hilft nicht nur, dass du dein Bild in der Mediathek leichter wiederfindest. Wenn du ein Keyword recherchiert hast, dann sollte dieses auch in den Dateinamen.

Lade das Bild als JPG und nicht als PNG herunter und stelle die Qualität auf 80%. Hier kannst du schon sehr gut für eine schlanke Dateigröße sorgen.

5. Letzter Schritt – Datei komprimieren

In jedem Bild stecken auch sogenannte Metadaten (Kameratyp, Datum usw.) die deine Bilddatei auch noch unnötig groß machen. Ich nutze sehr gerne TinyPNG, um meine Bilder dann noch zum Komprimieren. Es ist faszinierend, um wie viel Prozent die Bildgröße hier nochmal reduziert wird.

Möchtest du eine Checkliste für die Bildoptimierung? Dann kannst du sie dir hier als Dankeschön für die Eintragung in meinen Newsletter holen:

Wenn du mehr über Bilder, Suchmaschinen- und Ladezeitoptimierung erfahren willst, dann schau dir auf alle Fälle meinen Artikel „Bilder optimieren und Ladezeit reduzieren – so geht’s“ an.

Viel Erfolg beim Erstellen deiner Webseiten Bilder
Deine

Beatrice Unterschrift

Wer schreibt hier eigentlich?

Ich bin Beatrice Krammer, leidenschaftliche und zielstrebige Web-Technikerin und Sparringspartnerin mit einer großen Portion Herz und Humor.


Aus den Erfahrungsberichten vieler meiner KundInnen weiß ich, wie mühsam es ist, mit der Technik zu kämpfen. Du verlierst Nerven und Zeit, während du eigentlich viel lieber das tun würdest, wofür du voller Freude aus dem Bett springst.

Die gute Nachricht lautet: Ich nehme dir deine Techniksorgen ab und führe dich sicher durch all deine Herausforderungen. Wenn du dein Wunschbusiness online verwirklichen und damit so richtig durchstarten möchtest, bin ich von Herzen gern die Partnerin an deiner Seite. Hier kannst du mehr über mich erfahren.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    Folgende Artikel könnten dich auch interessieren:

    Der schnellste Weg in meine E-Mail-Liste

    Du möchtest 14 tägig den Technik-Boten mit meinen Tipps direkt in dein Postfach bekommen und von Neuigkeiten z.B. am Blog als erstes erfahren?

    Tools, die ich selbst auf dieser Webseite nutze und empfehle:

    E-MAIL-ANBIETER

    ActiveCampaign *

    Brevo *


    INFO
    Alle mit * gekennzeichneten Links
    sind
    Affiliate-Links  (< klick für Info)

    >