crop_original プレースホルダー画像ジェネレーター star

デザイナーや開発者がプレースホルダー画像を使う理由

サイトの実際の写真やイラスト、商品画像が用意されるずっと前から、誰かがそのページに画像が入った状態を確認する必要があります。空のグレーのボックスや画像読み込みエラーのアイコンだけで組まれたレイアウトは実態を誤らせます。余白や縦横比、画像の周りでテキストがどう折り返されるかは、その領域に実際に何かが配置されて初めて正しく確認できるからです。プレースホルダー画像は、最終的に使われる素材の代わりを一時的に務めることでこの問題を解決します。正しい幅と高さを持ち、グリッド内の正しい位置に収まり、最終コンテンツがまだ存在しなくても、デザイナーや開発者がレイアウトが機能しているかどうかを判断できるようにします。プレースホルダーの中身——色やラベル——はあえて重要ではありません。重要なのは、その寸法と縦横比が、実際に使われる画像のものと一致していることです。

このため、人気のプレースホルダー画像サービスは伝統的に、サイズを直接URLに埋め込む方式を採用してきました。たとえば800×600の画像をリクエストすると、「800 × 600」という文字が描かれたグレーの長方形が返ってくる、という具合です。この描き込まれたサイズ自体にも意味があります。モックアップをひと目見た人が、HTMLを調べなくても画像枠が想定どおりの寸法になっているかを即座に確認できるからです。このツールも同じ慣習に従っています。テキスト欄を空欄のままにすると、長方形には自動的にその幅と高さがラベルとして表示されます。もちろん、キャプションや仮のブランド名など、そのボックスに収まるべき任意のテキストを入力してプレビューすることもできます。

なぜSVGはPNGより優れたプレースホルダー形式になり得るのか

PNG形式のプレースホルダーはピクセルの集合です。テキスト入りの単色800×600の長方形であっても、そのうちの大部分が均一な一色であるにもかかわらず、48万個すべてのピクセルについて色情報を保持しなければなりません。一方SVG形式のプレースホルダーは、そもそもピクセルでできていません。「この幅と高さの長方形をこの色で描き、その中央にこのテキストを描く」という形状を記述する短いテキストブロックにすぎません。このツールが生成するような、単色とテキストだけのシンプルなプレースホルダーであれば、この記述はたいてい数百バイト程度で済み、同等のPNGよりも劇的に小さくなります。SVGには、レスポンシブなレイアウトで使うプレースホルダーにとってさらに重要な、もう一つの利点があります。固定されたピクセルグリッドではなく数学的な図形の指示によって定義されているため、画質の劣化やジャギーなしにどんなサイズにも拡大・縮小できます。一方、PNGは本来の解像度を超えて引き伸ばすと目に見えてぼやけてしまいます。

どちらの形式も、ここでは同じ手順で生成されます。まず選択した背景色で長方形を塗りつぶし、ラベルのテキストを水平・垂直の両方向で中央に配置します。テキストのサイズはボックスの寸法に比例して調整されるため、小さなプレースホルダーが過大なテキストに押しつぶされることはありません。PNG版はHTML5のcanvas要素上に描画され、canvas.toDataURL()でエクスポートされます。SVG版は、<rect>要素と<text>要素を含むXML文字列として直接構築され、ファイルとしてダウンロードされます。ページを読み込むたびにリモートURLから画像を取得する——つまり毎回本物のネットワークリクエストを発生させる——一般的なプレースホルダーサービスとは異なり、ここではすべてローカルで完結します。リクエストがブラウザの外に出ることは一切なく、外部サービスがダウンしても失敗する要素がなく、他人のサーバーが課すサイズ制限も存在しません。