Hallo!

Ich bin kein Webseiten-Programmier, ich mache nur die Grafiken, aber ich hätte gerne, dass diese in Retina Auflösung oder gleich Vektorgrafik auf der Seite sein können.

Wie sieht es da z.B. mit SVG aus? Können das alle Browser korrekt darstellen? Wenn nicht, womit gibt es Probleme? Wenn nicht SVG, welche andere Vektorgrafik ginge denn?

Und ansonsten gibt es natürlich Bilder, die mit Vektorgrafik gar nicht gehen, z.B. Fotos usw. Da wäre es auch nett, Retina-Bilder nutzen zu können.
Wobei mir die Technik, die Apple selbst verwendet nicht gefällt: Denn da werden die Retina-Grafiken nur auf Geräten mit Retina-Display geladen. IMHO sollte es aber auf allen Geräten in der hohen Auflösung geladen werden. Immerhin ist es heutzutage Standard, dass jeder Browser zoomen kann, auch Smartphones & Tabletts ohne Retina-Display, wie auch Laptops & Desktop-Computer. Und auf meinem MBP 13" wenn ich da auf der Apple-Seite reinzoome, sehen die Bilder total sch***e aus, am iPad Retina sind sie auch dann noch sehr schön. Und das finde ich Unsinn, auf jedem Gerät sollten die guten Bilder geladen werden, spätestens, wenn man zoomt.

Dabei denke ich mir, das ganze geht doch sogar mit ganz einfachem HTML, oder? Hab da von CSS3, Javascripts, etc. gelesen, aber auch bei HTML kann man doch größere Bilder nehmen und die Größe angeben. Habe vor ca. 10 Jahren mal einfachstes HTML & Javascript probiert. Und soweit ich mich erinnern kann, kann man die Bildgröße angeben. Also z.B. das Bild 800x200 Pixel groß machen, dann aber in Größe 400x100 Pixel darstellen. Oder?!
Ich meine, wenn das geht, wäre es doch das einfachste … und es ginge auch auf Nicht-Retina-Geräten.

Es handelt sich um einen Webshop, dabei stellt sich natürlich die Frage, wie weit man da den Code anpassen kann, aber ich schätze mal, das müsste schon irgendwie gehen.

Ich glaube bei den Artikeln hier bei MTN (bin mir nicht mehr sicher, wo ich das gesehen habe - evt. auch Forum, Galerie oder was anderes evt. auch wo anders), waren recht kleine Bilder bei den Artikeln, aber mit reinzoomen hat man die höheren Details erhalten, ohne dass man das Bild in nem eigenen Tab öffnen musste, o.ä.

Besten Dank für Tipps im Voraus!

Hallo, soweit ich informiert bin mußt du es 2x hinterlegen für Retina und nicht Retina. Der Browser erkennt deinen Bildschirm (Code) und lädt die richtige Grafik, aber hier im Forum gibt es bestimmt Spezialisten die dir das genauer sagen können.

Gruß

Retina und Zoom ist toll, wenn's geht. Im Web bin ich aber geteilter Meinung. Was ist mit den armen Surfern, die mit iPad3 oder 4 auf eine Retina Webgrafik stossen und dann endlich viel Daten laden und dafür dann auch noch Gebühren an Telekom und Co zahlen müssen. Nicht jeder hat Flat-Rate.

Für mehr über Retina und Website, siehe

SVG ist für Grafiken, Logos ect ideal. Ich hinterlege es für den Notfall noch mit einer GIF-Grafik, wenn alte Browser SVG nicht verstehen. SVG, da Vektor, ist immer scharf und gut gemacht sind es wenig Daten, die übertragen werden.
Warum Adobe SVG im Illustrator anbietet und im Dreamweaver nicht unterstützt ist wieder so ein Adobe Geheimnis.

@ helloworld: Ich will es aber nicht 2x hinterlegen, sondern jeder soll die Retina Grafiken bekommen. Finde es Mist auf Apple's Webseiten mit nem normalen iPad oder MBP zu surfen und man zoomt rein, um sich die Geräte anzusehen und das ist dann nur ein Matsch, auf Retina-Geräten aber super.

Denke, das sollte dann noch einfacher gehen, oder? Denke, das ging doch schon mit simpelstem HTML ein Bild zu platzieren und dabei die Breite und Höhe mit der halben Pixelzahl anzugeben. Oder?!
Und naja, die alter Header-Datei (PNG) hatte schon 588 KB (warum, weiß ich nicht). In normaler Größe hat die neue jetzt ca. 70 KB und in Retina-Auflösung ca. 100KB, ich denke die 30KB machen da jetzt nicht groß den Unterschied.

Ob man dann wo anders auch noch höhere Auflösungen nutzt, muss man dann abwägen. SVG für's Logo wäre optimal (derweil ist der Header ein komplettes Bild), mal sehen was der, der dran rumbastelt machen kann, also ob SVG oder eben zumindest den Retina-Header (aber dann auch für alle Geräte).
Es handelt sich um einen Internetshop von gamblo.de, ist noch nicht fertig.

Smashing Coding: Towards A Retina Web

retina.js: Retina graphics for your website

nashape: Big Favicons

egressive: Creating a multi-resolution favicon including transparency with the GIMP

Apple Safari Developer Library: Safari Image Delivery best Practices

Breiter und vermehrter Einsatz sehr zu empfehlen. Machen! Gerade auch in Bezug auf höchstauflösende Bildschirme der Gegenwart und Zukunft à la Retina und alles was danach kommt.

Ja. Alle modernen Browser können das nativ. Sogar auch inzwischen der Internet Explorer in seinen aktuellen Versionen (Microsoft hat da sehr viel Kraft und Mühe reingesteckt und hat hier lange Zeit Verabsäumtes nicht nur nachgeholt, sondern sich diesbzgl. sogar an die Spitze gesetzt inzwischen).

SVG ist/wäre prädestiniert dafür, wenn's Vektorgrafik im Web sein soll, dazu ist es da. Er hier z.B. benutzt auf seiner Webseite seit Jahren nichts anderes, wenn es um Grafiken geht. Sind alles SVG-Grafiken (in diesem Fall sogar handgeschriebenes bzw. handoptimiertes SVG, aber er kann das halt auch, soviel muss nicht sein -- SVG kann man sich heutzutage auch prima generieren lassen, diverse Programme bieten das seit Jahren selbstverständlich an).

Der Grund dürfte naheliegend sein: Flash. Adobe wollte jahrelang Flash pushen und nicht SVG. Und da Dreamweaver populärer und weiter verbreitet ist als Illustrator, ist die Sache klar: für die breite Masse: Flash und bloß nicht auf den Gedanken bringen, dass es da noch sowas gibt wie SVG (das sie selber ja mal jahrelang favorisiert hatten und in dieser Hinsicht eine tiefe Abneigung gegen Flash hatten, da gehörte Flash aber noch zu Macromedia und der Dreamweaver auch, und Adobe und Macromedia waren erbitterte Konkurrenten. Mit dem Aufkauf von Macromedia durch Adobe änderte sich dann mit einem Schlag Adobes Meinung und Strategie. Obwohl sie selber damals schon sogar ganz kräftig an der SVG-Spezifikation mitgeschrieben und sie gepusht hatten und sich auf ihrer SVG-Webseite dafür auch noch selbst gelobt haben, während sie in der Praxis SVG nach dem Kauf von Macromedia ausbremsten wo sie nur konnten und ihr frisch erworbenes Flash in alle Richtungen pushten und propagierten und als unverzichtbaren Bestandteil in einen Großteil ihrer gesamten Software-Produktpalette einwebten (ob nun sinnvoll oder nicht, völlig egal) als gäbe es kein Morgen).

Retina hin oder her...

Mal ganz ehrlich, wer Zoomt in einem Shop das Bild ??? Da lese ich mir lieber die Specs durch oder möchte ein größeres Bild nachladen, wenn man z.b. die Rückseite eines Gerätes sehen möchte...

Retina Grafik kann auch n jpeg sein mit 144dpi anstatt 72 für Standard Grafik...


My 50cent

bmc design: Auf Apples Seiten (normale Homepage) gibt es aber keine besseren Bilder für nicht Retina-Geräte, da kannst du klicken so viel du willst, besser wird es nicht.

Auf Mac oder PC wird wohl eher weniger gezoomt, aber auf allen Tablets und Smartphones ist das absoluter Standard, und mit einem iPad 2 oder Mini bekommt man einfach nur die miesen Bilder, erst mit einem Retina-Display die schönen, das ist ein Unterschied wie Tag & Nacht.

Aber ich schätze mal, dass Apple das auch mit Absicht macht, damit man sich auch ja die Geräte mit Retina-Display holt.

Da der Header vom Shop derzeit ein PNG-Bild ist, das Logo und etwas Text darin als Vektorgrafik gingen, aber die Logos von Paypal, usw. nicht in Vektorgrafik vorhanden sind, frage ich mich folgendes:
Kann man auch eine SVG nehmen (bzw. überhaupt erstellen), wo eben Teile Vektorgrafik sind, aber auch normale Bilder drin sind, also so wie bei einem PDF?

Ob man das irgendwie ändern kann mit dem Header erfahre ich erst am Montag. Wenn es nicht anders geht, dann wird es eben ein PNG mit @2x Auflösung und die Breite/Höhe bleibt wie gehabt. Im Code ist diese eh angegeben, wenn man aber über das Shop-System das Bild tauscht, ändert er die Werte entsprechend. Das PNG müsste man dann halt direkt auf Dateiebene austauschen.

bmc design: Was die Bilder im Shop selbst jetzt angeht, ist das ganze natürlich was anderes. Wenn man da irgendwie zu größeren Bildern kommt, braucht es diese auf einem Nicht-Retina Gerät sicher nicht in der Voransicht und auch beim Retina muss man dann abwägen, wo was Sinn hat.

Ein alter, weiser Dozent von mir sagte bereits vor 10 Jahren: Web ist nie nur "Design", nie nur das was "du" willst. Web ist immer ein Kompromiss.
- Zwischen Dateigrößen und Qualität.
- Zwischen Design und Usability
- Zwischen maximaler Moderne und notwendiger Abwärtskompatiblität.
- zwischen der notwendigen Schnittmenge aller Zielgrupen und deren Userverhalten.
- Wer im Web zu egoistisch gestaltet, verschließt sich im schlimmsten Fall einer Usergruppe die größer ist, als die, welche man bedient.

Ich finde auch wenn diese Aussage 10 Jahre alt ist, hat sie nach wie vor Bestand. Auch anno 2012/13 gibt es noch:
- traffic limitierte Internetzugänge
- langsame Internetzugänge
- Menschen mit technisch limitierter Ausstattung (langsame Geräte, älteren Geräten, ältere Browserversionen, kleineren Monitoren, geringeren Auflösungen etc...)
- Menschen mit Priortät für Design genauso wie mit Priorität für einfache Benutzbarkeit
Fixiert man sich auf eine Zielgruppe, verliert man u.U. eine andere.
Deine Absicht in allen Ehren, aber ein simpler Shop, der vor allem Artikel verkaufen will - und das womöglich an so viele Menschen wie möglich - sollte auch so konzipiert sein das ihn so viele Menschen wie möglich, so schnell wie mögloch, mit so wenig Hindernissen wie möglich nutzen können. Ob hochauflösende Bilder da nützlicher sind als evtl weiterführende Detailausschnitte oder eine besser ausführliche Produktbeschreibung musst du/der Shopbetreiber entscheiden. Am Ende wird und muss es wohl ein Kompromiss werden.

kawi: Wie gesagt, wenn irgendwie möglich, kommt ein SVG, ansonsten eben der ganze Header in doppelter Auflösung. (als PNG8 zB. extra klein)

Weiß denn nun jemand, ob man in einer SVG-Datei neben Vektorgrafik auch Pixelbilder platzieren kann? Und wenn ja, zeigen das die Browser auch sauber an?!

Besten Dank im Voraus!

Ja klar geht das. ,

Welche SVG-Version soll man nehmen? Bei mir geht's bis "SVG Tiny 1.2" - ist das gut, oder soll man was anderes nehmen? Und ich nehme mal an, ohne Komprimierung.

Und wegen Text, ist da sinnvoller den Text einzubetten oder in Pfade umzuwandeln (letzteres braucht ein paar kb mehr - allerdings kann man eingebetteten Text zumindest aus Safari kopieren, dabei aber leider nur falsch mit einer neuen Zeile zwischen jedem Zeichen)

Dazu kann man noch die Anzahl der Nachkommastellen angeben. Auf welche Einheit bezieht sich das? Pixel? Denke, 2 sollte dann wohl gut reichen, oder?

sierkb: Danke, das ist gut!

Ist es nicht die einfachste Lösung, die Bilder in groß zu hinterlegen und sie dann per Browser per html skalieren zu lassen? Dabei bleiben sie auf Retinageräten scharf.

Die Einfachste, nicht die Optimalste.

Sierkb
Danke für die Links!