1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

HiRes (Retina & Co.) schon zu Beginn berücksichtigen? Wie Bilder anlegen?

Dieses Thema im Forum "Design" wurde erstellt von Richterprodukt, 24. Juni 2013.

Schlagworte:
  1. Richterprodukt

    Richterprodukt Well-Known Member

    Registriert seit:
    26. Januar 2013
    Beiträge:
    51
    Zustimmungen:
    0
    Hallo Designer!

    Mittlerweile gibt's ja auch schon WordPress-Themes mit HiRes-Option. Da ich in Kürze ein Magazin-Template kaufen und dann nach meinen Bedürfnissen anpassen möchte - wie gehe ich am besten vor? Ist es ratsam, heute bereits ein HiRes-Theme zu kaufen? Worin unterscheiden sich dann die Bilder und wie speichere ich sie richtig ab (DPI-Wert, etc.)?

    Grüße
    Thomas
     
  2. egado

    egado Well-Known Member

    Registriert seit:
    19. Oktober 2012
    Beiträge:
    264
    Zustimmungen:
    3
    Diese Frage kann man kaum allgemein beantworten. Retina-Displays sind im Desktop Bereich bisher nur durch das MacBookPro mit Retina-Display vertreten, aber natürlich deutlich stärker durch Mobil-Geräte. Grundsätzlich macht es also durchaus Sinn ein Retina-Optimiertes Theme zu wählen, zumal der Anteil der Retina-Displays in Zukunft wohl eher steigen wird und gerade Blogs gerne und viel Mobil gelesen werden.

    Worin unterscheiden sich die Bilder
    Die Bilder haben die doppelte Auflösung. Das heißt konkret, wenn das Logo vorher 300x100 Pixel groß war, muss es für Retina 600x200 Pixel groß sein – wichtig hierbei ist die CSS Angabe für die Backgroundsize bei Layout-Grafiken, denn die bleibt auf 300x100 Pixel, damit ergibt sich die doppelte Auflösung.

    Das bedeutet z.B. für Bilder die du im Blog selbst einsetzt, in den Artikeln z.B. dass diese auch doppelt so groß sein müssen um der Display-Auflösung gerecht zu werden. Das erschreckt zunächst, denn eine JPG die vorher 560x300 Pixel groß war müsstest du also in 1120x600 Pixeln hochladen - das würde die Dateigröße erheblich vergrößern. Daher ist eine Empfehlung, die JPG Komprimierung deutlich zu erhöhen. Bei "normalen nicht Retina" Bildern würde das dazu führen, dass man die JPG-Artefakte deutlich stärker wahr nehmen würde. Da das Bild jedoch doppelt so groß ist (Pixelmaße) aber dennoch auf der ursprunglichen Größe angezeigt wird erhöht sich die Auflösung, daher nimmt man diese Artefakte nicht mehr wahr. Im Endeffekt hat man sogar eine Datei die ggf. sogar einige KB kleiner ist als die nur halb so große normale Abbildung.

    Nette Links dazu:
     
  3. formateins

    formateins Gast

    Ich habe mehrere Themes in Betrieb, die diverse Retina-Geschichten supporten. U. a. eines, das die Medienbibliothek entsprechend um die @2x-Thematik erweitert. Dummerweise ist diese Seite sehr Bildlastig (viele Produktbilder), die ich schlichtweg nicht in der höheren Auflösung bereitstellen möchte. Logo und andere kleinen Dinge Okay - der Rest ist einfach nur over-the-edge.

    Aktuell ist die Frage für mich absolut hinfällig - insbesondere, wenn man die Anzahl der Besucher mit retina-fähigen Displays eroiert.

    Technisch löst man das geschickt über die media queries im CSS.
     
  4. egado

    egado Well-Known Member

    Registriert seit:
    19. Oktober 2012
    Beiträge:
    264
    Zustimmungen:
    3
    @formateins
    Setzt du für die Medienbibliothek eine eigene Lösung ein oder ein Fremd-Plugin? Würde mich jedenfalls mal interessieren... :) Bezüglich over-the-edge stimme ich dir im Prinzip zu, jedoch sparst du sogar Datenmenge über diese Methode: http://www.conversionscouts.de/methoden-tipps-loesungen/css-pixel-bild-pixel-und-device-pixel-optimierung-fur-retina-co/

    Umgesetzt habe ich es bisher so auch noch nicht, abgesehen von erwähnten Logos und Icons... Aber interessant finde ich den Ansatz. Die Anzahl der Retina-Fähigen Displays ist bei B2B Seiten natürlich noch sehr gering, im privaten Bereich verzeichnen einige Seite jedoch über 20-30% - was ich schon nicht wenig finde, aber das wird wohl bei jedem Projekt anders ausfallen (noch). ;)
     
  5. formateins

    formateins Gast

    Jetzt hab ich geantwortet und den Tab geschlossen... *narf*

    Mediathek:

    Den Anhang 7700 betrachten

    Plug:
    Den Anhang 7701 betrachten

    Kurfassung:
    Retina hab ich nicht auf dem Schirm. Rückt vllt. in meine Wahrnehmung, wenn wir nativ hochauflösende TFT's auf dem Schreibtischhaben (144dpi+). Ansonsten hab ich Photoshop im Griff und nicht andersrum. Macht man sich im Vorfeld mal ein paar Gedanken zu Bildgrößen & Co., reicht auch @1x vollkommen aus. :)
     
  6. egado

    egado Well-Known Member

    Registriert seit:
    19. Oktober 2012
    Beiträge:
    264
    Zustimmungen:
    3
    Danke dir für die Antwort :)

    Hehe, joa darauf freue ich mich schon auf die hochauflösenden TFTs... ;) Dann brauch ich wohl endgültig ne Brille um das genießen zu können ;) Denke auch, dass bei den meisten Abbildungen (Fotos) @1x völlig reicht, selbst auf Mobil-Geräten - bzw. der Aufwand in keinem guten Nutzen-Verhältnis steht. Abgesehen bei den von dir erwähnten Logos, Icons... da mag ich keinen Pixelmatsch auf meinem Phone sehen und da hilft auch kein PhotoShop im Griff haben da müssen @2x her :) Bin gespannt was uns die Zukunft bringt...
     
  7. Richterprodukt

    Richterprodukt Well-Known Member

    Registriert seit:
    26. Januar 2013
    Beiträge:
    51
    Zustimmungen:
    0
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden