Bildgrößen mit width/height, und wo Bilder herkommen dürfen
Bildgrößen mit width/height, und wo Bilder herkommen dürfen
~8 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026
In diesem Kapitel geht es um zwei ganz praktische Fragen: Wie steuere ich, wie groß ein Bild angezeigt wird? Und woher darf ich Bilder überhaupt nehmen?
Die Attribute width und height
Mit width und height kannst du die Anzeigegröße eines Bildes in Pixeln festlegen:
<img src="bilder/ball.jpg" alt="Ein weißer Fußball auf grünem Rasen" width="400" height="300">Ohne width/height zeigt der Browser das Bild in seiner tatsächlichen Originalgröße an - bei einem Foto von einer modernen Kamera oder einem Handy kann das riesig sein, oft deutlich größer als der Bildschirm. Mit width und height kannst du das Bild kleiner anzeigen lassen.
Das Seitenverhältnis beachten
Wichtig: Wenn du nur eines der beiden Attribute veränderst und dabei das Verhältnis von Breite zu Höhe des Originalbilds nicht beachtest, wird das Bild verzerrt (gestaucht oder gestreckt) angezeigt. Ein Bild, das im Original 1200 mal 800 Pixel groß ist, hat ein Verhältnis von 3 zu 2. Wenn du width="400" setzt, sollte height also ungefähr 267 sein (400 geteilt durch 3, mal 2), nicht irgendeine beliebige Zahl.
Tipp: Ein einfacher Trick: Setze nur width und lass height ganz weg. Der Browser berechnet die passende Höhe dann automatisch, ohne dass das Bild verzerrt wird. Das ist für Anfänger oft die sicherste Lösung.
<img src="bilder/ball.jpg" alt="Ein weißer Fußball auf grünem Rasen" width="400">Woher dürfen Bilder überhaupt kommen?
Das ist eine wichtige Frage, die viele Anfänger übersehen: Nicht jedes Bild, das man im Internet findet, darf man einfach auf der eigenen Webseite benutzen! Bilder haben, genau wie Musik oder Bücher, in der Regel ein Urheberrecht - jemand hat sie gemacht, und diese Person entscheidet, wer sie wie benutzen darf.
- Eigene Fotos: die sicherste Wahl - du hast sie selbst gemacht, also gehören sie dir.
- Webseiten mit ausdrücklich freien Bildern (zum Beispiel Unsplash oder Pexels): Diese Seiten stellen Fotos kostenlos und meist ohne besondere Bedingungen zur Verfügung.
- Bilder mit Creative-Commons-Lizenz: Manche Bilder darf man benutzen, muss dabei aber zum Beispiel den Namen des Fotografen nennen - schau immer genau nach, welche Bedingungen dabeistehen.
Achtung: Bilder, die einfach über eine Google-Bildersuche gefunden wurden, sind in den meisten Fällen nicht automatisch frei benutzbar, nur weil sie im Internet zu finden sind. Für dieses Tutorial und zum Üben ist das kein Problem, aber sobald eine Webseite wirklich online geht und von anderen Menschen gesehen wird, sollte man genau darauf achten, woher Bilder kommen.
Finns Bildergalerie vorbereiten
Leg dir für die nächsten Kapitel schon mal ein paar Bilder in deinen bilder-Ordner, zum Beispiel training.jpg, spiel.jpg und mannschaft.jpg - wir werden sie im Block über Tabellen und in der Bildergalerie später noch benutzen.