Icon-Größen und warum SVG keine Lösung ist – Teil 3/3

Dies ist mein dritter und letzter Artikel in meiner Serie über Anwendungs-Icons und -Logos. Diesmal schreibe ich über die Größe der Icons und warum wir darauf achten sollten. Zugegeben, hier geht es ziemlich um Perfektion, aber ich zeige eine leicht erreichbare und gute Optimierung die es wert ist. Seht Euch diese beiden Bilder an:

Sie zeigen das gleiche Icon. Genau das gleich Icon. Wirklich. Und beide zeigen das Bild mit 32×32 Pixeln.

Icon-Größen

Nochmal zur Wiederholung, wozu dienen Icons: Es handelt sich um eine ikonische, grafische Darstellung eines Logos, die besonders für kleine Größen optimiert ist, wie Favicons, kleine Logos oder Softwareanwendungs-Icons. Sie sind für sehr kleine Größen gedacht, traditionell bis runter zu 16×16 Pixel. Bei höher aufgelösten Bildschirmen ist diese superkleine Größe nicht mehr ganz so relevant. Deshalb habe ich für mein obiges Beispiel 32×32 gewählt. Diese Icons sollen also für solch kleinen Größen funktionieren. Ja, wir erstellen ausdrücklich Icons für diese kleinen Größen. Und genau das ist mein Argument, dass wir uns die Mühe machen sollten, die Grafiken auch für genau diese Größen zu optimieren, die wir anstreben, wenn wie das schon machen: 16×16, 24×24, 32×32, 48×48 und 64×64, traditionell.

Worin besteht nun der Unterschied zwischen den beiden obigen Bildern? Lassen Sie mich ohne zusätzliche Interpolation hineinzoomen, um den Unterschied deutlicher zu machen:

Das linke Bild ist das Referenzbild, das ich aus dem Clipart übernommen habe. Es zeigt genau das, was ich zeigen möchte, und stammt beispielsweise aus einer externen Designquelle. Aber die Linien stimmen nicht mit dem Pixelraster überein. Daher führt die Anti-Aliasing-Interpolation zu dem unscharfen Bild. Das rechte Bild ist die gleiche Grafik, aber alle Linienscheitelpunkte wurden leicht verschoben, um sie genau am Pixelraster auszurichten. Das Ergebnis ist ein viel schärferes Aussehen. Und der Aufwand ist minimal. Es genügt, das Symbol zu duplizieren und ein paar Eckpunkte in Ihrem Lieblingsgrafikprogramm zu verschieben und auf dem Pixelraster einschnappen zu lassen. Das ist es auf jeden Fall wert.

Ok, können wir nicht einfach für 16×16 optimieren und gut ist?

Nein. Zum einen ist 16×16 sehr, sehr klein, und wie oben geschrieben, verliert es im Zeitalter der hochauflösenden Displays an Bedeutung. Ähnlich wie bei der Abstraktion von einem Logo zu einem Icon, wie in meinem ersten Artikel dieser Serie beschrieben, vereinfachen viele Icons und entfernen Details, wenn sie von 32×32 Pixel großen Versionen auf die 16×16 Pixel großen Versionen heruntergehen:

Und der zweite Grund sind die Zwischengrößen, die berüchtigten 24×24 Pixel. Das ist ein Skalierungsfaktor von 1,5 gegenüber der 16×16-Version. Jede Linie könnte wieder in den Zwischenpixeln landen und verschwimmen, wenn man einfach hochskaliert.

Es ist also sinnvoll, mehrere Größen des Symbols zu erstellen, wobei jede Größe eine optimierte Platzierung der Eckpunkte der Grafik aufweist. Je nach Komplexität der Symbolgrafik ist eine weitere Hochskalierung irgendwann irrelevant und kann automatisch erfolgen. Die Größe von 64×64 Pixeln ist ein traditioneller Punkt dafür.

Ich persönlich versuche normalerweise, Icons mit 32×32 Pixeln zu entwerfen. Die 64×64-Pixel- und 256×256-Pixel-Versionen sind dann automatische Upscales, werden aber immer ausdrücklich in die Icon-Dateien aufgenommen. Die drei traditionellen Größen, die noch fehlen, 16×16, 24×24 und 48×48 Pixel, werden manuell optimiert, damit sie schärfer aussehen. Natürlich ist dieser Ansatz nur ein Ausgangspunkt, und manchmal hat die Referenz eine andere Größe.

Die geraden Linien

Es geht also nur um gerade horizontale und vertikale Linien, denn nur diese können perfekt mit dem Pixelraster übereinstimmen? Nein. Jede Form verliert an Details und wird bei kleineren Größen zunehmend unschärfer. Ich habe oben geschrieben, dass die Verringerung der grafischen Details bei einer Verkleinerung notwendig sein könnte. Das gilt für alle Formen. Und es kann nicht nur eine _Reduzierung_ sein. Manchmal kann eine Änderung oder sogar ein vollständiger Ersatz einer Form sinnvoll sein, wie im obigen Beispiel. Insbesondere bei der Verkleinerung auf 16×16 Pixel sind die Konzepte der Pixelkunst mit ihrer Reduzierung der meisten Details und der besonderen Betonung anderer Details eine Überlegung wert:

Das rechte Bild zeigt das Clipart-Original. Das mittlere Bild zeigt die Vektorgrafik des 16×16 Pixel großen Bildes auf der linken Seite. Schauen Sie sich den Riemen des Helms an. Dieser ist überhaupt nicht mehr gebogen. Stattdessen werden ein paar volle Pixel für die Gesamtform und ein paar teilweise gefüllte Pixel für ein kontrolliertes Anti-Aliasing verwendet.

Zusammenfassung

Icons sind als sehr kleine Darstellungen eines Logos und für Ihre Anwendung, Webseite oder ähnliches gedacht. Da dies ihr Zweck ist, sollten wir darauf achten, sie auch für diese Größen zu optimieren!

• Formen, insbesondere, aber nicht ausschließlich, horizontale und vertikale Linien, sollten genau an den Grenzen des Pixelrasters platziert werden, um Unschärfen aufgrund von Interpolation zu vermeiden.
• Die 16×16-, 24×24-, 32×32- und 48×48-Pixel-Versionen eines Symbols profitieren am meisten von einer manuellen Optimierung, vielleicht sogar von einer Reduzierung der Grafikdetails oder einer Änderung der Form.
• Was auch immer wir tun, wir sollten immer die Qualität im Auge behalten.

So könnte ein SVG, das nur ein Bild in einer bestimmten Größe darstellt, als Datenquelle für Ikonenbilder verwendet werden. Aber wenn es für alle Größen verwendet wird, wird die visuelle Qualität bei einigen Größen immer schlechter sein als bei expliziten pixelbasierten Grafiken, die für diese spezifische Größe optimiert sind.

Artikelserie

• #1 – Artikelserie zu Application-Icons
• #2 – Icon-Farben und Hintergrund
• #3 – Icon-Größen und warum SVG keine Lösung ist