ダミー画像生成
Placeholder Image
好きなサイズの単色またはグラデーションのダミー画像を、寸法を焼き込んで作ります。
必要な大きさちょうどの灰色の箱に、寸法を描いたものです。本物の写真を待っているレイアウトのためのものです。CSSにそのまま貼れるSVGのデータURIとして出てくるので、どのPNGより小さく、リクエストもかかりません。
'/%3E%3Ctext x='50%25' y='50%25' fill='%23ffffff' font-family='system-ui, sans-serif' font-size='79' text-anchor='middle' dominant-baseline='central'%3E1200×630%3C/text%3E%3C/svg%3E)
SVG data URI
580 bytebase64 ではなくパーセントエンコードです。25% ほど小さく、しかも読めます。そのまま貼り付けてください: background-image: url("…")
使い方
大きさを決めます
入る場所の正確なピクセル寸法です。ラベルを入れておくと画像に描き込まれるので、大きさの違う箱がレイアウトの中で目に付きます。
単色・グラデーション・ノイズから選びます
単色とグラデーションはSVGのままです。ノイズはPNGにするしかありません。ピクセルごとの乱数の場をSVGで書くと、何メガバイトもの矩形になります。
データURIをコピーします
Base64ではなくパーセントエンコードです。25%ほど小さく、スタイルシートの中で読める形のまま残ります。
よくある質問
ノイズだけSVGにできないのはなぜですか
SVGには、どのエンジンでも同じに描かれるピクセル単位の乱数の要素がないからです。そのまま書くなら1ピクセルにつき1つの矩形で、400×300の箱なら12万個の要素になります。
ノイズは毎回変わりますか
変わりません。シードから作るので、同じ設定なら同じ画像になります。描画のたびに変わるプレースホルダーは、見た目の回帰テストを役に立たなくします。
本番で使ってもいいですか
データURIなら使えます。数百バイトで、404になることが決してありません。第三者のプレースホルダーサービスについては、そうは言えません。ただ、消すのを忘れないでください。出荷されたプレースホルダーは、コードレビューでは見えません。
ここから渡せます
次の一手
このツールが出したものをそのまま受け取れる道具です。
BlurHash / ThumbHash 生成
BlurHash / ThumbHash
画像を短いBlurHashまたはThumbHashの文字列に符号化し、読み込み中の仮表示に使えるようにします。
デバイスモックアップ
Device Mockup
スクリーンショットをスマホ・タブレット・ノートPC・ブラウザの枠にはめ、背景と影を添えます。
画像をBase64・データURIに
Image to Base64 / Data URI
画像をBase64文字列や、CSS・HTML・JSONにそのまま貼れるデータURIに符号化します。
背景透過（切り抜き）
Background Remover
平坦な背景や単色の背景をOKLabでキーイングして透過PNGにし、縁はブラシで直せます。
EXIF情報の削除
EXIF Remover
画素には手を触れずに、カメラ・GPS・編集履歴のメタデータだけを写真から消します。
ファビコン生成
Favicon Generator
ICO・各サイズのPNG・Appleタッチアイコン・ウェブマニフェストを一式で作り、貼り付けるHTMLも添えます。