WebデザイナーがRetinaディスプレイデバイス向けの画像を作成する方法

特記事項:この記事は、Chris Spooner の英語記事「Web デザイン用の Retina グラフィックスを作成する方法」に基づいて翻訳されています。翻訳全体には、私たち自身の理解と考えが含まれています。翻訳が良くなかったり間違っていたりする場合は、同僚や友人に指摘してください。 AppleはRetinaディスプレイに適した製品をさらにリリースしました。これまでのところ、Retina スクリーン技術をサポートする Apple デバイスには、「iPhone」、「iPod」、「iPad」、「Macbook Pro」などが含まれます。これらのデバイスは、より繊細で滑らかで高品質の画像効果をユーザーに提供し、ユーザーの視覚体験を向上させます。 Web デザイナーとして、Web サイト用に Retina 対応の画像をどのように作成しますか?これが今日私たちが学ぶ内容です。

結局のところ、これはまったく新しい技術なので、当初は、Retina 画面上の巨大な画像に対応するために、より大きな画像を使用することは想定していませんでした。しかし、しばらく統計をとってみると、Apple のデバイスがモバイル市場の大きなシェアを占めており、そのほとんどが「iPhone」、「iPod」、「iPad」であり、これらのデバイスはすべて Retina スクリーン テクノロジーをサポートしていることがわかりました。 13 インチおよび 15 インチの Retina ディスプレイのユーザーのほとんどは、Chrome、Firefox、Safari、IE を使ってインターネットを閲覧しています。Opera をサポートする必要がある場合、ニッチなユーザー層を対象としていることになります。 （私のウェブサイトの統計でもこの状況が示されています）

Retina 画像は高解像度 (PPI) で保存するだけでよいと思われるかもしれませんが、そうではありません。 Retina ディスプレイでは、画像を 2 倍のサイズで保存するだけです。つまり、画像を 200 x 200 ピクセル (CSS ピクセル) で保存する場合は、400 x 400 ピクセルで保存する必要があります。これらの特大画像は元の画像と同じサイズで表示され、Retina 画面上で滑らかで鮮明な外観を実現します。

簡単そうに聞こえますが、画像のサイズを 2 倍にするにはどうすればよいでしょうか?

Illustrator を使ってロゴやアイコンをデザインする

ベクター グラフィックスは、Retina グラフィックスを作成するのに最適なソリューションです。ロゴやアイコンを EPS または Ai ファイルとして持っている場合、その画像を Photoshop にエクスポートまたはコピーすると、ベクター画像を任意のサイズに拡大縮小できます。貼り付けられた要素は、ベクター パスを保持するスマート オブジェクトとして使用できるため、2 倍にして Retina に適した特別な画像としてエクスポートできます。

Photoshopのベクター機能を使用する

Photoshop はピクセル グラフィック アプリケーションですが、ベクター グラフィックを作成できないわけではありません。各グラフィック ツールはピクセル レイヤーだけでなくベクター レイヤーも作成できるため、すべてのレイヤー スタイル効果はスケーラブルです。すべてを 2 倍にすると、ほぼすべてのエフェクトがちょうど 2 倍のサイズに拡大されます。

ピクセル画像を拡大する

デザイナーとして、画像を軽々しく拡大したくないというのが 1 つのルールですが、デザインしたサイトに Retina 画像を追加し直す場合、すべての画像を手動で再作成する必要はありません。通常、画像を拡大するとぼやけてギザギザになりますが、Photoshop には「Neares Neighbor」というメニュー オプションがあり、ぼやけた外観やギザギザのエッジを回避して、画像を使える状態にするのに非常に役立ちます。要素が読み込まれるまで読み込まれませんが、タイムリーな置き換えを提供します。

200% で設計してから縮小しますか?

必要なアイコンを作成するために要素を縮小できるように、Web レイアウト ページを 2 倍のサイズで作成できないのか、とお考えかもしれません。これは従来の印刷デザイン理論では実現可能ですが、Web デザインでは実現できません。ウェブデザインはピクセルベースで動作し、完璧な形状と線を作成するためです。画像を一定の比率で拡大し、Photoshop ソフトウェアでエクスポートした場合でも、特に小さなアイコンの場合、エクスポートされた画像はぼやけて見えます。

標準画像の 2 倍のピクセル サイズを持つ標準画像のコピーを作成したら、さまざまな方法を使用してページに読み込むことができます。ファイルに名前を付ける簡単な方法は次のとおりです。標準画像と Retina 画面画像を同じフォルダに配置し、Retina 画像に通常の画像ファイル名の末尾に「 @2x 」を追加して名前を付けます。たとえば、通常の画像ファイル名が「snarf.jpg」の場合、Retina 画面上の画像には「[email protected]」という名前を付けます。

シンプルなJavaScriptメソッド

HTML 画像タグ

翻訳者の手話:フロントエンド技術のブログ記事を翻訳するのは今回が初めてです。翻訳はすべて原文に沿って行い、翻訳の過程で技術に関する私の個人的な理解を少し加えました。翻訳に間違いがありましたら、ご指摘ください。ありがとう！