Grafiken
Das Einbauen von Grafiken auf Webseiten erfolgt über eine kleine Auswahl an Grafikformaten, die aber dafür von allen modernen Browsern unterstützt werden.
Der Einsatz der Grafikdateien unterscheidet sich je nach Zweck der Grafik.
JPG / JPEG
Der wohl bekannteste und am häufigsten eingesetzte Vertreter der Grafikformate ist das "JPG-Format".
Die Dateiendung ".jpg" kommt vom Namen JPEG, welches für das Gremium (Join Photographic Experts Group) steht. Üblicherweise werden Bilder von Digitalkameras oder Smartphones in diesem Dateiformat präsentiert.
PNG
PNG (Portable Network Graphics) ist eine Rastergrafik mit verlustfreier Datenkompression.
Diese Grafiken werden häufig eingesetzt, wenn eine Transparenz erforderlich ist. Damit sind die Bilder nicht zwanghaft 4-eckig, sondern können sich als Form in der Umgebung integrieren. Auch bei Grafiken mit relativ wenigen Farben ist das "png"-Format vorzuziehen.
GIF
Für kleine Animationen oder eine einfache Aneinanderreihung unterschiedlicher Bilder wird das "gif"-Format (Graphics Interchange Format) verwendet.
Mehrere kleine Bilddateien sind so in einer Datei zusammengefasst und können in Webbrowsern als Animation abgespielt werden.
SVG
SVG steht für Scalable Vector Graphics und ist das empfohlene Format für 2-dimensionale Vectorgrafiken.
SVG Grafiken basieren auf XML-Code und sind verlustfrei skalierbar.
Grafiken einfügen
Bilder werden mit dem <img>-Tag (image = Bild) aufgerufen und bekommen als Attribut die Angabe "src" (source = Quelle). worin der Dateipfad angegeben wird.
Das Attribut "alt" zeigt einen Alternativtext an, wenn das Bild aus irgendwelchen Gründen nicht geladen werden kann.
<img src="Bilder/Planet.jpg" alt="Planet im Weltall ohne Wasser als Skelett dargestellt. Künstler: Aenigmatis-3D">
Achtung!
"src" und "alt" sind Pflichtattribute
Das Attribut "alt" sollte das Bild beschreiben und das Attribut "src" verweist auf die Bilddatei, die eingebettet wird, egal ob als relativer oder absoluter Pfad.
Größe bestimmen
Für einen optimalen Seitenaufbau werden die Attribute "width" (Breite) und "height" (Höhe) bereits im <img>-Tag mit angegeben.
Dadurch weiß der Webbrowser, wie viel Platz er für die Grafik berücksichtigen muss und kann mit dem Seitenaufbau fortfahren, noch bevor er die Header-Information von der Grafikdatei selber erhalten hat.
<img src="Bilder/Planet.jpg" alt="Planet im Weltall ohne Wasser als Skelett dargestellt. Künstler: Aenigmatis-3D" width="640" height="360">
Die Angaben "width" und "height" werden für die Bilddarstellung empfohlen, sind aber nur optional.
Weiter mit Audio und Video