WEBデザイナーを助けてくれる無料の画像プレースホルダーサービス
最強のプレースホルダーサービスPlaceholder.com
WEBデザインの仕事をしていると、レイアウト組みで仮の画像を入れる必要があったり、お客様からサイトコーディングのみのご依頼をお受けした時などに、モックアップ用画像を入れたくなる場面があります。
Placeholder.comはそんな時にタグだけで指定サイズの画像を作ってくれる大変便利なサービス。タグで呼びだして表示するので画像のダウンロードも不要。サイズも色も文字さえも思いのままで、HTTPSもWEBP画像もしっかりとサポートしている最強のプレースホルダーサービスです。
使い方
URLの後に画像サイズを指定するだけで、プレースホルダー画像が得られます。2018年からはSSLもサポートしているので安全です。
<img src="https://via.placeholder.com/300">サイズの変更
URLの後に数字(例：400×300)で指定するだけです。
<img src="https://via.placeholder.com/400x300">画像形式の設定
画像形式はデフォルトでPNGですが、拡張子を追加することで画像形式の指定ができます。
サポートしている画像形式
- PNG
- JPG
- JPEG
2019年からはGoogleの新しいWEBP画像形式もサポートされました。
- WEBP
公式サイトにはデフォルトは.GIFと記載があるのですが、GIF画像が表示されないため現在GIFはサポート対象外のようです。（GIFを指定してもPNGになります）
<img src="https://via.placeholder.com/400x300.gif">
<img src="https://via.placeholder.com/400x300.jpg">
<img src="https://via.placeholder.com/400x300.png">
<img src="https://via.placeholder.com/400x300.webp">カスタムテキストの設定
URLの最後にクエリ文字列を使用してテキストを指定できます。使える文字は半角英数字と記号のみで日本語には非対応です。
<img src="https://via.placeholder.com/400x300.gif?text=image_1">
スペースを入れたい場合は「+」を入れてつなぎます。
<img src="https://via.placeholder.com/400x300.gif?text=image+1">
色の設定
デフォルトはテキストは黒で背景は灰色ですが、画像サイズの後に16進数コード追加で色指定ができます。2つコードを入れると2番目のコードはテキストカラーになります。
<img src="https://via.placeholder.com/400x300.gif/049DD9/0477BF?text=image_2">
とても便利ですね。
Placeholder.comを使ってWEB製作の時短化を加速させましょう。
公式サイト Placeholder.com
https://placeholder.com/