Landinpage-Templates
Bringe in unter 1 Stunde deine wichtigten Seiten online.
Website Academy
Erstelle deine Business-Website so, dass du online gefunden wirst und direkt deine WunschkundInnen anziehst.
Bilder sind das A und O auf deiner Website. Sie vermitteln ein bestimmtes Gefühl, untermauern deinen Website-Stil und illustrieren deinen Content. Du zeigst dich und dein Business. Das weckt Vertrauen. Daher sollten deine Bilder qualitativ hochwertig sein und gleichzeitig schnell laden. Und hierzu brauchst du die optimalen Bildgrößen.
Hier erfährst du, auf welche Bildgrößen es auf deiner Website ankommt und mit welchen Tools du arbeiten kannst, um das optimale Foto zu erstellen. Damit wir uns verstehen: In diesem Artikel geht es eher um die technischen Eigenschaften des Fotos.
Ob du mit deinem Foto von dir persönlich zufrieden bist, ist eine ganz andere Frage.
Sowohl zu große als auch zu kleine Bilder tun deiner Website überhaupt nicht gut.
Wenn du zu große Bilder einfügst, muss dein System sie für die Anzeige verkleinern. Das wirkt sich negativ auf die Ladezeit deiner Website aus.
Ist dein Bild zu klein für den Bereich, in dem es angezeigt werden soll, wird es unscharf bzw. pixelig dargestellt. Und das ist nichts, was du auf deiner Website sehen willst.
Und auch hier muss dein System rechnen, damit das Bild eingepasst wird.
Daraus ergibt sich:
Damit du das umsetzen kannst, musst du zunächst herausfinden, wie groß der entsprechende Platz auf deiner Website ist. Mit Bildgröße ist hier das eigentliche Format – also die Breite und Höhe deines Fotos – in Pixeln gemeint.
22 bis 49 Zoll große Desktop-Monitore, 13, 14, 16 Zoll große Laptop- oder MacBook-Monitore, Tablet- und Smartphone-Displays …
Es gibt sooo viele Monitor- und Display-Größen der unterschiedlichen Hersteller. Nicht zu verwechseln mit der Bildschirmauflösung, denn diese ist in der Regel viel höher.
Das Gerät, mit dem du die Website aufrufst, hat jeweils eigene Anforderungen. Wichtig ist, dass deine Bilder auf allen Endgeräten, also auf dem Desktop als auch mobil auf dem Tablet und dem Smartphone, optimal angezeigt werden.
Desktop: 1920×1200 bis 1024×768 px
Laptop: 1280×900 bis 1024×768 px
Tablet: 800×1280 bis 601×962 px
Mobil: 414×896 bis 360×640 px
Bei diesen Angaben ist der erste Wert jeweils die Breite des Bildes.
Du siehst, die Standardwerte für mobile Geräte geht von einer Nutzung im Hochformat aus.
Wenn du ein Bild in voller Seitenbreite einbindest, sollte es 1920 px breit sein. So stellst du sicher, dass es auf dem großen Monitor scharf angezeigt wird.
Willst du ein Bild oder mehrere Bilder in einem begrenzten Abschnitt einbinden, kannst du über die Inhaltsbreite genau bestimmen, wie groß das Foto maximal sein darf.
Hast du eine Inhaltsbreite von 1200 px festgelegt und willst drei Fotos nebeneinander einfügen, sollte jedes Foto 360 px breit sein:
1200/3 = 400 px abzüglich 40 px Rand (20 px auf jeder Seite).
Du kannst auch mit mehr Abstand rechnen, dann hängen die Bilder nicht so dicht aufeinander.
In deinen Blogbeiträgen hast du eine fest definierte Breite für deinen Content. Bindest du hier ein Bild ein, gibt die festgelegte Inhaltsbreite die maximale Bildbreite vor.
Je nach Thema, werden deine BesucherInnen deine Website aber gar nicht am Desktop besuchen. In vielen Nischen, z. B. Ernährung mit Rezepten oder Sport mit Übungen und Workouts, gehen die Website-Aufrufe über mobile Geräte gegen 98 %.
Vor allem Bilder in voller Seitenbreite, die in der Desktop- und in der Tablet-Ansicht sehr gut funktionieren, kannst du auf dem Smartphone eventuell nicht optimal darstellen.
In beiden Fällen kannst du für die mobile Ansicht auf dem Smartphone ein anderes Bild einsetzen. Mit einem guten Pagebuilder ist das ganz leicht. In meinem neuem Online-Programm Website Academy lernst du u. a., wie du diesen „Spagat“ auf deiner Website mit wenigen Klicks meisterst.
In 3 einfachen Schritten
zu deinem glasklaren WEBSITE-KONZEPT!
Abonniere meinen Newsletter für Website-Queens und du erhältst den Fahrplan für dein Konzept für 0 Euro.
Lass mich raten: Du hast einen Desktop-Monitor, ggf. ein Notebook, ein Tablet und ein Smartphone? Eventuell gibt es in deinem Haushalt noch ein weiteres Tablet und ein Smartphone mit anderen Display-Größen?
Du musst nun nicht alle diese Geräte zur Optimierung deiner Website benutzen. Du kannst im Chrome-Browser mit den sogenannten Google Entwickler-Tools die Größe des Bildes auf verschiedenen mobilen Endgeräten ermitteln.
Hier erkennst du, ob dein eingefügtes Bild zu groß oder zu klein ist.
Je größer das Bild in seinen Abmessungen, desto höher auch die Dateigröße.
Auch die Bildinhalte haben einen Einfluss auf die Größe der Datei:
Die Dateigröße wird umso höher, je mehr Farben dein Bild enthält.
Grundsätzlich solltest du keine Bilder von deiner Kamera oder deinem Smartphone unbearbeitet und direkt auf die Website laden. Auch Stockfotos (z.B. von Unsplash & Co.) sind zu groß. Ein unbearbeitetes Bild kann schon mal 5404×3606 px bei bis zu 6 GB auf die Waage bringen.
Das ist eine viel zu große Datenmenge.
Das Gute: Bilder in dieser Größe kannst du gar nicht in WordPress hochladen. Wenn du es dennoch versuchst, erhältst du eine Fehlermeldung, dass dein Bild maximal 2560 px breit sein darf.
Wenn du zunächst deine Bilder auf das richtige Maß verkleinert hast, komprimierst du sie im nächsten Schritt für die Anzeige im Web.
Beim Komprimieren reduzierst du die Bildqualität und damit die Dateigröße.
Dies ist nur ein Richtwert. Sei hier nicht „päpstlicher als der Papst“. Deine wichtigen Fotos, die über die gesamte Breite deiner Website gehen, sind natürlich größer als Fotos, die im Fließtext eingebunden sind.
Sobald du ein Bild in WordPress hochgeladen hast, werden dir entsprechenden Daten wie Dateityp, Dateigröße und Abmessungen angezeigt.
Wenn du bei den Dateigrößen deiner hochgeladenen Bilder hohe MB- oder sogar GB-Werte findest, solltest du unbedingt handeln!
Es gibt verschiedene (kostenlose) Tools, die du zum Verkleinern und Komprimieren deiner Bilder nutzen kannst. Profis nutzen Photoshop und es gibt kein besseres Tool, um Bilder u.a. zu bearbeiten, zurechtzuschneiden und zu komprimieren.
Deine Bilder zuschneiden und verkleinern kannst du aber ebenso gut mit dem kostenlosen Tool gimp.
Ein recht neues, kostenloses Online-Tool, das beides kann, ist Squoosh. Dieses Tool ist genial.
Du lädst das zu bearbeitende Foto hoch, um das Foto zu verkleinern und die Bilddatei direkt zu komprimieren. Die zu erreichende Dateigröße (in kb) wird dir dabei direkt angezeigt.
Und das Beste:
Du siehst in einer Vorschau auf deinem Bildschirm, wie das Bild nach der Komprimierung aussieht und kannst evtl. nachjustieren.
Je größer dein Bild in Pixel, desto stärker kannst du es komprimieren. Vor allem dann, wenn du es als Hintergrundbild ggf. mit Farbüberlagerung zur Darstellung von Text oder anderen Inhalten nutzen willst. Dann kannst du dein Bild gut und gerne auf 20 % des eigentlichen Dateiformats bringen.
Wenn du Fotografin, Designerin, etc. bist, sind hochauflösende Bilder und Fotos dein Business. Hier solltest du dann abwägen, was dir wichtiger ist: Hammerscharfe Fotos oder eine schnelle Website.
Schließlich wäre es ja zu einfach, wenn du nicht auch hier eine Auswahl hättest. Bitte beachte, dass die folgende Aufzählung nur eine Auswahl der gängigsten Formate darstellt und keinen Anspruch auf Vollständigkeit erfüllt. Da gibt es noch viel mehr – aber wir bleiben hier mal pragmatisch.
Dies ist eines der am weitesten verbreiteten Formate im Internet für das Hochladen von Fotos. JPG-Fotos sind komprimiert und haben eine geringe Dateigröße. Allerdings werden sie manchmal verpixelt dargestellt.
Dieses Format hat eine eingebaute Transparenz und wird für Bilder/Fotos mit einem transparenten Hintergrund genutzt. PNGs eignen sich besonders gut für Grafiken oder auch für dein Website-Logo.
Dieses Format benötigst du hauptsächlich für animierte Fotos und Grafiken. Auch dieses Format lässt sich gut komprimieren.
Was ist denn das nun wieder? Dieses Format komprimiert deine Bilder noch effektiver. Die Dateien werden noch kleiner, aber die Qualität bleibt gleich. Und deine Seite wird (im Regelfall) noch schneller …
Dieses Format kann sowohl Bilder mit transparentem Hintergrund als auch animierte Grafiken darstellen. Mit dem Online-Tool „Squoosh“ kannst du deine Bilder auch in dieses Format umwandeln. Am besten testest du es einfach mal.
WebP wird aktuell von folgenden Browsern unterstützt: Chrome, Microsoft Edge, Firefox, Opera und Safari. Um zu entscheiden, ob dieses Format für deine Bilder geeignet ist, schaust du am besten in deine Statistiken, um herauszufinden, mit welchen Browsern deine BesucherInnen auf deine Website kommen.
Aber das ist ein anderes Thema.
Über die Autorin:
Silke König, M.A.
Silke König ist Webdesignerin, Online-Redakteurin und Business-Mentorin. Ihren ersten Artikel im Netz hat sie vor über 20 Jahren veröffentlicht, seit 2008 arbeitet sie mit WordPress und unterstützt Selbständige und Unternehmerinnen dabei, online bei ihrer Zielgruppe sichtbar zu werden.
Business-Websites, die verkaufen:
Mit klarem Design und genialem Content, der ins Hirn und Herz deiner Zielgruppe geht. Damit du genau die Menschen anziehst, die zu dir passen.
© Frau König, 2024
Liebe Silke, das hast du wieder einmal sehr ausführlich erklärt, sodass auch ich das verstehe. Vielen Dank für diesen wertvollen Blogbeitrag. Ich habe ihn mir abgespeichert und mir die PDF natürlich sofort geschnappt.
Yay, Katja, das freut mich riiiesig!
Das werde ich gleich mal checken;)
Schönen Montag
Aaron
Yay, das freut mich sehr, Aaron!
Liebe Grüße
Silke
Jetzt dachte ich bisher, dass ich die Bilder doppelt so groß hochladen muss, damit sie auch auf Retina-Displays scharf dargestellt werden… Oder hab ich da einen Denkfehler?
Liebe Anja,
die doppelte Größe gilt nur für dein Logo. Alle anderen Bilder kannst du nach der Übersicht berechnen.
Liebe Grüße
Silke
Liebe Frau König,
ich arbeite mit dem CANVA-Website-Tool. Diese Website hat ein Standardformat 1.366 x 768 Pixeln. Welche Größe sollten nun meine Fotos haben, wenn ich sie vollformatig einbinden will? An anderer Stelle habe ich gelesen: „Als Faustregel können Sie sich merken: geplante Darstellungsgröße x 2, jedoch maximal 3.000 Pixel Breite.“ Diese Aussage steht im Widerspruch zu Ihrem Kommentar vom 24.02.23/17:41. Oder übersehe ich etwas?
Mit besten Grüßen
Helmuth
Hallo lieber Helmuth,
zur Canva-Website kann ich leider gar nichts sagen, da das kein unabhängiges Tool ist. Aber das Standard-Format von 1366 px Breite scheint mir sehr gering zu sein. Die Aussage Darstellungsgröße x 2 und dann maximal 3000 px Breite ist ja Unsinn, wenn man sich die Displaygrößen anschaut. Standard ist 1920 px, wenn das Bild über die volle Breite geht. Wenn ich das verdoppen soll, bin ich ja weit über 3000. Wer sagt denn sowas? Wenn du ein Bild doppelt so groß einbindest, braucht das System viel Zeit, um das Bild in die richtige Größe herunterzurechnen. Damit wird die Website dann langsam.
Liebe Grüße
Silke
Liebe Silke,
ganz vielen Dank für die Rückmeldung. Ich mache mich gerade vertraut mit Webdesign-Dingen. Und da findet man im Internet unterschiedlichste „Rezepte“. Den Hinweis „Darstellungsgröße x 2“ habe ich z.B. unter https://app-bis-web.de/perfektes-bildformat-websites/ gefunden. Dort heißt es wortwörtlich: „Als Faustregel können Sie sich merken: geplante Darstellungsgröße x 2, jedoch maximal 3.000 Pixel Breite.“
Jetzt noch kurz zu CANVA. Das Standardformat mit 1.366 px Breite mag etwas begrenzt sein. Aber: Für den Hobby-Website-Bauer ist CANVA das beste und vor allem einfachste Programm, das ich bisher kennengelernt habe.
Auf meiner Website „helmuth-online.my.canva.site/1“ habe ich im Rahmen der CANVA-Standardstruktur (1.366 x 768) für meine Fotos einen Bereich von 840 x 534 px eingerichtet (maximale Bildhöhe bzw. Bildbreite). Da ich nun meine Fotos auf diesen Bereich abstimme (Minimierung der Bildgröße), möchte ich nochmals auf meine Ausgangsfrage zurückkommen – und Sie um eine Empfehlung bitten: Angenommen ich habe ein Foto im Format 840:534 (mit sehr hoher Auflösung) – soll ich dieses Foto dann auf 840 x 534 px herunterbrechen, oder empfiehlt es sich, die Pixelzahl zumindest etwas höher anzusetzen. In der zu Anfang genannten Quelle wird eine Erhöhung der Pixelzahl wie folgt begründet: „Auf diese Weise stellen Sie sicher, dass hochauflösende Displays die Bilder gestochen scharf darstellen, selbst wenn Sie komprimiert sind. Das trifft besonders auf fast alle modernen Smartphones sowie einige Notebooks zu.“
Ich hoffe, Sie können mir noch einmal helfen.
Ich verbleibe mit einem großen Dank und den besten Grüßen
Helmuth
Korrektur zu meiner Mitteilung vom 06.11.23/23:43:
Die korrekte Domain meiner Website lautet:
hvn-online.my.canva.site/1
Helmuth
Helmuth,
die Bilder müssen in der Größe eingebunden werden, in der sie angezeigt werden sollen. Da du nicht mit Bildern in voller Seitenbreite arbeitest, würde ich da jetzt keine Raketenwissenschaft raus machen.
Und: Da ich nicht mit Canva Website arbeite und das auch ausdrücklich nicht empfehle, möchte ich hierzu keine Tipps geben. Solange Ladezeit und Qualität der Bilder gut sind, ist doch alles okay.
Viele Grüße
Silke