Planung Deiner Website – Teil 3 – Die Grafiken

Um die Seite optisch etwas aufzuwerten und ansprechender zu gestalten, sollte man den Texten die ein oder andere Grafik hinzufügen. Das lockert die Seite etwas auf und ist zugleich ein Blickfang – man sieht sozusagen „auf den ersten Blick“, worum es sich auf der Seite handelt.

Grafikformate für das Web gibt es gleich mehrere: PNG, JPG, GIF oder SVG – da fällt die Auswahl nicht immer ganz leicht. Was aber bedeuten eigentlich die ganzen Formate?

Eine JPG Datei  wird in der Regel für Fotos verwendet. Dieses Dateiformat eignet sich deshalb besonders gut, weil sich Dateien damit leicht komprimieren – sprich in der Dateigröße verkleinern – lassen und damit auch weniger Speicherplatz im Web verbrauchen.

PNG Dateien werden zumeist für transparente Grafiken verwendet, wenn der Hintergrund noch gut sichtbar sein soll bzw. sich dann eben automatisch dem Hintergrund der Webseite anpassen soll, wie das z.B. oftmals bei Logos der Fall ist. PNG Dateien haben allerdings den Nachteil, dass Sie sehr speicherintensiv sind.

Das GIF Format wird immer für animierte Grafiken verwendet. Es sind einfach mehrere Bilder, die dort hintereinander weg abgespult werden, wodurch der Animationseffekt entsteht. Je nach Bildgröße kann das natürlich auch sehr viel Speicherplatz in Anspruch nehmen. Oftmals greift man dann alternativ auf Flash Grafiken zurück (swf-Format). Nachteil: Wenn man das Flash Plugin nicht installiert hat, werden diese Grafiken nicht angezeigt!

SVG ist das neue Grafikformat, welches mit HTML5 seinen Einzug in das Web gehalten hat. Eine SVG Grafik wird nicht mit einem Bildbearbeitungsprogramm erstellt, sondern besteht aus komplizierten Berechnungen, welche vorab zumeist mit einem speziellen Editor programmiert werden. Der Vorteil von SVG Grafiken ist, dass diese skalierbar, also in der Größe beliebig veränderbar sind, ohne dass dies zu einer schlechten Darstellung auf der Webseite führt (siehe auch Vectorgrafiken).


Grafiken für das Web aufbereiten:

Grafiken für das Web

Grafiken für das Web

Bei einer Grafik für Deine Homepage solltest Du aufpassen, dass Du damit nicht zuviel Speicherplatz verbrauchst. Gerade im Bereich Fotos erlebe ich immer wieder, dass teilweise Originalbilder mit 3000px in der Breite eingebunden werden. Hat man Fotos mit der Digitalkamera aufgenommen, haben Sie oft solche Formate, es sei denn, man hat es gleich vorab  auf eine andere Größe eingestellt. Da ein Bildschirm in der Regel aber nur bis zu 1000px in der Breite hat, kann man diese Grafiken getrost um mindestens das Dreifache verkleinern. Bindet man die Bilder als Bildergalerie auf seiner Homepage ein, reichen oft auch 600 bis 800 px in der Breite. Ein Bild mit 3000px in der Breite kann schnell mal mehrere Megabytes verschlingen und das kann beim Aufrufen der Seite – je nach Internetverbindung – zu einem sehr langsamen Bildaufbau führen.

Ein sehr empfehlenswertes und einfaches Bildbearbeitungsprogramm ist hierbei Irfan View. Irfan View ist eigentlich ein Bildbetrachter, der automatisch die Bilder auf dem Computer als Vorschaubild anzeigt, es ist aber auch ganz nützlich für kleinere Arbeiten, wie z.B. Das Verändern der Größe, oder die Nachbearbeitung eines Bildes mit Schärfe, Helligkeit oder Kontrast. Zudem hat es den Vorteil, dass man damit auch große Mengen von Bilddateien gleichzeitig bearbeiten und konvertieren kann.

Irfan View ist komplett kostenlos und kann man sich hier herunterladen: http://www.irfanview.de/ Für dieses Programm gibt es auch noch Erweiterungen, sogenannte Plugins, die man sich dort ebenfalls herunter laden kann. Oben rechts auf der Anbieter Seite ist ein Button: „Deutsche Version“, darunter findet man nochmal eine ausführliche Beschreibung des Programms auf Deutsch.

Beim Einbinden der Grafiken sollte man dann wieder darauf achten, immer einen „Alt-Tag“ zu verwenden, mit dem man die Grafik kurz umschreibt, auch das erhöht wieder die Sichtbarkeit in den Suchmaschinen. Darüber hinaus kann man auch die einzelnen Grafiken schon mit einem aussagekräftigen Titel benennen und abspeichern – all das erhöht die Wahrscheinlichkeit, später in den Suchmaschinen damit einmal gefunden zu werden!


Bildersuche

Bildersuche

Bei der Verwendung von fremden Grafiken sollte man immer auch das Copyright beachten! Nicht jede Grafik, die Du im Web siehst, darfst Du auch automatisch für Deine eigenen Projekte verwenden. Du solltest Dich vorher immer vergewissern, ob diese Grafik auch frei verfügbar und auch für kommerzielle Zwecke eingesetzt werden darf.

Mittlerweile gibt es eine ganze Menge Webseiten mit frei verfügbaren, sogenannten lizenzierten Grafiken. Wenn Du also nicht Deine eigenen selbst erstellten Grafiken oder Fotos verwenden willst, kannst Du auf solche Bildquellen zurückgreifen. Es gibt viele kostenlose Anbieter in dem Bereich, für qualitativ hochwertigere Grafiken allerdings auch kostenpflichtige, im deutschsprachigen Raum  z.B. Fotolia. Zumeist ist es bei diesen Bildern so, dass Du irgendwo auf Deiner Website einen Verweis auf den Urheber machen musst, z.B. mit Website und Name des Autors.

Auf Pixabay kannst Du  lizenzfreie Grafiken komplett kostenlos und dazu noch ohne jede Verpflichtung herunterladen. Pixabay ist eine Community, auf der viele Hobbyfotografen und -Designer Ihre Werke kostenlos zur Verfügung stellen. Du kannst alle Pixabay-Bilder kostenlos und ohne Quellenangabe für private und kommerzielle Zwecke verwenden – sowohl online als auch für Print-Medien.

Ein Gedanke zu „Planung Deiner Website – Teil 3 – Die Grafiken

  1. Auf die Grafiken muss besonders bei responsive Webdesign besonders geachtet werden. Das kann jede Webagentur bestätigen. Wichtig ist auch, dass man korrektes Webdesign einsetzt. Dadurch steigert man die Aufmerksamkeit auf die eigene Seite. Wichtig ist bei Bildern auch noch, dass das Format und die Grösse problemlos vom Content Management System unterstützt werden. Dies sollte jedoch schon vorab geprüft werden, sodass keine Inhalte ohne Fotos und Bilder erstellt werden!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.