Bilder website

Fotos Website

Die Einbettung unserer Bilder ist sehr einfach. Bild-Logo: Ordner Bilder Bewerber: Image Logo DFG: Folder Bilder für den Rückzug: Durch die Nutzung unserer Website erklären Sie, dass Sie die Datenschutzbestimmungen kennen. Sobald Sie ein Produkt ausgewählt haben, können Sie Ihr Bild direkt auf der Website gestalten. Auf dieser Seite finden Sie Bilder und Informationen zu den bereits gebauten Welten.

Optimierung von Webseiten und Bildern für hochauflösende Displays (Retina, HiDPI)

Immer häufiger werden Bildschirme mit einer hohen Bildpunktdichte, wie das Retina-Display von Apple, eingesetzt. In diesem Artikel möchte ich die durch die Netzhautdarstellung verursachten Störungen und die möglichen Lösungen aufzeigen. Das neue hochauflösende Display hat eine größere Bildpunktdichte als herkömmliche Monitor. Ungefähr vier Mal so viele Bildpunkte werden auf der selben Oberfläche angezeigt.

Das hat den großen Nachteil, dass die Bildpunkte jetzt so gering sind, dass das Menschenauge sie nicht mehr auflöst. Bei einer Pixelgraphik, die das gesamte Bild in normaler Bildauflösung füllt, würde auf einem gleich großen Netzhautdisplay tatsächlich nur ein viertel des Bildes ausmachen. Auch ein Bildpunkt der Graphik korrespondiert mit einem Bildpunkt auf dem Netzhautdisplay, nur dass vier mal so viele und kleine Bildpunkte angezeigt werden.

Die Pixelgrafik wirkt daher auf dem Retina-Display verschwommen. Die Problematik ist auf Pixelgrafik begrenzt. Schriftarten oder Graphiken, die auf Vektorgrafiken (SVG, CSS, etc.) beruhen, wirken auf dem Retina-Display messerscharf. Graphiken, die mit Hilfe von Webfonts oder CSS3-Icons erzeugt wurden, beruhen auf Vektorgrafiken anstelle von Pixel. Die CSS-Grafik wird daher auch auf hoch auflösenden Bildschirmen in absoluter Konzentration wiedergegeben.

Bei Schaltflächen, Icons und anderen dekorativen Elementen, die mit Hilfe von z. B. 3 realisiert werden können, sollte auch 3 CSS eingesetzt werden. Neben der optischen Seite verbessern CSS-Grafiken in der Regel auch die Leistung einer Website. Die klassischen Screendesigner müssen sich mit den Einsatzmöglichkeiten von Citrix 3 auseinandersetzen, um ein Layout zu entwerfen, das dann auch fachlich aktuell umgesetzt werden kann.

Ebenfalls in CMOS3 werden gewisse Properties in Pixel spezifiziert. Web-Designer haben nun ein ähnliches Problemfeld wie bei der Pixelgrafik. Zum Beispiel ist ein Rand von 1 px Dicke 2 px auf dem Apple iPhone mit Retina-Display. Anders als bei der Pixelgrafik wird jedoch die Grafikqualität nicht beeinträchtigt, weshalb die Konvertierung von Graphiken in Form von Stylesheets oft unterlassen wird.

Über die Medienabfrage mit Hilfe von Cursor können nicht nur unterschiedliche Bildschirmgrößen angesprochen werden. Dabei kann auch die Geräteauflösung miteinbezogen werden. Kombiniert mit optimierter Graphik können auch pixelgenaue Graphiken auf dem Retina-Display dargestellt werden. Wir ordnen die Graphik dann wie gewohnt einem Objekt zu und verkleinern sie mittels CSS auf die benötigte Grösse.

Durch diesen Kunstgriff ist die Graphik auch auf dem Netzhaut-Display schärf. Die Graphik wird unter dem Namen logo-px2.png gespeichert. Bei der folgenden Medienabfrage adressieren wir dann die Netzhautdarstellung im CSS-Code und ordnen dem Firmenlogo das "Netzhautbild" als Untergrund zu.

Die Umrechnung ( "Pixelverhältnis: 2") von 2 (d.h. doppelter Auflösung) bezieht sich in erster Linie auf die Netzhautdarstellung. Aber es gibt auch andere Endgeräte mit hoher Bildschirmauflösung. Dabei können unterschiedliche Konversionsfaktoren, also Medienabfragen, erforderlich sein. Welche Werte richtig sind, lässt sich aus der Bildschirmauflösung eines Mobiltelefons berechnen. Man dividiert die Länge der angezeigten Seiten durch die Länge der physischen Anzeige.

Die Berechnung für das I-Phone 4+ lautet: 640 Bildpunkte / 320 Bildpunkte = 1 Das HTC Desire zeigt "nur" 480 Bildpunkte auf einem Bildschirm mit einer physischen Weite von 320 Bildpunkten an. Der Berechnungsablauf ist folgendermaßen: 480 / 320 = 1,5. Daher gibt es verschiedene Medienabfragen für verschiedene Anzeiger.

Durch Medienanfragen und entsprechenden Arbeitsaufwand kann die Layout-Grafik einer Website für eine höhere Qualität optimiert werden. Aber was ist mit den Fotos im Content-Bereich der Website? Es gibt derzeit keine einheitliche Problemlösung, nur ein paar wenige Anregungen und Umgehungsmöglichkeiten. Die Problematik unterschiedlicher Bildgrössen hat nicht nur Auswirkungen auf hochaufgelöste Anzeigen, sondern ist ein allgemeines Medienproblem und ein allgemeines HTML-Problem.

Anders als bei der Gestaltung der Website - die von CSS kontrolliert wird - sind die Bilder im Content-Bereich HTML-Elemente. Gegenwärtig ist es nicht möglich, unterschiedliche Imagequellen von Medienabfragen abzuhängen, ohne Skripte oder Plug-Ins zu erstellen. Die in diesem Artikel geschilderte Problematik ist verhältnismäßig jung, aber keinesfalls unklar.

Bereits heute gibt es einige Lösungsansätze in Gestalt von Plug-Ins und Scripts, die das Bild im HTML-Code auflösen. Dieses Skript funktioniert mit einem Cookies, das die Bildschirmauflösung des Geräts abspeichert. Die Bilder (falls vorhanden) werden dann in hochauflösender Darstellung dargestellt. retina-images.complexcompulsions. Dieses Skript überprüft die Namen der Dateien, um festzustellen, ob Bilder in höherer Qualität verfügbar sind.

Unter anderem implementieren wir massgeschneiderte Webseiten und bieten Ihnen Trainingskurse an. Benötigen Sie Hilfe bei der Konzeption, dem Design und der Erstellung einer Website in der Kategorie Resonanzdesign, stehen wir Ihnen gern zur Verfügung.

Mehr zum Thema