HTML-Anleitung, - Internetseiten selbst erstellen, für Anfänger, Domain, Provider, Webseiten ins Netz stellen, eigene Webseite selbst erstellen, eigene Homepage selbst erstellen : Header, Domain, Provider, Suchmaschinen-Ranking,, Ladezeit

ob nicht ganz auf sie verzichtet werden kann,
wie weit sie sich verkleinern lässt, ohne dass man kaum noch etwas erkennen kann,
wie viele Farben oder Graustufen wirklich benötigt werden,
welches Bildformat (.jpg oder .png) im konkreten Fall die kleinere Bilddatei ergibt.

Auf jeden Fall ist zu beachten, dass viele Grafiken mit für sich allein akzeptabler Dateigröße gemeinsam trotzdem lange Ladezeiten zur Folge haben können.

Bei Grafiken ist grundsätzlich zu unterscheiden zwischen solchen, bei denen kaum 2 nebeneinander liegende Pixel die gleiche Farbe haben (z.B. Fotos) und solchen, die von größeren gleichfarbigen Flächen beherrscht werden (Textscans, einfache Visitenkarten, Linien-, Säulen-, Balken- und Tortendiagramme, schematische Zeichnungen etc.).

Fotos sehen in der Regel als .jpg besser aus (es sei denn, ein gewisser "Postereffekt" ist erwünscht) und ergeben auch die kleineren Dateien. Beim Abspeichern einer Grafik als .jpg kann man in der Regel die Bildqualität angeben. Geringere Qualität bedeutet kleinere Datei. Hier muss ggfs. durch Ausprobieren ein annehmbarer Kompromiss zwischen geringer Dateigröße und noch guter Bildqualität gefunden werden.

Textscans, Diagramme usw. geraten als .jpg bereits bei 100% Bildqualität etwas unscharf und sehen bei geringerer Bildqualität zunehmend fleckig und unsauber aus. Deshalb sollte man solche Grafiken niemals als .jpg, sondern stets als .png (auch .gif (achtung, Patentschutz!) oder .tif geht) speichern. Die .png-Grafiken sind qualitativ ebenso gut wie die betreffenden Originalgrafiken (z.B. *.bmp) und ihre Dateien sind zudem ganz erheblich kleiner als die der entsprechenden .jpg-Grafiken.

Wenn eine Grafik trotz optimaler Wahl von Dateiformat und Bildqualität immer noch größenmäßig die Schamgrenze übersteigt, kann man zunächst ein Vorausbild niedriger Qualität laden, auf dem schon mal ungefähr zu sehen ist, wie's mal werden soll. Dann wird das Vorausbild langsam durch das gute Bild ersetzt:

<IMG SRC="Bild1.jpg" LOWSRC="Vorausbild1.jpg">

(Leider muss man immer wieder feststellen, dass diese grundlegenden Kenntnisse über Grafikformate von vielen, gerade auch professionellen, Webdesignern nicht beherrscht werden. Ein weiterer, in Webseiten sehr häufig anzutreffender Fehler besteht darin, Fotos mit den Standardeinstellungen des Scanners einzuscannen. Dabei geraten sie meist zu dunkel und zu kontrastreich (große tiefschwarze Flächen). Bereits beim Einscannen sollte ggfs. zumindest die Helligkeit heraufgesetzt werden. Ein Wenig Herumprobieren führt oft zu wesentlich präsentableren Fotos für die Webseite.)

Text ist zwar nicht so speicherintensiv wie Grafik, dafür dauert jedoch das Lesen seine Zeit. Wer, kurz gesagt, sich kurz fasst, hält die Lesezeit seiner Leserschaft in erträglichen Grenzen. Texte also ruhig noch einmal durcharbeiten und kürzen, wo immer es geht.

Einfache Grafiken (Liniendiagramme, Säulendiagramme) zur Veranschaulichung von Zusammenhängen können (zu Opas Zeiten üblich und die einzige Möglichkeit überhaupt bei Kleincomputern) mit Hilfe von Textzeichen dargestellt werden. Zusätzlicher Vorteil: Diese Grafiken bleiben sogar beim Speichern als Textdatei noch erhalten.

Beispiel:

Belastung der Fantasiebolzen in Abhängigkeit von der Geschwindigkeit (in % der Nennlast)<BR>

<PRE>
<FONT FACE="Courier">
<B>


100% -                                                     O
     -                                                     O
     -                                                    O
     -                                                    O
 80% -                                                   O
     -                                                  O
     -                                                 O
     -                                               O
 60% -                                           O
     -                                      O
     -                          O
     -             O
 40% -       O
     -    O
     -  O
     - O
 20% -O
     -
     -
     -
  0% -!.........!.........!.........!.........!.........!......
      20        30        40        50        60        70
                               Geschwindigkeit in km/h

bewirkt mit nur 2,4 kByte das folgende kleine Wunderwerk:

221

Bananen

35	Orangen

168

Ananas

78	Maracujas

140

Papayas

108

Mangos

100

150

200

250

Bild 2.3.4: Importe von tropischen Früchten nach Deutschland 2002 in 1000 t

Gerade bei längeren Seiten mit mehreren solchen Grafiken kann auf diese Weise erheblicher Speicherplatz eingespart werden: je Grafik ca. 10 bis 20 kByte. Geringer Nachteil: Die Zahlen müssen von Hand angepasst werden. Der Quelltext muss dagegen nicht mehr selbst editiert werden, da er ja auf dieser Seite zum Kopieren bereit steht.

3.6. Quellen

Die Quellen entsprechen im Wesentlichen den in den einzelnen Kapiteln aufgeführten Links. Im Übrigen sei auf die Quellenangaben in den ersten 2 Kapiteln verwiesen.

(c) Heiner Grimm, Clausthal-Zellerfeld
Diese Anleitung zum Erstellen von Internetseiten in HTML darf zum Gebrauch im privaten Bereich und an nicht gewerblichen Schulen frei vervielfältigt und weitergegeben werden, sofern sie dabei vollständig und unverändert bleibt. Jedweder Gebrauch zu gewerblichen Zwecken bedarf einer Lizenzierung durch den Autor.

[ Homepage (Seitenübersicht/Sitemap) ] [ Downloads ] [ Impressum ] [ Gästebuch ]

Erstellen von Internetseiten (Webseiten, Homepage) in HTML Anleitung für Anfänger Teil 3: Ins Internet: Header, Domain, Provider, Suchmaschinen-Ranking, Ladezeit

Erstellen von Internetseiten (Webseiten, Homepage) in HTML
Anleitung für Anfänger Teil 3: Ins Internet: Header, Domain, Provider, Suchmaschinen-Ranking, Ladezeit