Mitgliederversammlung 2017


Die diesjährige Mitgliederversammlung des Vereins SELFHTML e.V. findet am 7.10.2017 um 10:00 Uhr in Berlin statt.

Die Adresse des Tagungsortes sowie die geplante Tagesordnung entnehmt ihr bitte der Seite Mitgliederversammlung 2017.

Interessierte Gäste sind gern gesehen.

HTML/Tutorials/Bilder im Internet

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der ursprüngliche Artikel GIF oder JPEG aus dem aktuell.de.selfhtml-Bereich befasste sich mit der praktischen Anwendung der beiden Formate GIF und JPEG und zeigte, welches der Formate in welchen Fällen das geeignetere war.

Heute hat sich der Fokus verschoben. Niemand verwendet mehr Bilder in einer zu schlechten Qualität, sondern Bild-Dateien sind oft zu groß, sodass die Ladezeit der Seiten besonders auf mobilen Geräten mit beschränkter Bandbreite zu lange dauert.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihre Webseite mit Grafiken richtig aufwerten können.

Vorüberlegung: Verzierung oder Inhalt?[Bearbeiten]

Zuerst sollten Sie sich bei jeder Grafik immer fragen, ob diese inhaltliche Relevanz besitzt oder nur Verzierung ist.

Grafiken, die Teil des Inhalts sind, werden mit dem img-Element referenziert. Dabei verweisen Sie mit dem src-Attribut (oder mit srcset) auf die Bildquelle.

Zusätzlich ist die Angabe eines aussagekräftigen Alternativtextes im alt-Attribut erforderlich, für den Fall, dass die Bilder wegen fehlender Bandbreite oder aufgrund der Benutzung eines Screenreaders nicht angezeigt werden.

Beispiel: img-Element in HTML
<img src="norge.jpg" alt="norwegische Flagge vor blauem Himmel">

Grafiken, die Teil des Layouts sind und nur der Verzierung dienen, sollten über die CSS-Eigenschaft background-image eingebunden werden. Um Verzögerungen beim Laden zu vermeiden, sollten die Bild-Dateien so schlank wie möglich sein und in mehreren Größen vorhanden sein. Mittels media queries kann der Browser die Auflösung ermitteln und nur die passende Grafik abrufen.

Viele grafische Effekte können Sie mittlerweile ohne externe Hintergrundgrafiken realisieren:

Empfehlung:
  • Verzichten sie auf überflüssige, externe Bilder!
  • Nutzen Sie die Möglichkeiten von CSS. Gestalten Sie...

So sparen Sie einerseits HTTP-Requests und Ladezeit, andererseits stehen Hintergrundbilder mit festen Abmessungen einem responsivem Layout oft im Weg.

Rechtliches: Fotos präsentieren[Bearbeiten]

Die Metapher „Ein Bild sagt mehr als tausend Worte“ beschreibt den Mehrwert von Bildern gegenüber ausschließlichem Text. Trotzdem sollten Sie besondere Sorgfalt auf Bildauswahl und Form legen.

Woher nehmen und nicht stehlen?[Bearbeiten]

Im besten Fall haben Sie Fotos selbst geschossen und können sie passend bearbeiten. Falls Ihnen keine eigenen Bilder zur Verfügung stehen, können Sie auch auf professionelle Bilderdienste zurückgreifen. Allerdings sollten Sie die Rechte erwerben oder auf lizenzfreie Bilder zurückgreifen.

Dabei ist auch darauf zu achten, dass die auszuwählenden Bilder nicht schon von Mitbewerbern verwendet werden. In diesem Artikel (Webdesign für KMU – Teil 4: Die richtige Bildauswahl) von winlocal wird gut gezeigt, dass der Einsatz von Stockphotos zu einer Beliebigkeit führen kann, bei der die Webseite austauschbar und irrelevant wird.

Wie kann ich verhindern, dass meine Bilder geklaut werden?[Bearbeiten]

Dies geht ebenso wenig wie das Schützen von Quelltext. Wenn der Anwender eine Grafik im Web-Browser sieht, braucht er sie gar nicht mehr mit dem Kontextmenü und "Speichern unter" auf seinen Rechner zu kopieren, weil sie längst im Browser-Cache gespeichert ist.

Sie können eigene Bilder mit Wasserzeichen versehen. Dabei wird nach einem bestimmten Schlüssel ein Text in dem binären Bit-Salat einer Grafikdatei versteckt, z.B. ein Text, der Sie als Urheber der Grafik ausweist (das Verfahren wird als Steganographie bezeichnet). In der Grafik selbst sieht man nichts davon, doch im Zweifelsfall können Sie anhand des Wasserzeichens nachweisen, dass Sie der geistige Urheber der Grafik sind. Wasserzeichen können jedoch bei Grafikformaten, die mit Verlust komprimieren, wie etwa das im Web vielfach eingesetzte JPEG-Format, teilweise verloren gehen bzw. unleserlich werden.

Die richtige Größe[Bearbeiten]

Warum lädt mein Bild so langsam?[Bearbeiten]

Ein häufiger Fehler ist es, Bilder gleich von der Speicherkarte des Fotoapparats bzw. des Handys online zu stellen.

Empfehlung:

Welche Größe sollen Bilder im Web haben?[Bearbeiten]

Hierbei gibt es natürlich keine festen Werte. Allerdings haben sich einige Erfahrungswerte herauskristallisiert:

  • Wenn Sie Bilder mit Großansicht (z.B. in einer Galerie) anzeigen möchten, empfehlen sich Werte um die 1000px größte Seitenlänge.
  • Wenn Sie Bilder in einer Galerie ohne Großansicht anzeigen möchten, empfehlen sich Werte um die 500px größte Seitenlänge.
  • Wenn Sie Bilder einfach nur neben dem Text anzeigen möchten, empfehlen sich Werte um die 300px größte Seitenlänge.
  • Wenn Sie Bilder in einer Vorschau anzeigen möchten, empfehlen sich Werte von 100 - 200px Seitenlänge.
Empfehlung: Wenn Sie bei Thumbnails markante Ausschnitte von Details anstelle einer einfacher 1:1 Verkleinerung des „großen“ Bildes zeigen, wirkt die Vorschau spannender. Die Vergößerung sollte drastisch sein. Um die Details noch stärker zur Geltung zu bringen, können Sie das Vorschaubild noch einmal schärfen (unscharf maskieren).

Dies sind grobe Daumenwerte. Letztendlich hängt es von Bild selbst ab und wieviel Platz Ihnen zur Verfügung steht oder Sie dem Bild einräumen möchten.

Die Entwicklung geht natürlich immer weiter, heute ist von gestochen scharfen kleinen Displays bis hin zu 30-Zoll-Bildschirmen alles dabei. (siehe HTML/Tutorials/responsive Webdesign)

Weitere Hinweise finden Sie z.B. unter

Das richtige Format[Bearbeiten]

JPEG oder GIF[Bearbeiten]

Die hohe Anzahl von verschiedenen Farben, die in den meisten Fotos vorzufinden ist, trägt entscheidend zur Auswahl der Dateiformats bei: das GIF-Format besitzt eine Farbtabelle, welche höchsten 256 Farben aufnehmen kann. Das bedeutet, dass Sie erstens die Datenmenge nur durch die Reduzierung der Farben verringern können, und zweitens 256 Farben häufig zu wenig für ein ansprechendes Foto sind.

JPEG wiederum speichert mehr Farbinformationen ab, wodurch eine hohe Farbanzahl gewährleistet werden kann. Die eingebaute flexible Komprimierung ermöglicht zusätzlich eine Reduzierung der Dateigröße, ohne große Einschnitte in der Qualität zu machen.

Als Beispiel hier ein Foto mit einem blauen Himmel:

JPEG (200x270px ) 11.9 KB GIF (200x270px) 14,8 KB
Rastergrafik mit jpg Rastergrafik mit gif

Wie Sie hier sehen, ergeben sich gerade durch die reduzierte Anzahl der Farben bei GIF bei den Farbübergängen (Himmel und Teile der Flagge) hässliche Streifen. Die 256 verschiedenen Farben reichen einfach nicht aus, um einen gleichmäßigen Farbübergang darzustellen. Beim JPEG-Format tritt dieses Problem nicht bzw. erst bei sehr starker Komprimierung auf.

Die Dateigröße ist im Gegensatz zum GIF (14,8 KB) mit 11.9 KB auch noch deutlich kleiner. Das JPEG-Bild ist allerdings mit 50% komprimiert.

Kompression vs. Abmessungen[Bearbeiten]

Fotos werden im Allgemeinen als Rastergrafiken abgespeichert, in denen jeder Pixel einen bestimmten Farb- und Helligkeitswert hat. Damit die Datenmengen eines solchen Bitmap-Bildes nicht zu groß wird, werden diese Farbinformationen komprimiert. Das klappt nicht ganz verlustfrei, ist im allgemeinen aber zu verkraften.

JPEG (unkomprimiert) 71,0 KB JPEG (50% komprimiert) 11,9 KB    Ausschnitt-Vergrößerung
Rastergrafik unkomprimiert Rastergrafik komprimiert Ausschnitt

Das JPEG-Foto liefert bei 50% Komprimierung befriedigende Qualität. Die Farbübergänge am Himmel und an der Flagge erscheinen in allen Farben. In quadratischen Bereichen werden die Farbinformationen durch Mittelwertsberechnungen zusammengefasst.

Bei dieser Vergrößerung kann man aber auch deutlich einen der Nachteile von JPEG erkennen: Kanten und harte gerade Übergänge fransen mit zunehmender Komprimierung aus.

Je besser Sie die Qualität einstellen, desto kleiner werden diese quadratischen Bereiche und desto weniger wird der Nachteil sichtbar.

Hauptartikel: Grafik/Grafikformat

In Zeiten von pixelgenauen Layouts wurden Bilder auf die benötigten Maße zugeschnitten und mit dem width-Attribut ein fester Platz auf der Webseite freigehalten. Dies ist heute obsolet, da bei hochauflösenden Geräten Bild-Pixel und Geräte-Pixel voneinander abweichen. Deswegen sind passend zugeschnittene Bilder nun oft zu klein und wirken deshalb pixelig.

Empfehlung: Wenn Sie Rastergrafiken in größeren Abmessungen und einer hohen Kompression (30-40%) abspeichern, vermeiden Sie Artefakte und Verpixelungen. Viele Bilder sind aber auch bei einer Kompression von 25% noch akzeptabel.

Grafiken mit Texten[Bearbeiten]

Bei Texten stößt das JPEG-Format an seine Grenzen. Die Schrift wird unscharf dargestellt und an den Rändern der Buchstaben treten Störungen auf. Hier bietet sich für Rastergrafiken neben dem GIF- auch das PNG-Format an. PNG kann die gleiche Fülle an Farben darstellen wie JPEG, komprimiert aber verlustfrei. Dafür sind die Bilddateien meist größer als bei JPEG.


JPEG (10,90 KB) GIF (5,57 KB) PNG (8,78 KB)
Rastergrafik jpg Rastergrafik gif Rastergrafik png


Allerdings gilt das Ersetzen von Text in HTML durch Bilder (das sogenannte Image-Replacement) mittlerweile als verpönt.

Empfehlung:

Text sollte nie durch Grafiken ersetzt werden, da er sonst nicht von Suchmaschinen gefunden werden oder markiert werden kann.

Logos und Icons[Bearbeiten]

Kleine Icons aus JPEG- oder GIF-Grafiken wirken auf hochauflösenden Bildschirmen oft pixelig. Daneben sorgt eine Vielzahl von Grafiken für viele http-Requests, die die Ladezeit der Seite erhöhen.

Diagramme und Info-Grafiken können oft besser mit SVG realisiert werden.

Empfehlung: Erstellen Sie SVG-Icons. Sie sind immer gestochen scharf, skalierbar und können sogar bei größeren Viewport-Größen zusätzliche Details einblenden.
Erstellen Sie die Grafiken in einem Grafikprogramm wie Inkscape oder Illustrator und optimieren Sie sie.

Weblinks[Bearbeiten]

englisch: