@@Htaccess24

Link: https://www.htaccess24.de/html/lernen/

Im Abschnitt HTML Bilder/Grafiken heißt es: „Ich finde, das PNG-Format ist das, was ich am meisten verwende.“ – Das ist für die Leser irrelevant und sollte keineswegs suggerieren, dass es auch das sein sollte, was sie am meisten verwenden sollten.

„Das Format unterstützt viele Farben …“ – PNG-24 tut das. PNG-8 unterstützt ebenso wie GIF eine Farbpalette aus bis zu 256 Farben.

„… vor allem aber Transparenz.“ – PNG-24 unterstützt echte Alpha-Transparenz. PNG-8 unterstützt ebenso wie GIF nur 100% transparent bzw. 100% opak.

„Es eignet sich besonders gut fürs Webdesign“ – PNG-8 eignet sich (wie GIF) für Grafiken mit wenigen Farben: Icons, Logos u.ä. – also in etwa genau dafür, wo sich Pixelgrafiken gar nicht so eignen, sondern Vektorgrafiken.

Wenn man wirklich mal Alpha-Transparenz braucht (und keine Vektorgrafik verwenden kann), kann PNG-24 Mittel der Wahl sein. Aber Vorsicht: Auf die Dateigröße achten!

Für Photos u.a. Grafiken mit vielen Farben und sanften Farbverläufen ist PNG-24 nicht geeignet, dafür ist JPEG (mit E) das richtige Format.

Siehe Das richtige Grafikformat für den richtigen Zweck.

Im SELFHTML-Raum gab es auch einmal einen guten Artikel dazu. Leider hab ich verpasst, den erhalten zu lassen. Die jetzigen Artikel im Wiki decken den ursprünglich vorhandenen Inhalt leider nicht ab.

(@Matthias Apsel @Matthias Scharwies Wie war das eigentlich ausgegangen? Kann der Artikel wiederhergestellt werden? Im Wiki? Im Blog?)

„Der <img alt=““ /> HTML Befehl“ – Von „Befehl“ und Deppenleerzeichen abgesehen: Auch das src-Attribut ist Pflicht. Und hier sollten – im Gegensatz zu natürlichsprachigem Text – " stehen, nicht “.

„Das alt-Attribut sollte für eine kurze Bildbeschreibung verwendet werden. Ich empfehle dir, für die Bildbeschreibung maximal 100 Zeichen zu setzen“ – Wichtiger als die Länge ist der sinnvolle Inhalt. Der Alternativtext soll eben das ausdrücken, was die Grafik ausdrückt, für den Fall, dass der Nutzer die Grafik nicht sehen kann. Bei einer Textgrafik wird das der enthaltene Text sein. Bei einem Logo sowas wie alt="Example-dot-com-Logo". Wenn das Logo als Link zur Startseite fungiert: alt="Example-dot-com-Logo – Link zur Startseite".

Bei Twitter machen Textgrafiken sogar eher dann Sinn, wenn der Alternativtext länger ist als 140 Zeichen, siehe Beispiel.

„Das schöne an diesem Element [picture] ist, dass man mehrere Bildquellen angeben kann und der Browser die für sich beste Option wählt.“ – Dafür braucht man nicht unbedingt das picture-Element; das kann man schon mit dem srcset-Attribut. picture kommt bei art direction in Spiel, d.h. bspw. wenn für verschiedene Viewportgrößen jeweils andere Bildausschnitte präsentiert werden sollen.

LLAP 🖖