画像置換を使うと、ウェブページ上の任意の画像をクリックして自分の画像に置き換えられます — ローカルファイルのアップロードまたは画像 URL の貼り付けで対応します。置換した画像は元の要素の寸法にぴったり合わせられ、ページレイアウトが保持されます。本番環境のコンテキストで新しいアセットの見た目をテストしたり、実際のコンテンツでモックアップを作成したり、カスタム画像でスクリーンショットを撮ったりするのに最適です。
デザイナーや開発者は、既存のレイアウトに新しい画像がどのように表示されるかを確認する必要が頻繁にあります。新しいヒーロー画像は現在のテキストオーバーレイと合うでしょうか？新しい商品写真は既存のカードグリッドに適切に表示されるでしょうか？クライアントのロゴはヘッダーに適切なサイズでしょうか？通常、これらの疑問に答えるにはコードを編集し、画像ファイルを入れ替え、再ビルドしてプレビューする必要があります。画像置換はこれを即座に実現します — 変更したい画像をクリックし、置換画像をアップロードするか URL を貼り付ければ、元の要素の寸法とスタイルを維持しながら画像が即座に切り替わります。レイアウトはずれず、隣接する要素はそのままで、新しい画像が実際のページコンテキストでどのように見えるかを正確に確認できます。すべての変更は非破壊的で、ページを更新するとリセットされます。
ページ上の画像にカーソルを合わせるとハイライト表示されます。置き換えたい画像をクリックして選択します。ツールは img 要素、CSS background-image 要素、picture/source 要素を認識します。
コンピューターから画像ファイルをドラッグ＆ドロップするか、クリックしてファイルピッカーを開きます。PNG、JPG、WebP、SVG、GIF 形式に対応しています。ファイルはローカルで読み込まれ、サーバーにアップロードされることはありません。
他の場所でホストされた画像がありますか？URL を貼り付けるだけで即座に適用されます。Unsplash、Imgur、CDN、S3 バケット、または任意の直接画像リンクなど、公開アクセス可能な画像 URL であれば機能します。
置換画像は object-fit を使用して元の要素の寸法に合わせられるため、ページレイアウトはまったく変わりません。レイアウトのずれ、リフロー、グリッドの崩れが発生しません。新しい画像はそのスペースに適応します。
サイドバーパネルが現在のセッションで置き換えたすべての画像を記録します。元の画像と置換画像を一目で確認でき、履歴エントリをクリックすることで特定の置換を元に戻すことができます。
すべての置換はブラウザのメモリ上にのみ存在します。ページの実際の画像ファイルと HTML は変更されません。ページを更新するとすべての元の画像が即座に復元されます。どのウェブサイトでも安全に使用できます。
チームがホームページ用にヒーロー画像の候補を3つ持っています。それぞれをデプロイする代わりに、本番サイトを開いてヒーロー画像を各候補と入れ替えます。実際のテキストオーバーレイ、ナビゲーションバー、周囲のコンテンツと合わせて各候補の見た目を確認できます。
クライアントとの通話中に、ステージングサイトのプレースホルダー画像をクライアントの実際の商品写真やブランドアセットに置き換えます。最終デザインでコンテンツがどのように見えるかをブラウザ上でリアルタイムに実演します。
異なる地域のコンテンツを示すスクリーンショットが必要ですか？商品画像、チーム写真、機能グラフィックを地域固有のバージョンに置き換え、各市場向けのスクリーンショットをキャプチャします — 別個のビルドをデプロイすることなく実現できます。
異なるイラストスタイルや写真アプローチが既存のページにどのように見えるかを検討しています。画像を一枚ずつ入れ替えて、コードに触れることなく新しいデザイン方向性のビジュアルプロトタイプを構築します。
JPG を WebP バージョンに置き換えて品質が許容範囲内かを視覚的に確認します。または高解像度画像に交換して、レイアウトが 2x 画像を適切に処理するかをチェックします。ファイル変換を確定する前に、画像フォーマットの変更を視覚的にテストします。
DevSuite Pro のフローティングドックを開き、画像置換アイコンをクリックします。ツールが起動し、ページ上の画像がクリック可能なターゲットになり、カーソルを合わせるとハイライト表示されます。
ページ上の任意の画像をクリックします。現在の画像情報（ファイル名、寸法、サイズ）とアップロードまたは URL 貼り付けのオプションを示す置換ダイアログが表示されます。
コンピューターからファイルをドラッグ＆ドロップするか、クリックして参照するか、画像 URL を貼り付けます。置換は即座に適用され、画像がその場で切り替わります。
実際のページレイアウト内で新しい画像がどのように見えるかを確認します。テキストオーバーレイと合っているか、コンテナに適切に収まっているか、周囲のコンテンツとマッチしているかをチェックします。
他の画像をクリックして引き続き置き換えます。履歴サイドバーがすべての変更を記録します。終わったら、ページを更新してすべての元の画像を復元します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
