Alle Browser können Bilder im .gif .png und .jpg/.jpeg Format anzeigen. Für andere Formate benötigen Browser besondere Plug-Ins. Sie können sich nicht darauf verlassen, dass Anwender diese Plugins installiert haben.
So gut wie alle aktuellen Browser zeigen das - neue - webp Format für Fotos an.
Empfohlen vom W3C - World Wide Web Consortium - sind für selbsterstellte Grafiken "Scalable Vector Graphics" .svg. SVG Code lässt sich mit HTML 5 in allen aktuellen Browsern anzeigen. Vorteil: .svg Grafiken verlieren nicht an Qualität, wenn man ihre Größe ändert. Bei unterschiedlichen Bildschirmgrößen und Benutzern, die in ihrem Browser die Anzeige größer zoomen, spielt dies eine wichtige Rolle. Nachteil: Benutzer mit älteren Browsern sehen diese Bilder nicht und man muss für sie Alternativen anbieten.
Sie können .svg Grafiken erzeugen mit dem kostenlos verfügbaren Open Source Programm Inkscape oder Sie können den Programm-Code direkt in die HTML schreiben, bzw. mit Javascript oder PHP erzeugen.
Für Fotografien eignet sich im allgemeinen das .jpg/.jpeg Format, für mit Grafikprogrammen selbst "gemalte" Bilder das .gif oder .png Format, das weniger Farbabstufungen darstellt. Bei .gif .png und .svg Formaten ist es möglich, Grafiken mit einem transparenten Hintergrund abzuspeichern.
Fotos können lange Ladezeiten verursachen, man sollte sie daher, soweit die Qualität es zulässt, komprimieren und die Bilder auf die verwendete Größe zuschneiden (z.B. mit Irfanview, Photoscape, Gimp oder Photoshop, eine Auswahl kostenfrei verfügbarer Bildbearbeitungsprogramme finden Sie hier)
In Ihrem HTML Dokument zeigen Sie .jpg/jpeg Bilder, .png bzw. gif Grafiken mit der folgenden Angabe an:
<img src="bild.jpg" alt="mein Bild" width="100" height="100">
(bild.jpg befindet sich in obigem Beispiel in demselben Ordner wie das HTML Dokument) .
Die Breiten- und Höhen-Angabe erhalten Sie über das Bildbearbeitungsprogramm oder den Browser. Die Angabe alt="" signalisiert der Sprachausgabe von Browsern, worum es bei dem Bild geht. Lassen Sie die Angabe zwischen den beiden Anführungszeichen leer, weiß der Browser, dass es sich um ein rein gestalterisches Element handelt. Mit der Angabe title="" können Sie einen sogenannten "tooltip" erzeugen, der erscheint, wenn ein Benutzer mit dem Mauszeiger über das Bild fährt.
Animationen lassen sich mit .svg programmieren. Mit .gif können Sie Animationen wie im "Daumenkino" erzeugen, die Bilder werden schnell nacheinander angezeigt und erzeugen die Illusion einer Bewegung. Animierte .gifs lassen sich mit einem Open Source Programm wie photoscape erzeugen.