Medien: Bilder
Hinweis: Andere Medien (Videos und Audios) folgen später.
Aktivierungs-Fragen
Es sollen Bilder für eine Firmen-Website aufbereitet und eingefügt werden, welche Handys repariert.
Recherchiere zu den gängigen Bildformaten und überlege, welche Formate für folgende Bilder geeignet sind (+), welche nicht (-), und warum:
Es soll ein zweifarbiges Logo eingefügt werden. Die Anzeigegrösse ist je nach Gerät anders.
Auf der Teamseite sind Portraits aller Angestellten gewünscht.
Auf der Seite "Kontakt" soll ein animierter Briefkasten sein, wo ein Brief eingeworfen wird.
Im Footer werden Partner-Logos angezeigt. Die Grösse ist immer gleich.
Weitere Fragen:
Auf der Seite "Produkte" sollen Original-Bilder von Geräte-Herstellern eingefügt werden. Worauf ist dabei zu achten?
Was sind Vor- und Nachteile, wenn du die Bilder in hoher Qualität und Auflösung einfügst?
Rechte an Bildern & Inhalten
Alle Inhalte im Internet sind grundsätzlich urheberrechtlich geschützt und dürfen nicht öffentlich verbreitet werden. Das gilt für Musik, die zwar frei aus dem Web kopiert, aber nur im privaten Kreis abgespielt und weitergegeben werden darf, ebenso wie für Fotos: Als Desktop-Hintergrund, Schlafzimmerposter oder Illustration in einer E-Mail an Freunde darf man jedes Bild verwenden. Auf einer öffentlich zugänglichen Homepage aber eben nicht.
Somit sollten ein Website-Betreiber immer die nötigen Rechte für Bilder haben, welche auf seiner Website gezeigt werden. Mögliche Plattformen für den Erwerb von Bild-Lizenzen:
Daneben gibt es auch noch komplett kostenlose Bildportale. Meistens sind die Aufnahmen von Amateur- und Hobbyfotografen, die aber deshalb nicht schlechter sein müssen:
Bild-Formate
JPEG
JPEG oder JPG ist ein verlustreiches Bildformat von der Joint Photographic Experts Group.
Das JPG-Format verfügt über mehr mehrere Millionen Farben. Dies macht es zur idealen Wahl für die Anzeige von Fotografien im Web.
JPEG ist ein verlustreiches Bildformat. Die Kompression kann also dazu benutzt werden um die Dateigrösse zu reduzieren: Die Qualität bei einer Kompression von 60% ist meistens absolut ausreichend für das Web. Bei einem Kompressionsfaktor grösser als 75% kann es zu deutlichen Qualitätsverlusten kommen.
JPG-Kompression JPG-Bilder unterstützen keine Transparenz. Sollte ein Teil des Bildes somit transparent sein, eignet sich das JPG-Format nicht.
Anwendungsfall
Verwende JPEG für Fotos.
GIF
GIF steht für Graphics Interchange Format.
Das GIF-Format verfügt nur über 256 Farben, dadurch ist die Dateigrösse meistens entsprechend klein.
GIF-Kompression Das GIF-Format ist ein verlustfreies Bildformat, sofern das Original max. 256 Farbtöne hat.
Das GIF-Format unterstützt Transparenz - dabei gibt es jedoch keine Halbtransparenz (z. B. 50% weiss), sondern immer nur ganz oder garnicht.
Das GIF-Format unterstützt Animationen - darum kann es gut eingesetzt werden für repetierende, animierte Bilder wie Icons, Emoticons, Banner etc.
Eignet sich für einfache Grafiken mit wenig Farben, jedoch nicht für Fotografien.
Anwendungsfall
Verwende GIFs für Animationen oder Bilder, die wenige Farben enthalten und als GIF eine kleinere Dateigrösse aufweisen als als PNG.
PNG
PNG steht für Portable Network Graphics. Es ist eine alternative zum GIF-Format, welches vom W3C-Konsortium entwickelt wurde.
Wie das JPEG, verfügt das PNG über Millionen von Farben.
Wie das GIF, handelt es sich um einen verlustfreien Kompressionsalgorithmus.
Das PNG-Format unterstützt Transparenz - dabei gibt es die Möglichkeit für teiltransparente Pixel (75% - transparent; 25% - weiss). Es eignet sich deshalb für Bilder mit unterschiedlichen Transparenzstufen.
Es eignet sich daher für komplexe Bilder und Grafiken.
Anwendungsfall
Verwende PNGs nie für Fotos sondern nur für Illustrationen oder Icons. PNGs komprimieren Bilder mit grossen einfarbigen Flächen besonders gut.
SVG
SVG steht für Scalable Vector Graphics und ist eine XML-basiertes Vektordatei. Obwohl es bereits 2001 entwickelt wurde, wurde das Format erst in den letzten Jahren populär für den Einsatz im Web. Der Grund dafür lag in der schwachen Unterstützung der Webbrowsern für dieses Format. In der Zwischenzeit wird das SVG-Format von den meisten Browsern unterstützt - leider immer noch mit einigen Bugs.
Das SVG-Format ist weniger ein Bild aus Pixeln, als eine Bauanleitung für Vektoren um daraus ein Bild oder eine Grafik zu bauen. Es eignet sich deshalb vorallem für Grafiken wie Logos, Karten, Icons etc.
Da es sich um ein Vektor-Format handelt, können die Bilder beliebig und ohne Qualitätseinbussen skaliert werden.
SVG-Bilder unterstützen Animationen und können via CSS oder JavaScript animiert werden.
Bei komplexeren Bildern steigt die Dateigrösse von SVG-Bilder rasant an. Darum eignet sich das Format mehr für Grafiken, als für Fotografien.
Anwendungsfall
Verwende SVGs dann, wenn ein Bild in verschiedenen Grössen benötigt wird oder eine geringere Dateigrösse als bei PNGs oder GIFs erreicht werden kann. Achte bei der Verwendung im Web auf den Browser-Support.
WebP
Dieses Bildformat hat jedoch Web in seiner DNA: Es wurde für den Gebrauch im Internet (von Google) entwickelt.
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. … WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images … Lossless WebP supports transparency … at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG. -- WebP Website
Der Vorteil von WebP ist also, dass es die Vorzüge von JPG und PNG in einem Bildformat kombiniert - ohne dabei auf eine überdimensionale Dateigrösse zu wachsen.
Browser-Support: WebP ist relativ neu und wird noch nicht von allen Browsern unterstützt, insbesondere Browser-Versionen vor 2022. Siehe https://caniuse.com/webp. Dazu kann ein Fallback auf ein anderes Bildformat wie WebP oder JPEG implementiert werden.
AVIF
AVIF steht für AV1 Image File Format und ist ein modernes Bildformat, das auf dem AV1-Videokompressionsstandard basiert. Es wurde entwickelt, um eine noch höhere Effizienz als WebP und andere Bildformate wie JPEG oder PNG zu erreichen.
Vorteile von AVIF:
Hohe Kompressionseffizienz: AVIF-Bilder bieten eine hervorragende Bildqualität bei wesentlich kleineren Dateigrößen im Vergleich zu JPEG, PNG oder WebP.
Unterstützung für HDR: AVIF unterstützt High Dynamic Range (HDR), was es ideal für Bilder mit hohem Kontrastumfang macht.
Transparenz: Wie PNG und WebP unterstützt auch AVIF Transparenz, allerdings mit einer geringeren Dateigröße.
Farbtiefe: AVIF unterstützt Farbtiefen von bis zu 12 Bit pro Kanal, wodurch es detailreichere und lebendigere Bilder ermöglicht als ältere Formate.
Nachteile von AVIF:
Rendering-Geschwindigkeit: Die Codierung und Decodierung von AVIF-Bildern ist derzeit rechenintensiver als bei anderen Formaten, was zu längeren Ladezeiten führen kann.
Browser-Support: AVIF ist relativ neu und wird noch nicht von allen Browsern unterstützt, insbesondere Browser-Versionen vor 2023/2024. Siehe https://caniuse.com/avif. Dazu kann ein Fallback auf ein anderes Bildformat wie WebP oder JPEG implementiert werden.
Anwendungsfall
AVIF eignet sich hervorragend für Szenarien, in denen maximale Bildqualität bei minimaler Dateigröße gefragt ist, z. B. für Fotografien auf Websites, bei denen schnelle Ladezeiten entscheidend sind.
Links
Bild-Grössen & Qualität
Wichtig ist es nicht nur die Bilder im richtigen Bildformat bereitzustellen, sondern auch in einer angemessenen Grösse. Bilder sollten immer in der Grösse bereitgestellt werden, in der sie tatsächlich im Web verwendet werden.
Hier drei nützliche Werkzeuge: Mit Bulk Resize Photos können mehrere Fotos miteinander verarbeitet werden. Mit dem Online Image Editor kannst du einzelne Bilder online skalieren und zuschneiden. Mit TinyPNG kannst du Bilder komprimieren und Formate ändern.
Bei den meisten Bildformaten kann die Qualität = Komprimierung gewählt werden. Mit ca. 70% werden die Bilder meist deutlich kleiner, aber es ist noch kaum ein Qualitätsverlust sichtbar.
Responsive Bildgrössen
Für unterschiedliche Geräte kannst du seit ... unterschiedliche Bildgrössen und Auflösungen anbieten.
Dazu gibt es verschiedene Möglichkeiten. Eine empfehlenswerte ist das <picture>-Element:
Das <img>-Element wird genutzt, falls keine der gegebenen Media-Bedingungen zutrifft.
Tipp: Wenn Bilder das Layout sprengen
Bei responsiven Layouts kann es passieren, dass ein Bild grösser ist als der HTML-Container, in welchen es reinpassen sollte. Ein Bild ist beispielsweise 800px breit, in deinem Layout auf einem kleinen Gerät ist aber nur 400px Platz. Dies kann dein ganzes Layout "sprengen".
Einfache Abhilfe bringt eine simple CSS-Regel:
Dies verhindert, dass ein Bild jemals grösser werden kann als der Container, in welchen es rein passen sollte. Probiere es aus!
Ladegeschwindigkeit
Die zentrale Rolle der Ladegeschwindigkeit für eine Website zeigt folgendes Beispiel:
Nach mehr als zwei Sekunden Ladezeit erhöht sich die Absprungrate (Personen, welche die Website verlassen) um 12%.
Nach mehr als vier Sekunden Ladezeit erhöht sich die Absprungrate um 25%.
Mehr dazu auf www.tooltester.com/de/blog/website-ladezeit-statistiken
Der Grund für lange Ladezeiten sind häufig schlecht verarbeitete Medien (Bilder, Videos). Durchschnittlich machen Bilder mehr als 65% des Inhaltes einer Website aus.
Geschwindigkeitstests
Um die Geschwindigkeit einer Website zu testen gibt es unterschiedliche Tools. Hier zwei davon:
Optimierungsmöglichkeiten
Geeignetes Bildformat wählen
Auflösung auf wirklich benutzte Grösse ändern
Responsive Bildgrössen: Für kleine Geräte kleinere Bilder anbieten
Komprimierung erhöhen
CDN: Content Delivery Network nutzen
Lazy-Loading
Werden auf einer Seite viele Bilder angezeigt, ein Teil ev. erst beim Scrollen, können diese erst bei Bedarf nachgeladen werden. So wird nicht die ganze Seiten-Ladezeit ausgebremst. Dazu gibt es das Attribut loading="lazy":
Bild als Hintergrund
In Seiten-Headern oder für spezielle Effekte können Bilder als Hintergrund eingefügt werden.
Gestaltung: Hinter Text sollte aus Lesbarkeitsgründen meist kein Bild oder nur ein sehr kontrastarmes sein.
Detailierte Beschreibung der Möglichkeiten: drweb.de/background-image
Beispiel Bannerbild
Ein Bannerbild dient als Stimmungsbild und sollte im Querformat möglichst die ganze Breite.
Ausprobieren auf codepen.io
Ein Hintergrundbild nimmt nicht automatisch Platz ein. Deshalb definieren wir hier explizit die Höhe des Banners, danach das Hintergrundbild so, dass es die ganze Fläche des Containers abdeckt:
Platzhalter-Bilder
Häufige Situation in Projekten:
Für einen Kunden soll eine Website entworfen werden, er kann aber die Bilder noch nicht liefern. Da hast du 3 Möglichkeiten:
Nutze vorübergehend andere Bilder vom Kunden, z.B. von der alten Website.
Setze Platzhalter-Fotos (z.B. von picsum.photos) oder Platzhalter-Bilder mit Text (z.B. dummyimage.com) ein.
Sage dem Kunden, dass du erst weiter machen kannst, wenn er liefert. :-)
Das gleiche Problem kann mit fehlenden Texten auftreten. Dafür kannst du:
Alte oder erfundene Texte einfügen, die zum Kunden passen.
Blindtexte (ohne sinnvollen Inhalt) einsetzen: blindtextgenerator.de
Last updated
Was this helpful?