1. Home
  2. Blöcke verwenden
  3. Design
  4. Bilder mit mehreren Auflösungen

Bilder mit mehreren Auflösungen

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 3 erforderlichen Größen erstellt haben, Blocs macht es sehr einfach, sie einem Projekt hinzuzufügen, um die richtige Größe basierend auf der Bildschirmdichte des Benutzers bereitzustellen.

So fügen Sie mehrere Auflösungen für ein Bild hinzu BricWählen Sie einfach das Bild auf der Design-Leinwand von aus Linksklick und navigieren Sie dann zu den Optionen des Seitenleisteninspektors. Unter dem Abschnitt beschriftet Daten und Zahlengibt es eine segmentierte 3-Wege-Steuerung, bei der jede Option gekennzeichnet ist @1x, @2x . @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 . @3xDiese zusätzlichen Bilder werden einem Besucher bereitgestellt, wenn er ein Gerät mit einer höheren Pixeldichte hat.

 

Die Bilder sehen verschwommen aus Blocs

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.

Aktualisiert am 15. Oktober 2018

War dieser Artikel hilfreich?

Verwandte Artikel