Die perfekten Bildgrößen für Deine Website – in 4 Schritten
Bilder gehören in eine Website, genauso wie Sauce Hollandaise zum Spargel. Sie zeigen,
- wer Du bist,
- lockern die Website auf,
- vermitteln Gefühle und Emotionen und
- bilden ab, was Du anbietest.
Kein anderes Medium kann in so kurzer Zeit die Aufmerksamkeit vollends auf sich lenken. Text sind zwar für Google und alle anderen Suchmaschinen wichtig. Allerdings verlangen Texte im Gegensatz zu Bildern dem Leser einen hohen Energieverbrauch ab.
Und wo wir gerade beim Thema Energieverbrauch sind. Der Trend, zu immer mehr und immer größeren Bildern ist bei vielen Webseiten zu beobachten. Doch Bilder in zu großer Datei haben einen elementaren Nachteil – sie verbrauchen Energie bzw. Datenvolumen. Das Ergebnis ist eine schlechte Ladezeit Deiner Website.
Oder hast Du Lust, Dir erst mal einen Kaffee zu kochen, während Du darauf wartest, dass eine Seite hochlädt.
havendo Tipp: Wichtig: Die Ladegeschwindigkeit (Page Speed) ist seit 2022 ein Rankingfaktor für Google.
Hier https://pagespeed.web.dev/ kannst Du Deine Website Geschwindigkeit messen und durch optimierte Bilder und weitere Hinweise verbessern. Du wirst nach der Optimierung sofort eindeutige Ergebnisse erzielen und Deine Leser eine bessere User Experience.
In diesem Blogartikel erfährst Du, wie Du Deine Website Bilder behandeln solltest, damit Du alle Vorteile nutzen kannst, sie weiterhin gut aussehen und nicht die Ladezeit Deiner Website beeinträchtigen. Denn, geht nicht, gibt’s nicht!
Bilder für Websites richtig erstellen – Die Grundlagen
Für die Bearbeitung Deiner Bilder unterscheidet man folgende Parameter, die alle eine Rolle spielen:
- Bildformat = wie das Bild gespeichert wird: JPG, PNG, GIF, SVG
- Bildgröße = Breite und Höhe des Bildes in Pixel, wie beispielsweise 400×300 px
- Dateigröße = Speichergröße in Kilobyte (KB) und Megabyte (MB)
Schritt 1
Das Format Deiner Bilder richtig wählen?
Überlege Dir zunächst, wo Du das Bild einsetzen möchtest.
Viele Designer setzen auf JPG. Es ist am geeignetsten, wenn Dir die Farbtreue und die Größe Deines Bildes sehr wichtig ist und komprimieren eher uninteressant.
Das Bildformat PNG wird im Gegenzug eher für Bilder verwendet, bei der die Größe irrelevant ist. PNG können relativ verlustfrei komprimiert werden, weshalb sie oft für Grafiken, Icons und Logos ins Spiel kommen. Dieses Bildformat lässt sich optimal für freigestellte, transparente Hintergründe verwenden.
SVG, ist eine Vektorgrafik, sie gehört zur ersten Wahl, wenn es um Logos oder Grafiken geht. Mit SVG (Scalable Vecor Graphics) lassen sich Bilder ohne Verluste zoomen. Dieses Bildformat ist jedoch nicht ohne Umwege für WordPress geeignet. Du benötigst dazu einen Umweg mit einem Plugin, wie bspw. WP SVG Images oder SVG Support.
GIF haben Ihr Revival auf einigen Social Media Plattformen wie LinkedIn. Aber auch bei WhatsApp sind es ein gern genutztes Tool. Hierbei werden Deine Bilder und Grafiken animiert und zu Bewegtbildern.
Schritt 2
Die richtige Dateigröße für Deine Bilder – wie viel KB darf ein Bild haben?
Folgende drei Hinweise zur Dateigröße solltest Du immer im Auge behalten:
Große Bilder, die sich über die volle Breite erstrecken, sollten maximal 130-250 KB groß sein.
Kleine Bilder etwa 50 KB.
Für Icons merke Dir die 10 KB Grenze.
Wenn Du diese Angaben beachtest, bist Du in Sachen Page Speed auf dem richtigen Weg.
Die Bildgrößen überprüfen
Warum sind die Bildgrößen im Web so wichtig?
Eine kleine goldene Regel vorab:
Je mehr Pixel ein Bild hat, desto größer ist die Bilddatei, die auf das Endgerät der Websitebesucher*innen heruntergeladen wird. Auf sehr vielen Seiten, zum Bsp. in Onlineshops werden jede Menge Fotos benutzt. Es müssen also viele Daten heruntergeladen werden, sodass Website-Bilder in der Größe angepasst werden müssen. Hier gilt die Devise, weniger ist mehr.
havendo Tipp:
Bei WordPress in der Mediathek kannst Du die Bildgröße sowohl einsehen als auch direkt ändern, ohne das CMS zu verlassen.
Die gängigsten Bildgrößen für die Verwendung auf Websites sind:
- 800x600px (Format 4:3)
- 1024x768px (Format 4:3)
- 1280x720px (Format 16:9) HD
- 1920x1080px (Format 16:9) Full-HD
Fotos mit einer Breite von 1920 Pixel und mehr, also dem Full-HD Format, solltest Du nur als Headerbild verwenden. Sie werden über die volle Breite des Bildschirms eingesetzt und müssen daher hochauflösend sein. Um die Dateigröße dieser Bilder weiter zu reduzieren, sind diese wie in diesem Artikel beschrieben zu komprimieren.
Noch eine Hilfestellung zur Orientierung:
- Wenn das Bild nicht vergrößert, angesehen werden soll und neben einem Text steht, empfiehlt sich eine Bildlänge von 200 bis 300 Pixel.
- Soll das Bild durch einen Klick vergrößert werden, solltest Du die Breite zwischen 600 und 2000 Pixel wählen.
- Für ein freistehendes Bild, das über die gesamte Breite der Website dargestellt werden soll, wähle zwischen 600 und 2000 Pixel.
Schritt 3
Die Bildqualität
Denke schon vor dem Hochladen daran, dass Deine Bilder nicht unscharf oder verzerrt sind, denn Bilder besser machen geht meistens nur mit kostenintensiven Produkten. Suche Deine Bilder deshalb sorgfältig aus, damit Du beim Bearbeiten der Bilder für Deine Website keine weiteren Qualitätsverluste einstecken musst.
Denn auch wenn Du noch so schön lächelst, hilft es nicht, wenn Deine Hand durch eine Bewegung verschwimmt. Es fällt Deinem Seitenbesucher sofort negativ auf und er wird woanders kaufen.
Eine Komprimierung schlechter Bilder macht, wie oben gesagt, diese leider auch nicht besser und auch nur bis zu einem gewissen Grad Sinn. Höchstwahrscheinlich hast Du es schon probiert, bist am Ergebnis gescheitert und deshalb hier auf der Seite gelandet.
Wir machen doch alle learning by doing.
Du kannst die Qualität Deiner Bild am besten in der Größe überprüfen, wie Du sie später auf Deine Website einbauen wirst. Also vergrößere oder verkleinere sie so weit wie möglich. Du bekommst dabei das richtige Gespürt für die optimale Bildergröße und wirst es in Zukunft viel leichter haben.
Überspringe diesen Schritt nicht, denn Du weißt ja Vorbeugen ist besser als… Ach Du weißt schon.
Schritt 4
Nun geht’s ans Optimieren fürs Internet
Zur Bildoptimierung eignen sich verschiedene kostenpflichtige und kostenlose Grafikprogramme wie Adobe Photoshop, Canva oder Microsoft Paint. Je nach Deinem Engagement auf den Tools, lassen sich gute bis sehr gute Ergebnisse erzielen.
Am einfachsten und effektivsten ist es, die Auflösung zu reduzieren, also die Anzahl der Pixel, die das Bild horizontal und vertikal hat. Viele Pixel lohnen sich nicht, da die wenigsten Nutzer*innen hochauflösende Bildschirme besitzen und bei Google die Devise Mobile first gilt.
Die Komprimierung der Bilder für Google und Co.
Viele Wege führen nach Rom. So auch bei der Komprimierung Deiner Bilder fürs Web.
Du kannst zwischen folgenden Tools, die sowohl online als auch direkt auf Deinem PC vorhanden sind, wählen.
Tools zur Bildoptimierung:
Photoshop: https://www.adobe.com/at/products/photoshop
Canva: https://www.canva.com/de_de/
MacBook: rechte Maustaste und dann den Reiter komprimieren wählen
Compressjpeg: https://compressjpeg.com/de/
Das geht schneller, als Speedy Gonzales laufen kann und verschafft Dir einen Mega Ladevorsprung.
Fazit:
Die perfekte Bildgröße fürs Web einzurichten ist kein Hexenwerk, wenn Du erst weißt, wie es geht. Im Grunde genommen musst Du nur die Bildmasse, die Bildgröße in KB und das Bildformat beachten. Weitere Tools helfen Dir anschließend bei der Komprimierung und Anpassung.
Viel Erfolg beim Optimieren Deiner Webseite!
Du benötigst Hilfe bei Deinem Online Marketing Projekt?
Leistungen von havendo
SEO (Suchmaschinenoptimierung)
Ist ein wichtiger Bestandteil jeder Online-Marketing-Strategie. Durch die Optimierung Deiner Website für Suchmaschinen wie Google erhöhst Du nicht nur die Sichtbarkeit Deiner Marke, sondern ziehst mehr potenzielle Kunden auf Deine Seite.
Mit unserem SEO-Service können wir sicherstellen, dass Deine Website für relevante Keywords optimiert ist und somit höher in den Suchergebnissen erscheint. Dadurch steigerst Du nicht nur Deine Online-Präsenz, sondern auch Deine Conversions und Umsätze.
Social Media Marketing
bietet eine hervorragende Möglichkeit, um mit Deiner Zielgruppe in Kontakt zu treten und effektiv zu interagieren. Ob Du Dich für gezielte Werbeaktionen oder organische Posts auf Plattformen wie TikTok, LinkedIn und Instagram entscheidest, wir unterstützen Dich bei der Optimierung Deiner Inhalte.
Mit unserem Social Media Marketing-Service garantieren wir, dass Deine Beiträge auf diesen Plattformen optimal aufbereitet sind und somit ein höheres Engagement sowie mehr Conversions generieren. Zögere nicht, Deine Präsenz in den sozialen Medien zu stärken und Deine Reichweite zu vergrößern!
Google Ads
Du möchtest Deine potenziellen Kunden im Netz schnell und gezielt ansprechen? Dann ist Google Ads genau das Richtige für Dich! Wir sorgen dafür, dass Deine Website bei relevanten Suchanfragen prominent ausgespielt wird.
Du kannst Dich auf uns verlassen, dass wir Deine Kampagnen optimieren und dafür sorgen, dass Du das beste Ergebnis aus Deinem Werbebudget herausholst. Also worauf wartest Du noch? Lass uns gemeinsam Deine Online-Präsenz auf das nächste Level bringen!
Webdesign
Hast Du schon eine professionelle Homepage? Wenn nicht, wird es höchste Zeit! Denn eine gut gestaltete Website ist wie Deine Visitenkarte im Business – sie kann den Unterschied zwischen Erfolg und Misserfolg ausmachen.
Mit unserem Webdesign-Service, der auf Wunsch einen Styleguide, Logo-Erstellung, Website-Texte und Fotos beinhaltet, sorgen wir dafür, dass Deine Website nicht nur schön aussieht, sondern auch benutzerfreundlich und suchmaschinenoptimiert ist.
Gewinne das Vertrauen Deiner potenziellen Kunden und punkte bei den Suchmaschinen – mach Dich bereit für den Erfolg im Online-Business!
Zufriedene Kunden von havendo
Unsere weiteren Dienstleistungen für Dich:
Interessante und neuste Blogbeiträge für Dein Online Marketing:
SEO (Suchmaschinen-optimierung)
Webdesign Agentur
TikTok Agentur
