Die meisten Mobiltelefone und viele moderne Computer haben jetzt hochauflösende (Retina) Bildschirme, was bedeutet, dass sie eine höhere Pixeldichte haben. Wenn Sie möchten, dass die Bilder von Ihrer Website sowohl auf Standardbildschirmen als auch auf hochauflösenden Bildschirmen sehr scharf aussehen, müssen Sie zusätzliche Versionen Ihrer Bilddateien mit unterschiedlichen Pixeldichten bereitstellen.
Auflösungsanforderungen
Dateien mit mehreren Auflösungen sind normalerweise in drei Größen erforderlich:
@1x - Standardauflösung 1: 1 Pixel
@2x - Doppelte Auflösung 2: 1 Pixel
@3x - Dreifache Auflösung 3: 1 Pixel
Wenn Sie keinen Designhintergrund haben, klingt dies möglicherweise etwas verwirrend. Grundsätzlich ein @2x Bild ist doppelt so groß in Pixel wie ein @1x Bild und ein @3x Bild ist dreimal so groß wie ein @1x Bild, z
@1x - 50 x 50 Pixel normale Größe
@2x - 100 x 100 Pixel 2x so groß wie @ 1x
@3x - 150 x 150 Pixel 3x so groß wie @ 1x
Beim Erstellen von Bildern mit mehreren Auflösungen wird häufig ein Textsuffix im Dateinamen für die höheren Auflösungen angewendet, damit sie leicht identifiziert werden können, z
• mein-image.jpg
• mein-image@2x.jpg
• mein-image@3x.jpg
Anwenden mehrerer Auflösungen
Sobald Sie Ihre Bilder in den drei erforderlichen Auflösungsgrößen (@1x, @2x und @3x) erstellt haben, Blocs macht es sehr einfach, sie umzusetzen.
Automatisches Setup
So lange wie alle drei Variationen Ihres Bildes haben die gleicher Name und dem @2x und @3x Das Suffix wird auf ihre Namen angewendet (falls zutreffend), wenn Sie das Bild mit Standardauflösung auf ein Bild anwenden Bric, werden automatisch auch die Versionen mit höherer Auflösung angewendet.
Manuelle Einrichtung
Wenn Ihre Bild-Assets mit mehreren Auflösungen keine übereinstimmenden Namen haben, können Sie jede Auflösung eines Assets manuell auf ein Bild anwenden Bric, mithilfe der Inspektor-Steuerelemente. Wählen Sie einfach das Bild auf der Design-Leinwand aus Linksklick und navigieren Sie dann zu den Optionen des Seitenleisteninspektors. Unter dem Abschnitt beschriftet Datumgibt es eine segmentierte 3-Wege-Steuerung, bei der jede Option gekennzeichnet ist @1x, @2x und @3x. Linksklick Mit einer der drei Optionen werden die Bildoptionen für diese Zielauflösung festgelegt. Nun, wenn Sie Links Klick In der Miniaturansicht des Bildes direkt unter dem segmentierten Steuerelement werden Sie aufgefordert, die spezifische Bilddatei auszuwählen, die in dieser Auflösung angezeigt werden soll.
Sie können jetzt zusätzliche Bilder für beide anwenden @2x und @3xDiese zusätzlichen Bilder werden einem Besucher bereitgestellt, wenn er ein Gerät mit einer höheren Pixeldichte hat.
Wenn du rennst Blocs Auf einem hochauflösenden Bildschirm können Sie feststellen, dass Bilder verschwommen erscheinen. Dies liegt an der Tatsache innerhalb der Designumgebung Blocs Zeigt die Nicht-Retina-Version eines Bildes auf der Design-Leinwand an. Wenn Sie in den Vorschaumodus wechseln oder Ihre Site exportieren, sollten Sie feststellen, dass die hochauflösende Variation des Bildes jetzt korrekt angezeigt wird.