Tutorial 8: Bilder für Ihre Homepage
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Tutorial 8: Bilder für Ihre Homepage – Teil 1 Jedem Betreiber einer eigenen Homepage ist bekannt, dass man die Bilder, die man im Internet anbieten möchte, nicht einfach eins zu eins von der Digitalkamera, dem Scanner, oder dem Grafikprogramm nehmen und in seine Seiten einbinden soll. Selbst wenn die Originaldateien in den gängigen Web-Browsern überhaupt angezeigt werden, sind die Dateien meist noch viel zu groß, um in angemessener Zeit vom Benutzer geladen werden zu können. Und natürlich passen sie oft nicht wirklich in die Seiten, in denen sie eingebunden werden sollen. Doch warum stellt das Medium Internet so ganz andere Anforderungen an Grafiken, und warum können auch heutzutage die Bilder im Internet nicht einfach so dargestellt werden, wie sie z. B. auf den gedruckten Fotoabzügen auf Hochglanzpapier zu sehen sind? Hat denn inzwischen nicht fast jeder einen schnellen Internetzugang und moderne Hardware zu Hause? Die Gründe dafür, dass für Bilder im Web nach wie vor andere Regeln gelten als für Fotoabzüge und sonstige gedruckte Grafiken, hängen mit den technischen Eigenheiten des Mediums zusammen. Wenn man die Bilder für seine Homepage also optimieren möchte, lohnt es sich, einen Einblick in das Zusammenspiel der Faktoren zu erhalten, die Bilder im Internet überhaupt möglich machen. Pixel und Auflösung – was genau steckt dahinter? Sie können im Internet nur digitale Bilder anbieten. Im Gegensatz zu analogen Bildern sind digitale Grafiken immer aus einzelnen Bildpunkten aufgebaut, den sog. Pixeln. Pixel ist ein Kunstwort für "Picture Element": ein Bildpunkt als kleinstes Element eines digitalen Bildes. Eine Grafik, die z. B. 300 Pixel in der Breite und 500 Pixel in der Höhe hat, besteht aus 500 Zeilen mit je 300 Bildpunkten, den einzelnen Pixeln. Sie können sich das Ganze getrost als ein Raster bzw. ein Gitternetz vorstellen, denn im Grunde genommen ist es genau das. Wenn Sie sich eine Grafik am Bildschirm ansehen und den Zoomfaktor sehr stark erhöhen, können Sie irgendwann genau erkennen, dass auch die komplexesten und detailreichsten Bilder letztlich aus Pixeln, kleinen Quadraten, die genau eine Farbe haben, aufgebaut sind. Pixelansicht bei sehr großem Zoomfaktor Als Auflösung bezeichnet man die Anzahl der Pixel insgesamt. Bei Grafiken für das Web wird sie meist nicht in der absoluten Größe, sondern als Produkt aus Breite mal Höhe angegeben. In unserem Beispiel also hätte das Bild eine Auflösung von 300x500 Pixeln. Dass das insgesamt 150.000 Pixel ergibt, ist für das Web gar nicht so wichtig, wie wir weiter unten sehen werden. Welchen Einfluss hat die Bildschirmauflösung? Die Bildschirmauflösung gibt an, aus wie vielen horizontalen und vertikalen Pixel sich das Monitorbild zusammensetzt. Vor einigen Jahren waren das 640x480 Pixel, danach 800x600 Pixel und heute haben die meisten Monitore eine Auflösung von 1024x768 Pixeln bzw. 1200x1048 Pixeln bei Flat- Screens. Generell kann man sagen, je höher die Bildschirmauflösung, desto kleiner wirken die Grafiken auf den Betrachter. Dieses Phänomen kann man sich leicht veranschaulichen. Stellen Sie sich vor, Sie haben eine Grafik mit 300x500 Pixeln. Bei einer Bildschirmauflösung von 640x480 Pixeln würde beinahe die Hälfte der gesamten Anzeigefläche von dem Bild eingenommen, und in der Länge könnte es gar nicht vollständig dargestellt werden: Der Betrachter müsste scrollen. www.homepage.t-online.de 1
Verhältnis zwischen Bild und Monitor bei 640x480 Pixeln Bildschirmauflösung am Beispiel eines Bildes mit 300x500 Pixeln Auf einem Bildschirm mit einer Auflösung von 1200x1048 Pixeln dagegen, nimmt das gleiche Foto sehr viel weniger Platz ein. Obwohl es natürlich auch 300x500 Pixel groß ist. Verhältnis zwischen Bild und Monitor bei 1200x1048 Pixeln Bildschirmauflösung am Beispiel eines Bildes mit 300x500 Pixeln Wie Sie sehen ist allein schon der Gesamteindruck ein ganz anderer. Die unterschiedlichen Bildschirmauflösungen wirken hier ähnlich wie eine Zoomfunktion: Je größer die Auflösung, desto weniger Platz nimmt eine Grafik auf dem Monitor ein. Dadurch wirkt sie u. U. kleiner. Andererseits besteht bei geringen Bildschirmauflösungen eher die Gefahr, dass Grafiken grob und 'pixelig' wirken, einfach weil ein Pixel auf dem Monitor mehr Platz einnimmt. Wenn Sie dann noch bedenken, dass die Monitore Ihrer Besucher unterschiedliche Größen haben, die zwar meist mit den gewählten Auflösungen zusammenhängen, aber nicht zwangsläufig die Wahl bestimmen, haben Sie den wichtigsten Unterschied zwischen Bildern in elektronischen Medien und Bildern im Print erfasst: www.homepage.t-online.de 2
Die Auflösung einer Grafik lässt sich nicht in Längenmaße wie cm oder inch umrechnen. Die physikalische Größe, die ein Pixel einnimmt, hängt immer vom jeweiligen Ausgabegerät und den dort geltenden Einstellungen, v. a. der Bildschirmauflösung, ab. Was bedeutet das nun für den ambitionierten Web-Designer? Die wichtigste Schlussfolgerung bleibt die, dass Sie den Besuchern Ihrer Homepage keinen Gefallen tun, wenn Sie z. B. die Bilder in Ihrer Bildergalerie in höchster Auflösung anbieten, ohne sie vorher in einem Bildbearbeitungsprogramm zu verkleinern. Ein hochwertiges Foto, das im Bildbearbeitungsprogramm eine Auflösung von mehreren Tausend Pixeln in Länge und Breite aufweist, würde auf allen Bildschirmen erst mal viel zu groß dargestellt, so dass endlos gescrollt werden muss. Es gibt zwar die Möglichkeit, bei der Einbindung des Bildes im HTML-Code die Breite und Länge anzugeben: Damit überlassen Sie es aber dem Browser des Nutzers, das Bild für Sie zu verkleinern, was u. U. zu starken Qualitätseinbußen führt. Und zudem muss das Bild trotzdem erst mal in aller Pracht – und Dateigröße – heruntergeladen werden; was selbst bei DSL-Anschlüssen noch unnötig lange dauern könnte und bei Modem-Anschlüssen fast schon unzumutbar ist. Da der Betrachter in dem Fall auch keinen Mehrwert von den Daten hat, sollten Sie es ihm nicht erst gar nicht zumuten. Jedes Bildbearbeitungsprogramm bietet die Option zum Verkleinern von Bildern. Unter welchem Menüpunkt sie genau zu finden ist, unterscheidet sich natürlich von Programm zu Programm. Bei Ulead PhotoImpact 12 SE z. B. finden Sie sie unter "Einstellungen / Größe ändern". Anpassung der Bildgröße am Beispiel von Ulead PhotoImpact SE 12 Welche Optionen Ihnen zur Veränderung der Bildgröße zur Verfügung stehen, hängt auch vom jeweiligen Bildbearbeitungsprogramm ab. Bei PhotoImpact haben Sie z. B. die Möglichkeit, die Proportionen automatisch erhalten zu lassen und den Vorgang für die Art der Veränderung – z. B. Vergrößerung oder Verkleinerung – optimieren zu lassen. www.homepage.t-online.de 3
Anpassung der Bildgröße am Beispiel von Ulead PhotoImpact SE 12 Unser Tipp: Es hat sich bewährt, wenn die Webseite an sich schon so gestaltet ist, dass sie nicht den ganzen zur Verfügung stehenden Platz im Browser einnimmt, sondern auf 800x600 oder 1024x768 Pixel optimiert ist. Das heißt konkret, der Platz rechts daneben wird nicht in Anspruch genommen. Viele professionelle Webseiten nutzen diesen Bereich deswegen auch, um Werbebanner und nicht ganz zum Thema gehörende Angebote zu platzieren. Eine Begrenzung in der Breite kommt auch dem normalen Lesefluss der meisten Menschen entgegen: Allzu lange Zeilen ermüden das Auge eher als kurze Zeilen. Für die Einbettung von Bildern und Logos bietet eine festgelegte Breite den Vorteil, dass Sie die Proportionen auf Ihren Seiten besser abschätzen können und so Ihr Design bei möglichst vielen Betrachtern gut zur Wirkung kommt. Wenn Sie Fotoshows und Bildergalerien anbieten möchten, kann es auch sinnvoll sein, diese in Popup-Fenstern aufzurufen. Damit geben Sie Ihren Bildern einen Rahmen, dessen Größe Sie in Pixeln festlegen. Wenn Sie Fotoshows und Bildergalerien anbieten möchten, kann es auch sinnvoll sein, die Bilder vor der Einbindung in eine annähernd gleiche Größe zu bringen. So vermeiden Sie ein andauerndes Springen in der Bildgröße und das Betrachten wird für den Besucher deutlich angenehmer. Was ist Farbtiefe und wann ist sie wichtig? Sowohl Dateigröße als auch Qualität einer Grafik hängen neben der Anzahl der Pixel auch von der Farbtiefe ab. Die Farbtiefe in Bit ist ein Maß für die Qualität einer Grafik. Mit einer Farbtiefe von 1 Bit kann nur zwischen 21 Zuständen unterschieden werden (meistens Schwarz und Weiß, d. h. jedes Pixel ist entweder schwarz oder weiß). Bei einer Farbtiefe von 8 Bit können schon 28 = 256 verschiedene Farben dargestellt werden (z. B. bei GIF, PNG-8-Dateien). Wenn für jeden Farbkanal (Rot, Grün und Blau) jeweils 8 Bit zur Verfügung stehen, erhält man eine Farbtiefe von 24 Bit oder 224= 16,7 Millionen Farben (z. B. bei JPG, PNG-24-Dateien). Aufgrund der Tatsache, dass JPEG-Dateien eine Farbtiefe von 24 Bit aufweisen, GIF-Dateien dagegen nur eine Farbtiefe von 8 Bit, ist neben den unterschiedlichen Kompressionsverfahren mit ein Grund dafür, dass für die Wahl des Grafikformats, also des Dateityps, folgende Faustregel gilt: Fotos sollten Sie als JPEG-Dateien speichern, Logos und Schriftzüge als GIF-Dateien. Ein weiterer Unterschied zwischen den beiden gängigen Bildformaten im Web ist auch, dass in GIF- Dateien Transparenzen, also durchsichtige Bereiche, abgespeichert werden können. Dies ist auch im www.homepage.t-online.de 4
neueren, immer beliebter werdenden Dateiformat PNG möglich, allerdings kann der Internet Explorer
Version 6 dieses Format nicht darstellen. Das ist leider einer der Gründe, warum sich dieses Format
nur langsam durchsetzt.
Wenn Sie das Dateiformat PNG verwenden wollen, haben Sie auch die Wahl zwischen einer Farbtiefe
von 24 Bit und 8 Bit. Für viele Grafiken wie Logos und kleine Symbole reicht eine Farbtiefe von 8 Bit
vollkommen aus. Dadurch werden die Dateigrößen der Bilddateien klein gehalten und die Ladezeit
Ihrer Seiten optimiert.
Viele Browser können auch weitere Grafikformate darstellen, z. B. Bitmap-Dateien. Allerdings ist es
nicht empfehlenswert, von dieser Möglichkeit Gebrauch zu machen, denn nur bei den sog.
Webformaten, also GIF, JPEG und PNG können Sie davon ausgehen, dass sie von jedem Browser
dargestellt werden und dass die Bilder speziell für das Internet optimiert werden. Wenn Sie die
Dateigröße einer Bitmap-Datei mit der einer JPEG-Datei vergleichen, werden Sie feststellen, dass der
Unterschied enorm ist. Wobei die JPEG-Dateien in den allermeisten Fällen – zumindest bei der
Betrachtung am Bildschirm – keine nennenswerten Qualitätsverluste aufweisen.
Quellen zum Nachlesen und Nachschlagen: Ressourcen im Internet
• Weitere Informationen zu Bildauflösung finden Sie auch auf wikipedia:
http://de.wikipedia.org/wiki/Bildaufl%C3%B6sung
• Kostenlose Bildbearbeitungsprogramme zum Download finden Sie unter
www.softwareload.de
Empfehlenswert ist z. B. Paint.Net (http://download.softwareload.de/Paint.NET/23699)
• Im Internet werden zahlreiche Einsteigerseminare für die Arbeit mit Photoshop angeboten,
z. B. auch http://www.drweb.de/photoshop-seminar/index.shtml
• Auf dieser Webseite finden Sie auch weitere Infos zur Wahl des richtigen Grafikformats für
das Web: http://www.drweb.de/grafikgrundlagen/grundlagen_2.shtml
• Eine kurze Definition der Webformate und weiterer Grafikformate finden Sie auch auf
SELFHTML, einem sehr empfehlenswerten Nachschlagewerk für Webdesigner:
http://de.selfhtml.org/grafik/formate.htm
www.homepage.t-online.de 5Sie können auch lesen
