多重解像度画像

現在、ほとんどの携帯電話と多くの最新のコンピューターは高解像度（Retina）画面を備えています。これは、ピクセル密度が高いことを意味します。 サイトの画像を標準画面と高解像度画面の両方で非常に鮮明に見せたい場合は、ピクセル密度の異なる画像ファイルの追加バージョンを提供する必要があります。

解決要件

通常、複数の解像度のファイルがXNUMXつのサイズで必要です。

@1x –標準解像度 1：1ピクセル

@2x –ダブル解像度 2：1ピクセル

@3x –トリプル解像度 3：1ピクセル

デザインのバックグラウンドを持っていない場合、これは少し混乱するように聞こえるかもしれません。 基本的に @2x 画像はピクセル単位のサイズのXNUMX倍です @1x 画像と @3x 画像はXNUMX倍の大きさです @1x 画像、例えば

@1x - 50x50px 通常サイズ

@2x - 100x100px @ 2xの1倍のサイズ

@3x - 150x150px @ 3xの1倍のサイズ

多重解像度画像を作成する場合、高解像度のファイル名にテキストサフィックスを適用するのが一般的です。これにより、画像を簡単に識別できます。

•my-image.jpg

•my-image@2x.jpg

•my-image@3x.jpg

複数の解像度を適用する

必要な 1 つの解像度サイズ (@2x、@3x、@XNUMXx) で画像を作成したら、 Blocs 実装が非常に簡単になります。

自動セットアップ

限り 3つすべて あなたのイメージのバリエーションには、 同名 と @2x と @3x 名前にサフィックスが適用されます (該当する場合)。標準解像度の画像を画像 Bric に適用すると、高解像度バージョンも自動的に適用されます。

手動セットアップ

複数の解像度の画像アセットに一致する名前がない場合は、インスペクタコントロールを使用して、アセットの各解像度を画像ブロックに手動で適用できます。デザインキャンバスで画像を選択するだけです。 左クリック 次に、サイドバーのインスペクターオプションに移動します。 ラベルの付いたセクションの下 Rescale データ、各オプションにラベルが付けられた3方向のセグメント化されたコントロールがあります @1x, @2x と @3x. 左クリック 3つのオプションのいずれかが、そのターゲット解像度の画像オプションを設定します。 今なら 左クリック セグメント化されたコントロールのすぐ下にある画像のサムネイルでは、その解像度で表示する特定の画像ファイルを選択するように求められます。

両方に追加の画像を適用できるようになりました @2x と @3x、これらの追加の画像は、訪問者がより高いピクセル密度のデバイスを持っている場合に提供されます。