Vektorgrafiken fürs Web konvertieren?

[Schwertfisch]

Hallo liebe Leute,
ich möchte in meiner geplanten Website auch zahlreiche Vektorgrafiken einbauen, die allesamt im Illustrator erstellt werden.
Dazu stellen sich mir drei Fragen:
1) In welchem Format exportier ich die am besten? (...PNG wurde mir empfohlen)
2) Gibt es auch eine Möglichkeit, die Vektorgrafiken so zu exportieren, dass der transparente Hintergrund nicht verloren geht?
3) Falls das nicht geht, müsste ich den Hintergrund wohl - entsprechend dem Website-Hintergrund - im Photoshop einfärben, oder? Schwierig würde es dann aber, wenn der Hintergrund z. B. ein Verlauf wäre.

Schöne Grüße aus Thailand,
Schwertfisch

 

[dewey]

also png mit transparenz macht der internet explorer nicht mit (win und mac) dafür hat es halt mehr farben als gif.

 

[Ultrasonic]

also png mit transparenz macht der internet explorer nicht mit (win und mac) dafür hat es halt mehr farben als gif.

Stimmt nicht ganz. Der IE7 kann mit transparenten PNG's umgehen und dem IE6 kann man das beibringen.

 

[quarx]

Kann der Illustrator denn transparente PNGs erzeugen? Falls die Vektorgrafiken im SVG-Format gespeichert sind, könnte man die auch mit Inkscape in transparente PNGs konvertieren.

 

[Schwertfisch]

Das mit dem PNG-Format hatte ich jetzt für die transparente Lösung gar nicht in Betracht gezogen, denn mein alter Illustrator kann keine transparenten PNGs erzeugen. War nur als Lösung für Vektoren gedacht, die als geschlossenes Pixelbild erscheinen können. Für die transparenten hatte ich auf eine andere Lösung gehofft.
Aber unabhängig davon scheint die Sache mit der Transparenz - auf einer Wesite - ja auch nicht so ganz unkompliziert zu sein, wenn dewey recht hat. Und ich denke mal, dass nicht jeder IE6 user Ahnung, Lust und Zeit hat, seinem Browser die richtige Interpretation einer transparenten Datei beizubringen. Provis machen das, Laien wohl eher nicht. Somit könnte es da zu einem knalligen Problem kommen.
Ich denke, ich werde die Anwendung von transparenten Vektorgrafiken an sich noch mal überdenken müssen.

 

[AB-1987]

Ich würde auch auf keinen Fall zu PNGs greifen. Der Großteil der Leute wird die Grafiken nicht sehen…

 

[Ultrasonic]

Ich würde auch auf keinen Fall zu PNGs greifen. Der Großteil der Leute wird die Grafiken nicht sehen…

Genau. Warum sehen denn das die meisten nicht? Das können alle sehen, die Grafiken aktiviert haben. Die halbe Apple-Website ist mit PNG's voll. Siehst du die auch nicht?

Und transparente PNG's lassen sich mit dem Illustrator via "Für Web Speichern" erzeugen. Bitte drauf achten, dass PNG-24 eingestellt ist und natürlich das Häkchen "Transparenz".

 

[Hilarious]

Ich würde auch auf keinen Fall zu PNGs greifen. Der Großteil der Leute wird die Grafiken nicht sehen…

Das ist leider schlicht falsch.

Das für den Bedarf beste Dateiformat, ob PNG, GIF, oder JPG (andere sind nicht ohne weiteres für die breite Masse sichtbar), hängt ganz vom Inhalt der Grafik ab. Konvertiere einfach eine typische Grafik aus Deiner Projekt in je eines dieser drei Varianten und vergleiche Qualität und Dateigröße.

Bei JPEG liegt der Vorteil in der hohen Kompression, bei gleichzeitigem Inhalts- und Qualitätsverlust, wenn die Kompression zu stark in das Bild eingreift, aber das ist regelbar.

GIFs werden verlustfrei komprimiert, wenn man einmal von der Reduktion auf 216 Farben absieht. Das bedeutet, dass das Format GIF sich vor allem für Strichgrafiken und Typographie besonders gut eignet. Für Portraitfotos Deiner Lieblingskollegin besser nicht, sonst gibt's Ärger.

PNG ist ein sehr vielseitiges Format, erreicht aber nicht immer die Vorteile der anderen beiden Formate, bis auf weniger Ausnahmen: Farbverläufe gelingen in PNG in der besten erhältlichen Qualität, verglichen mit JPEG und GIF. PNGs eignen sich auch für indizierte Farbmodi ebenso wie GIF-Daten, jedoch selten mit einer geringeren Dateigröße.

Richtig ist, dass Transparenzen nur mit den Formaten GIF und PNG darstellbar sind. Währen bei GIF keine Halbtransparenzen möglich sind, sondern vergleichbar mit dem Chromakeying hier nur bestimmte Farbwerte transparent behandelt werden, können bei PNG 8-Bit-Masken (Alpha-Kanäle) definiert werden. Leider unterstützt der MS Internet Explorer diese transparenten PNGs von Hause aus ohne zusätzliche Kniffe nicht. So gut wie alle anderen Nicht-Microsoft-Browser neueren Datums schon, jedoch erreicht der MSIE 6 immer noch eine sehr hohe Verbreitung (fallende Tendenz).

Um das zu erreichen wird zunächst dem MSIE 6 ein passendes GIF als Köder gereicht, und nachträglich ein PNG per ActiveX:

<img src="pixel.gif" width="250" height="150" border="0" alt="Das wird transparent mit MSIE 6"
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png', sizingMethod='scale')">

Ergo: Es kommt darauf an Viele Bildbearbeitungsprogramme bieten inzwischen die Möglichkeit mehrere Einstellungs- und Dateiformat-Varianten vor dem Export zu beurteilen, dann fällt die Entscheidung leichter.

 

[AB-1987]

Genau. Warum sehen denn das die meisten nicht? Das können alle sehen, die Grafiken aktiviert haben. Die halbe Apple-Website ist mit PNG's voll. Siehst du die auch nicht?

Und transparente PNG's lassen sich mit dem Illustrator via "Für Web Speichern" erzeugen. Bitte drauf achten, dass PNG-24 eingestellt ist und natürlich das Häkchen "Transparenz".

und @ Hilarious:

Wie Hilarious schon richtig erkannt hat, hat der IE Probleme mit der Darstellung von PNGs. Deshalb auch meine Aussage, dass man sie nicht einsetzen sollte. Leider surft halt der Großteil der Internet-User mit dem Explorer – und es wird auch noch lange dauern, bis alle Anwender auf den IE 7 umgestiegen sind. Auch in ein paar Jahren wird es noch Leute geben, die auf dem 5er oder 6er unterwegs sind.

Nicht alle sind so computerinteressiert wie wir…

 

[ImperatoR]

und @ Hilarious:

Wie Hilarious schon richtig erkannt hat, hat der IE Probleme mit der Darstellung von PNGs. Deshalb auch meine Aussage, dass man sie nicht einsetzen sollte. Leider surft halt der Großteil der Internet-User mit dem Explorer – und es wird auch noch lange dauern, bis alle Anwender auf den IE 7 umgestiegen sind. Auch in ein paar Jahren wird es noch Leute geben, die auf dem 5er oder 6er unterwegs sind.

Achja es gibt für IE6 einen PNG Hack, der per Stylesheet beigebracht werden kann und somit keine clientseitige Konfiguration nötig ist.

Nicht alle sind so computerinteressiert wie wir…

Das stimmt nicht!! Der IE6 kann PNG-8 ganz normal darstellen (sogar mit Transparenz), PNG-24 kann er auch darstellen er hat lediglich Probleme mit dem Alphakanal der Transparenz (mit der man natürlich die besten Effekte erzielen kann *grr*). IE7 kann alles PNG-Zeug korrekt anzeigen (zum Glück).

PNG ist das beste Format .. alle anderen kann man vergessen, höchstens JPG bei großen Bildern!

Wenn du Vektorgrafiken auf deine Webseite bringen willst, nimm SVG ... aber das kann imho nur Firefox (bis jetzt) darstellen.

 

[jensche]

PNG ist doch ein Windows Format... die gesamte Apple Seite, die neue, ist mit PNG aufgebaut... inkl. transparenzen.

fürs ms Office sind PNG auch perfekt...

 

[Hilarious]

PNG ist doch ein Windows Format...

Nö.

Lesen: http://de.wikipedia.org/wiki/PNG

 

[jensche]

ok. aber in den meisten Office Apps wird PNG sogar besser dargestellt als jpg..

Der Internet Explorer für Windows hat bis zur Version 6 Probleme mit der Darstellung von PNG-Dateien mit Alphakanal. PNG-Dateien mit binärer („ja/nein“-)Transparenz werden jedoch fehlerfrei dargestellt.

 

[Schwertfisch]

...GIFs werden verlustfrei komprimiert, wenn man einmal von der Reduktion auf 216 Farben absieht. Das bedeutet, dass das Format GIF sich vor allem für Strichgrafiken und Typographie besonders gut eignet.
...Richtig ist, dass Transparenzen nur mit den Formaten GIF und PNG darstellbar sind. Während bei GIF keine Halbtransparenzen möglich sind, sondern vergleichbar mit dem Chromakeying hier nur bestimmte Farbwerte transparent behandelt werden, können bei PNG 8-Bit-Masken (Alpha-Kanäle) definiert werden.

Na wunderbar, dass könnte doch schon die Lösung sein! Bei den beschriebenen Eigenschaften eignet sich GIF doch geradezu perfekt für meine geplanten Zwecke. Transparenz für Halbwerte benötige ich bei den geplanten Vektorgrafiken eh nicht, und 216 Farben ist mehr als okay. Wozu sollte ich mich dann (in meinem speziellen Fall) mit PNG rumnerven, wenn das in Bezug auf die Browser-Kompatibilität so kontrovers diskutiert wird? In Bezug auf einfache, plakative Vektorgrafiken sehe ich da nach Hilarious Ausführungen keinen Vorteil bei PNG.

 

[Hilarious]

Na wunderbar, dass könnte doch schon die Lösung sein! Bei den beschriebenen Eigenschaften eignet sich GIF doch geradezu perfekt für meine geplanten Zwecke. Transparenz für Halbwerte benötige ich bei den geplanten Vektorgrafiken eh nicht, und 216 Farben ist mehr als okay. Wozu sollte ich mich dann (in meinem speziellen Fall) mit PNG rumnerven, wenn das in Bezug auf die Browser-Kompatibilität so kontrovers diskutiert wird? In Bezug auf einfache, plakative Vektorgrafiken sehe ich da nach Hilarious Ausführungen keinen Vorteil bei PNG.

So ist in den meisten Fällen auch, denn PNG wurde ja vor allem aus lizenzrechtlichen Gründen geschaffen, um vor allem dem Format GIF89a den Rang abzulaufen. PNG hat andere Vorzüge (zum Beispiel die perfekte Darstellung von Verläufen in einem 24-Bit- oder 32-Bit-PNG) und füllt somit ganz gut die Lücke zwischen JPG und GIF.