✔ Entscheidungshilfe

[Alice]

Hallo Freunde.

Wie einige sicherlich schon mitbekommen haben, bin ich gerade dabei mein Uralt Design auf den neusten Stand zu bringen.

Nun stehe ich vor folgender Frage:
Wie binde ich Grafiken (bzw. Icons) ein? Welche Methode?

1.) Standard Grafiken (PNG usw.)
2.) CSS-Sprites
3.) SVG-Sprites
4.) Fertige Icon-Webfont
5.) Eigenen Icon-Webfont aus SVG

Vorteile:
1.) Keine. Vielleicht einfach zu erstellen?
2.) Eine Grafik für 99% aller Grafiken.
3.) Eine Grafik für alles.
4.) Unendlich viele Icons.
5.) Flexibel.

Nachteile:
1.) Zuviele Request. Zuviel Traffic.
2.) Für eine Website absolut in Ordnung. Für Mobile Geräte usw. eher ungeeignet da teilweise verpixelt (Zoom).
3.) Ganz tolle Ergebnisse. Bin jedoch nicht ganz dahinter gestiegen wie es geht.
4.) Etwas unflexibel. Hoher "Erst-Traffic" beim laden des Fonts. Viele unnötige Icons.
5.) Muss erstellt werden.

Vorallem für Tablets und Smartphones möchte ich an einigen Stellen "Icons" verwenden.

Für welche Methode würdet ihr euch entscheiden und warum?

 

[SpiceLab]

Bis auf 3.) und 5.) kommt bei mir seit jeher der Rest zum Einsatz, je nachdem, was im Einzelfall opportun ist, und in welchem Umfang Grafiken einzubinden sind. Und mit dem Bootstrap-Framework stehen mir zudem schicke Glyphicons zur Auswahl.

Verpixelte CSS-Sprites sind mir auf mobilen Geräten trotz zoomen noch nicht untergekommen

 

[Jan-Frederik Stieler]

HI,
also ich arbeite meistens mit Iconfonts und lösche die nicht benötigten Icons raus.

Verpixelte CSS-Sprites sind mir auf mobilen Geräten trotz zoomen noch nicht untergekommen

Nun mir bisher nur auf eine mRetina display oder auf meinem 5K iMac. Also nicht wirklich zu berücksichtigen .

Um eigene Icon-Fonts zu erstellen kannst du https://icomoon.io/app verwenden falls du dich nicht mit der Schrifterstellung auskennst.
Für Logos verwende ich inzwischen aber auch SVG- Grafiken. Die Einbindung ist jedoch nicht ganz unproblematisch.

Grüße

 

[Alice]

Ich erstelle meine Icons und Grafiken immer mit Inkscape. Das hat viele praktische Vorteile.

- Reines SVG
- Kann in jeder größe ausgegeben werden (SVG->PNG)
- Beweis für "Copyright" Probleme

Jedenfalls habe ich auf der Startseite eine Grafik die 28x28px "groß" ist. Auf dem Desktop ("FullHD" Auflösung) sieht es super aus. Auf kleineren Monitoren auch. Selbst auf dem 4K sieht es gut aus, auch wenn etwas klein. Wobei ich nicht weiss, ob der wirklich im 4K-Modus läuft. Egal.

Für das Design habe ich folgendes eingebunden.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Nun wird die Seite irgendwie gezoomt wenn ich mit dem Handy drin bin. Sieht auch alles schick aus. Genau wie ich es wollte. Aber diese eine Grafik ist verpixelt. Jetzt nicht so schlimm das man einzelne Pixel sieht, aber man sieht, dass es nicht so scharf wie am Desktop ausschaut. So als würde man eine Webseite um eine Stude vergrössern mit Strg+Mausrad.

Nach dem ich gestern dieses Thema geschrieben habe, habe ich mal ausprobiert mein Logo zu einem Webfont (Icon) zu konvertieren. Es geht!

 

[Alice]

Hallo Leute.

Leider ist das ganze etwas schwieriger als ich dachte.

Im Detail:

1.) Standard Grafiken (PNG usw.)
Diese "Technik" kommt für mich überhaupt nicht in Frage.

2.) CSS-Sprites
Ich habe wirklich alles ausprobiert, aber ich muss mich wohl auch von dieser Technik lösen, wenn ich zufrieden sein will mit dem Ergebnis. CSS-Sprites sind ja nicht anderes als ein festgelegter ausschnitt einer Grafik. An der Qualität kann man nicht "schrauben". Sobald manuell oder automatisch gezoomt wird (mache ich als iPhone User immer und ich hatte jedes Modell) wird die Grafik leicht bis stark verpixelt. Eigentlich ganz logisch.

3.) SVG-Sprites
Auf meiner Suche nach der besten Umsetzung für "SVG-Sprites" kam mir eine Idee. Eigentlich zielt mein gesamter Post auf diese Technik ab...

SVG-Sprites werden anders als herkömmliche Sprites nicht nebeneinander oder untereinander erstellt und als SVG gespeichert. Richtigerweise werden die einzelnen "Grafiken" in Gruppen mit ID's eingefügt und per CSS (innerhalb der SVG) optisch deaktiviert. Die Grafiken werden quasi übereinander gestappelt.

Angesprochen werden die Grafiken über die ID.

Beispiel: background-image: url("style/image/sprite.svg#button");

Solange alle Grafiken die selbe größe haben, ist auch alles schön und gut, aber wenn die größen unterschiedlich sind, wird es problematisch.

Dann kam mir folgende Idee.

Ich habe eine PHP-Datei erstellt namens "sprite.php".

Der obere Abschnitt der PHP-Datei besteht aus PHP-Code. Der untere aus SVG. Angaben wie width, height usw. werden vom PHP-Code berechnet.

Ist die aufgerufene URL z.B. "sprite.php#button"... weiss das Skript, welche Grafik angefordert wird und setzt die richtigen Werte ein.

Ausprobiert und funktioniert Tadellos.

Wie ist eure Meinung dazu?

4.) Fertige Icon-Webfont
Diese Technik ist wirklich toll. ABER sobald es um Schattierungen geht, versagt diese Technik. Das ist wahrscheinlich auch der Grund warum die Foren-Icons hier im Forum als Grafik und nicht als Webfont-Icons eingebunden sind. Die Grafik würde sich recht einfach als Webfont-Icon erstellen lassen, jedoch ohne Schattierungen. Zwar kann man nachhelfen (CSS) z.B. mit "text-shadow" aber die Ergebnisse sind durchschnittlich bis Mangelhaft je nach Icon. Selbst bei nur einem Pixel (1px) wird bei einer meiner wichtigsten Icons das gesamte Icon mit der Schattierung "überworfen" was einfach nur blöd aussieht.

Fazit: Alles schön und gut, wenn man kompromisse eingeht wie z.B. Schattierungen.

5.) Eigenen Icon-Webfont aus SVG
Hier gilt das selbe wie in Punkt 4 auch. Der Unterschied ist ja nur, dass man die Icons selbst erstellt.

 

[SpiceLab]

Wenn Du Dich entschieden hast, ist doch alles gut und gesagt

 

[Alice]

Ergänzung:

Ich habe mal "das" Icon im SVG-Format in der gewünschten Ausgabegröße von 28x28 Pixel erstellt. Danach habe ich die SVG-Datei als Data-URI konvertiert und als "background-image" eingebunden.

Vorteile:
- Scheint mit allen Browsern zu funktionieren*
- Wird beim zoomen sogar schärfer
- Optisch 1A
- Keine zusätzlichen HTTP-Request

Nachteile:
- Quelltext nimmt ernorm zu
- Kein Caching (wird immer mit neu geladen wie das HTML)

* Als normales SVG ging es weder mit Safari, noch mit Opera auf meinem iPhone. Mit Data-URI geht es super.

@SpiceLab

Enschieden habe ich mich noch nicht.

 

[SpiceLab]

@SpiceLab

Enschieden habe ich mich noch nicht.

Also ich entnehme Deinem Post #6, dass 3.) Dein ultimativer Favorit ist.

 

[Alice]

Würde schon von der Ergänzung vertilgt.

Was hälst Du denn von der "Ergänzung"? Data-URL.

 

[SpiceLab]

Jede der fünf Techniken wird den einen oder anderen Nachteil mit sich bringen, also ist hier, wie im wahren Leben, Kompromißbereitschaft gefragt