多重解像度画像

現在、ほとんどの携帯電話と多くの最新のコンピューターは高解像度(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、高解像度バージョンも自動的に適用されます。

手動セットアップ

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

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

 

画像がぼやけて見える Blocs

あなたが走っているなら Blocs 高解像度の画面では、画像がぼやけて見える場合があります。 これは、設計環境内の事実によるものです Blocs デザインキャンバスに画像の網膜なしバージョンを表示します。 プレビューモードに入るとき、またはサイトをエクスポートするとき、画像の高解像度のバリエーションが正しく表示されるようになっていることに気付くはずです。

12年2023月XNUMX日に更新

この記事は役に立ちましたか?

関連記事