Warum brauche ich @ 1x-, @ 2x- und @ 3x-iOS-Bilder?

78

Warum brauchen wir diese 3 bestimmten Bildtypen?

Wenn ich in meiner App eine Schaltfläche mit einem Hintergrundbild habe, z. B. 50 x 50 Pixel, warum benötige ich 3 Versionen dieses Bildes? Was hindert mich daran, nur ein Bild zu erstellen, dessen Auflösung viel höher ist, z. B. 700 x 700, und wenn es auf einem iPhone verkleinert wird, fällt es nicht unter die maximale Auflösung, die das Gerät haben möchte?

Ich kann mir nur vorstellen, dass es nur mehr Platz beansprucht, aber für einfache Apps / eine einfache Schaltfläche scheint es, als würde es keine Probleme verursachen. Ich habe es auf einigen Geräten versucht und sehe keinen Unterschied zwischen ihnen, wenn ich es simuliere und diese Methode mache. Wenn ich mich jedoch mehr mit Apps und anderen Dingen beschäftige, bin ich mir sicher, dass hinter dieser Technik Substanz steckt.

CodeMark22
quelle
3
Obwohl dies eine doppelte Frage ist, wie oben erwähnt (und die verknüpfte Antwort ist ziemlich gut), ist es nützlich zu beachten, dass moderne Versionen von Xcode PDF-Dateien in xcassets zulassen. Die Idee dahinter ist, dass Sie (Vektor-) PDF-Dateien anstelle von PNGs mit einer Größe bereitstellen, als wäre es ein @ 1x-Bild (dies sind die Abmessungen des PDF-Dokuments, da es sich um Vektoren handelt) und Sie markieren es als "Einzelner Vektor" '. Dann erzeugt Xcode alle @NxPNGs, die für jedes Gerät hinter den Kulissen benötigt werden.
Alladinian

Antworten:

66

Wenn Sie nicht die genaue Größe haben, können zwei Dinge passieren:

Upscaling

@3xoder @2xkann von hochskaliert werden, @1xaber normalerweise ist das visuelle Ergebnis verschwommen, mit dicken Linien und sieht nicht gut aus. Das Upscaling @3xvon @2xkann noch schlimmer sein, da Subpixel verwendet werden müssen.

Downscaling

Im Allgemeinen sind die Ergebnisse viel besser als beim Hochskalieren, dies gilt jedoch nicht für alle Bilder. Wenn Sie einen 1pxRand auf einem @3xBild haben, wird dieser nach @1xdem Herunterskalieren auf den Rand nicht angezeigt (0,33 Pixel). Gleiches gilt für kleine Objekte im Bild. Beim Downscaling werden alle Details zerstört.

Im Allgemeinen - damit ein Bild perfekt aussieht, sollten Sie sowohl das Herunterskalieren als auch das Hochskalieren vermeiden. Sie können immer nur mit @2xoder mit @3xBildern arbeiten und nur dann andere Maßstäbe hinzufügen, wenn Sie visuelle Probleme sehen. Die Verwendung einer höheren Auflösung verbessert das Downscaling nicht. Hohe Auflösungen werden nur verwendet, um eine Hochskalierung zu vermeiden. Das Herunterskalieren von einem hohen Maßstab (z. B. @100x) auf @1xkeine besseren Ergebnisse als das Herunterskalieren von @3x.

Sulthan
quelle
Aha. Das alles macht für mich Sinn, aber dann bringt es eine andere Frage ... ob ich diese 3 Bildtypen basierend auf dem Gerät haben soll ... was passiert, wenn ich eine App habe, die sowohl iPhone als auch iPad verwendet, und die Größe des Bild doppelt, damit das iPad skaliert und gut aussieht? dann muss ich 3 Bilder für das iPhone und 3 separate für das iPad haben .... DANN wie unterscheidet man zwischen den zu verwendenden und nicht den 1x, 2x oder 3x?
CodeMark22
@ CodeMark22 Sie verwechseln Skalierung und Auflösung, aber ja, Sie können separate Assets für iPhone und iPad angeben.
Sulthan
Ein wichtiger Punkt, der hier fehlt, ist, dass wir 3 Bildgrößen benötigen, da wir nicht möchten, dass ein Benutzer mit IPhone 5 mit geringer Auflösung IPhone 6s-Bilder herunterlädt. IPhone 5-Benutzer werden keinen großen Qualitätsunterschied bemerken, aber er wird unnötig hochauflösende IPhone 6-Bilder herunterladen.
Muhammad
1
@ Muhammad Das ist nicht unbedingt wahr. Der Größenunterschied zwischen einem Bild mit 10 x 10 Pixel und einem Bild mit 20 x 20 Pixel muss nicht sehr groß sein - wenige Bytes, ein Bild mit größerer Auflösung kann sogar kleiner sein als ein Bild mit höherer Auflösung. Beachten Sie, dass die Komprimierung in PNG-Bildern eine große Rolle spielt. Das Hinzufügen einer 1x-Variante für jedes Asset kann eine Überoptimierung sein.
Sulthan
1
Laut Apple gibt es ein Konzept für das Aufteilen von Apps, das sicherstellt, dass der Benutzer, der die App auf iPhone 5-Varianten aus dem App Store herunterlädt, die Assets gemäß der doppelten Auflösung erhält. Und der Benutzer, der die App auf iPhone 6-Varianten herunterlädt, erhält die Vorteile einer dreifachen Auflösung. @Muhammad hat natürlich unnötig gesagt, dass Apple intelligent gespielt hat und nur die Assets der App gemäß den Gerätevarianten herunterlädt. Hoffe das klärt einige Zweifel.
iAviator
63

Sie benötigen 3 Arten von Bildern in Image Assets, da es in Bezug auf Skalierung oder Pixel 3 Arten von Apple-Geräten (iPhone und iPad) gibt

Normales Gerät, das sich auf 1 pixel = 1 point@ 1x bezieht (ältere iPhone- und iPad-Geräte)

Retina-Gerät, das 4 pixels(2 x 2) = 1 point@ 2x (iPhone 4+) bezeichnet

Retina iPhone6 ​​und iPad, die sich auf 9 pixels (3 x 3) = 1 point@ 3x (iPhone6 ​​+) beziehen

Um dasselbe Bild in drei Maßstäben bereitzustellen, entscheidet iOS, welches Bild für welche Geräte angezeigt werden soll. Hoffentlich kann Ihnen dies helfen, dies zu verstehen.

BEARBEITEN

Geben Sie hier die Bildbeschreibung ein

Saheb Roy
quelle
Das heißt, wenn ein Bild in 1x 320px ist, dann ist es 1280px in @ 2x. Sind Sie sicher?
Mrug
Nein Kein Bild kann nur 1 Dimension in 1x haben, wenn das Bild 320 px x 480 px groß ist. In 2x sind es die doppelten 4 Pixel, da sie für 1 Punkt quadratisch werden, wenn sie in Dimensionen von Länge x Breite sind. sie werden verdoppelt.
Saheb Roy
Oh, Sie haben 2 Dimensionen berücksichtigt und insgesamt Pixel angegeben. Ok hast du !! Ich habe gerade bearbeitet, um mehr Klarheit zu schaffen.
Mrug
Laut en.wikipedia.org/wiki/Retina_Display scheinen die ersten Retina-Geräte iPhone 4 und nicht iPhone 5 zu sein, wie in dieser Antwort erwähnt.
Liron Yahdav
@ SahebRoy Dies ist nicht korrekt. Das iPhone 4 verfügt über ein Retina-Display.
Gabriel
7

Dies liegt daran, dass bei Bereitstellung einer hochauflösenden Grafik Platz auf dem Gerät eines Benutzers verschwendet wird. Dank App Slicing lädt das Gerät (aus dem App Store) nur die Teile herunter, die tatsächlich zum Gerät passen (sodass das Retina-Gerät keine Nicht-Retina-Grafiken herunterlädt). Aus diesem Grund hat Apple Assets-Kataloge erstellt und diese Art von Regeln befolgt. Sie beschreiben es in ihren Sitzungen.

Kurz gesagt, es geht darum, die Speicher- / Festplattennutzung zu verringern, damit Leistung und Benutzererfahrung gesteigert werden

Julian Król
quelle
5

Zunächst müssen Sie das Verhalten von Punkten und Pixeln kennen. Bei Geräten ohne Netzhaut beträgt das Verhältnis von Punkt zu Pixel 1 Punkt = 1 Pixel . Bei Retina-Geräten gibt es zwei Verhältnisse: 1 Punkt = 2 x 2 Pixel je nach Bildschirmgröße und 1 Punkt = 3 x 3 Pixel aufgrund der Pixeldichte , die sich bei Nicht-Retina vervierfacht.
Aus diesem Grund benötigen Sie diese 3 Bildtypen, um in der höchsten Auflösung angezeigt zu werden.

Stefan
quelle
3

Ergänzt das, was Sulthan gesagt hat:

Da Sie für ein bestimmtes Gerät keine geeigneten Bilder bereitgestellt haben, muss es verkleinert oder vergrößert werden. Diese Prozesse beanspruchen Ihren Speicher und Ihre Verarbeitung, was möglicherweise zu einer Leistungsminderung führt, abhängig von der Anzahl der Bilder gleichzeitig und der Größe des Bildes.

NSPunk
quelle
2

Wenn Sie nur ein großes Bild bereitstellen, treten mehrere Probleme auf:

  1. Downscaling führt zu Qualitätsverlusten (auch wenn diese nicht sehr groß sind)
  2. Das Herunterskalieren des Bildes erfordert mehr Rechenleistung als das Anzeigen des bereits vorgerenderten Bildes
  3. Die Größe Ihrer Binärdatei wird erhöht und Sie können nicht von der App-Ausdünnung profitieren, die mit iOS 9 eingeführt wird.

Wie Sie sehen können, wirkt sich die Produktion nur eines Bildes auf die Leistung und Qualität Ihrer App aus und trifft diejenigen mit älteren Geräten überproportional. Das ist weil:

  1. Sie müssen mehr verkleinern. Außerdem ist die Leistung ihrer Geräte nicht so gut wie die der neuen, sodass sie die Verzögerungen bei Ihrer App mit größerer Wahrscheinlichkeit bemerken
  2. Sie haben nicht so viel Speicherplatz, daher möchten Sie wirklich App-Ausdünnung verwenden können, um ihnen zu helfen
  3. Der Qualitätsverlust wird für sie am höchsten sein und angesichts der Tatsache, dass die Auflösung ihrer Geräte niedrig ist, werden sie es bemerken.

Aus diesem Grund sind Benutzer wahrscheinlich unglücklich und dies ist schlecht für Sie. Nach meiner Erfahrung bewerten unglückliche Benutzer Ihre App zehnmal häufiger als zufriedene Benutzer. Das willst du doch nicht, oder? :) :)

Andriy Gordiychuk
quelle