プレースホルダー画像ジェネレーター
サイズ、色、ラベルを選択するだけで、モックアップ、バナー、開発テスト用のプレースホルダー画像を即座に生成します。アカウント登録不要、透かしなし。
仕組み
プレビューはあなたの画像のシミュレーションではなく、それ自体が画像です。指定した正確なピクセル寸法のcanvas要素に2D描画APIで塗りつぶしと文字入れを行い、canvas.toBlobでPNG、JPG、WebPへ直接エンコードします。ラベルのフォントサイズは短辺に応じてスケールし(おおよそその8分の1、下限12px)、64pxのサムネイルでも4000pxのバナーでも文字が適切な比率を保ちます。写真モードでは、アップロードした画像がCSSのobject-fit: coverと同じように拡大されて中央でトリミングされ、情報量の多い画像の上でも読みやすいようラベルには半透明の濃い背景が付きます。
再描画はキー入力のたびに同期的に行われますが、より負荷の高いblobエンコードだけはわずかにデバウンスされるため、表示されるサイズがプレビューより一拍遅れます。計画しておくべき点が一つあります。単色のプレースホルダーは驚くほど圧縮効率が良いということです。4000×4000の単色PNGはたいてい40KB未満に収まります。DEFLATEが同一の行をほぼゼロまで平坦化してしまうためです。素早いモックアップには最適ですが、読み込みパフォーマンスをテストしているなら誤解を招きます。同じサイズの実写真はその100倍近く重くなるからです。正直なファイルサイズが欲しい場合は、写真背景モードを使うか、テストファイルジェネレーターと組み合わせて現実的なバイトサイズまで水増ししてください。
描画、エンコード、ダウンロードはすべてこのタブ内で完結し、ドロップした写真もオブジェクトURLとして読み込まれ、メモリから外に出ることはありません。開発者ツールを開き、生成中に「ネットワーク」タブを観察してください。画像を運ぶリクエストは一つもありません。