Ein echter Hingucker: Bilder für’s Web richtig bearbeiten
Zu groß, zu klein, verschwommen – so bringen Sie Ihr Web-Foto in die richtigen Maße.
Bilder für’s Internet bearbeiten: Hier bekommen Sie einen Überblick
Sie haben ein schönes Bild gemacht und möchten das auf Ihre Internetseite stellen? Dazu sollten Sie das Bild vorher bearbeiten. Einheitliche Bildgrößen auf Ihrer Internetseite sorgen für Struktur. Außerdem ist die Größe der Bilddatei wichtig, denn je größer das Bild, desto länger lädt die Seite. Auch das Dateiformat und der Bildausschnitt sollten Sie beachten. Hier bekommen Sie einen Überblick, wie Sie Ihre Bilder für Ihre Internetseite optimal bearbeiten können.
Die optimale Bildgröße für das Internet
Der aktuelle Trend geht dahin: je mehr Bilder und je größer sie sind, desto schöner wird die Internetseite. Allerdings gilt auch, je größer das Bild, desto länger dauert die Ladezeit. Bei einer schlechten Internetverbindung und ungeduldigen LeserInnen, kann eine lange Wartezeit dafür sorgen, dass sie Ihre Webseite schnell wieder wegklicken. Auch für Ihre Auffindbarkeit im Netz ist eine kurze Ladezeit wichtig: je schneller Ihre Seite lädt, desto höher werden Sie im Suchmaschinenranking einsortiert. Wenn Sie mehr zum Thema Suchmaschinenoptimierung (SEO) erfahren möchten, empfehle ich Ihnen diesen Artikel.
Die Bildgröße beschreibt das Volumen des Bildes. Dabei sind die Bildgröße und die Dateigröße miteinander verknüpft. Schauen wir uns das ganze doch im Detail an:
Was sagt die Dateigröße aus?
Die Dateigröße sagt aus, über wie viele Bytes (Kilobyte oder Megabyte) ein Bild verfügt. Kurzum: wie viel Speicherplatz braucht das Bild?Aber was heißen diese Einheiten überhaupt? Damit Sie nicht in Schleudern kommen, hier eine kleine Übersicht:
Wenn Sie diese ganzen Zahlen jetzt auch mehr verwirren als weiterbringen, dann wären wir im Mathe-Unterricht die besten Freunde geworden. Ich versuche es etwas anschaulicher.
- Kilobyte: Websites, E-Mails und Textdokumente bewegen sich (im Idealfall) in diesem Bereich. Eine Diskette kann bis zu 1440 KB speichern
- Megabyte: Fotos von Digitalkameras oder zum Beispiel digitale Musik werden in dieser Größe abgespeichert. Auf eine CD passen ca. 700 MB
- Gigabyte: in dieser Größenordnung befinden sich digitale Videos oder zum Beispiel die Datensicherung Ihres PCs. Auf eine DVD passen bis zu 4,7 GB
In diesem Fall heißt die Devise: weniger ist mehr. Möchten Sie ein Bild innerhalb Ihres Textes einbinden, sollte Ihr Bild eine Größe von 200 KB nicht überschreiten.
Diese Bildmaße sind ideal für Ihre Website
Die Bildgröße beschreibt die Anzahl der Pixel. Je mehr Pixel, desto größer ist Ihr Bild. Je mehr Pixel pro Zoll, desto höher die Auflösung.
Als Maximalgröße für Ihr Bild im Netz sollten Sie 2000px nicht überschreiten. Die ideale Größe liegt zwischen 600px und 2000px.
Hier einige Beispiele:
- Soll das Bild neben einem Text stehen und nicht vergrößert angesehen werden, empfiehlt sich eine Bildlänge von 200 bis 300 Pixeln
- Wenn das Bild durch einen Klick vergrößert werden soll, sollten Sie die Breite zwischen 600 und 2000 Pixel auswählen.
- Wenn ein freistehendes Bild über die gesamte Breite einer Webseite angezeigt werden soll, wählen Sie zwischen 600 und 2000 Pixel aus.
Dieses Bild zum Beispiel hat die Maße 640px x 400px:
Beispielbild: Kilianskirche in Heilbronn.
Zum Vergleich: Dasselbe Bild mit den Maßen 320px x 200px:
Beispielbild 2: Kilianskirche in Heilbronn mit den Maßen 320×200 Pixel.
Wenn Sie diese Vorgaben einhalten, können Sie garantieren, dass die Seite zügig lädt. Auch, wenn Sie mobil vom Smartphone aufgerufen wird.
Sie können Bilder mit allen gängigen Fotobearbeitungsprogrammen komprimieren, zuschneiden oder verändern. Eine kostenlose Bildbearbeitungssoftware ist zum Beispiel IrfanView. Eine Anleitung zu dem Programm können Sie hier finden.
Tipp: Wenn Sie sich jetzt fragen, woher weiß ich denn wie groß mein Bild ist und welche Dateigröße es hat – ganz leicht. Sie klicken mit Ihrer rechten Maustaste auf das Bild, dass Sie gerne bearbeiten möchten. Unter dem Reiter „Eigenschaften“ wird Ihnen die Größe angezeigt. Wenn Sie jetzt im oberen Reiter des neu geöffneten Fenster auf „Details“ klicken, sehen Sie auch die Pixel-Angaben.
Im richtigen Dateiformat abspeichern
Wenn Sie Ihr Bild abspeichern möchten, zeigt Ihnen Ihr Bildbearbeitungsprogramm vermutlich unzählige Dateiformate an. Für das Abspeichern im Web sind für Sie vor allem JPG oder PNG Dateien wichtig.
JPG oder auch JPEG
Dieses Format ist das bekannteste Fotoformat. Wenn Sie zum Beispiel eine Digitalkamera haben, dann hat diese Ihre Bilder bereits im JPG-Format abgespeichert. Die Abkürzung JPG steht übrigens für „Joint Photographic Experts Group“.
JPG-Bilder eignen sich für Online-Anwendungen, wenn Fotos z. B. im Web zum Einsatz kommen. Die Dateigröße fällt gering aus, ohne dass Sie dabei zu hohen Qualitätsverlust verzeichnen müsst. Auch für Vorschaubilder, die per E-Mail versandt werden, eignet sich das Format oder – in hoher Auflösung abgespeichert – für den Druck. Hierbei aber nie ein kleines Bild hochrechnen. Die Bildinformationen werden bei JPGs während der Komprimierung gelöscht und können beim Vergrößern nicht mehr hergestellt werden.
Tipp: Bei einem JPG-Format empfehlen wir eine Komprimierung von circa 60 bis 75 Prozent. Aber achten Sie darauf, dass ihr Bild keine „Schlieren“ bekommt.
Das Bild oben zeigt eine niedrigere Qualität beim Abspeichern des Bildes – Achtung hier sind Schlieren entstanden. Das Bild unten ist das Originalbild.
PNG
Vielleicht ist Ihnen auch schon mal die Formatendung .png aufgefallen? Das ist neben JPG das zweithäufigste Bildformat, das im Netz verwendet wird. Auch dieses Format kommt aus dem Englischen und steht für „Portable Network Graphic“. Genau wie das JPG-Bild kann es in Maßen komprimiert (verkleinert) werden, ohne sichtbaren Qualitätsverlust. Das Format löst den Verkleinerungsvorgang dadurch, dass dem Bild Farbanteile entnommen werden. Das merken Sie, wenn Sie ein Bild sehr stark komprimieren, dadurch verliert es an Farbelementen und es wirkt unnatürlich.
PNG-Bilder eigenen sich für Webdesigns, Logos, Illustrationen und für Grafiken. Man kann sie sehr stark komprimieren und dann mit geringen Dateigrößen hantieren. Wenn man mit Bildern arbeitet, in denen weniger detailreiche Farben und Elemente vorkommen, eignet sich dieses Format ebenfalls gut. Der größte Vorteil von PNGs ist, dass solche Bilder mit transparentem Hintergrund eingesetzt werden können. Als PNG abgespeicherte Illustrationen und Designs lassen sich ohne Probleme über Hintergründe legen. Fotos lassen sich besser und mit kleinerer Dateigröße als JPG speichern.
Autorin: Eva Rudolf
Keine Tipps mehr verpassen und bequem per E-Mail zugeschickt bekommen:
⊗ 1 x pro Monat ⊗ jederzeit kündbar ⊗ Keine Datenweitergabe an Dritte
Newsletter-Anmeldung
„*“ zeigt erforderliche Felder an
Bitte überarbeitet den den kompletten Abschnitt „Im richtigen Dateiformat abspeichern“. Ich lese dort kaum etwas richtiges, bzw. nur halb-wahres. Wichtig ist hierbei die Nennung des Alphakanals bei PNG. Auch die verlustfreie und verlustbehaftete Kompression sollten erklärt werden.
Ein blindes Raten zum JPG-Format zeugt von mangelndem Verständnis der beiden Formate und sollte bitte nicht an Leser weitergegeben werden.
Lieber Herr RiskIt,
danke für Ihre Rückmeldung. Für unsere Leserinnen und Leser ist es einfach nur wichtig zu erfahren, wie sie Ihre Fotos von ihrer Digitalkamera webtauglich bekommen. Deshalb ist die Erläuterung der Bildformate sehr reduziert. Auch wären hier Ausführungen zu Kompressionsalgorithmen, den verschiedenen Farbtiefen usw. nur verwirrend. Es ist etwas übertrieben zu sagen, der Abschnitt enthält kaum richtige Informationen. Sie haben jedoch recht, dass ein paar Punkte ergänzt werden können, was wir bei den beiden Bildformaten getan haben.
Beste Grüße aus dem Medienhaus
Mir hat der Artikel sehr weiter geholfen!
Vielen Dank!
Das Support Team meiner Web-Software hatte mir die Frage zum Bildformat nur mit “there is no general rule” beantwortet, womit ich so schlau war wie vorher. Jetzt habe ich die genauen Eckdaten und kann meine Bilder entsprechend anpassen, denn zur Zeit lädt alles noch viel zu langsam und heutzutage hat niemand mehr Zeit oder Geduld, um sich auf dem Bildschirm eine Sanduhr anzusehen!
Viele Grüße aus Australien!
Liebe Stefanie, das freut uns sehr, schön, dass wir mit dem Artikel weiterhelfen konnten! Herzliche Grüße aus dem Schwabenländle nach Australien
Es gibt nichts besseres als PhotoShop! )) Ich nutze alte Version und Optimierungsmöglichkeiten sond mehr als ausreichend für einen normalen „Ottoverbraucher“.
Kurz und bündig, vor allem sehr hilfreich. Vielen Dank.
Vielen Dank!
Bilder im Internet habe nur Pixel. Die Angabe der Auflösung in dpi spielt keine Rolle.
600×600 px sind online immer gleich, egal ob 72, 150 oder 300 dpi.
Oder habt ihr im Quelltext schon mal was von dpi gelesen? NEIN, dort gibt es nur px!
Das dpi Maß dient ausschließlich dazu um zu bestimmen, wie groß in mm/cm das Bild im Druck wird.
Bsp:
Flyer druckt man in der Regel in 300dpi, DIN A0 Plakate nur in 150, Großformat meist in nur 50-75! Dementsprechend groß kann ein Bild im jeweiligen Format gedruckt werden.
Die Auflösung hängt natürlich unmittelbar mit der Bildgröße zusammen, insofern ist sie nicht ganz unerheblich. Danke für den Hinweis mit der Auflösung, das haben wir im Artikel entsprechend angepasst.