ブラウザ上で完結する仕組み
当ツールは、2枚の画像を重ねてスワイプで比較できる「画像比較スライダー」のHTMLコードを生成します。最大の特徴は、外部サーバーへのアップロードを一切行わず、お使いのブラウザ上ですべての処理が完結する点です。
画像データは「Data URI」という形式に変換され、スライダーを動かすための軽量なJavaScriptとともに、ひとつの埋め込みコードとして出力されます。外部のライブラリやCDNに依存しないため、ブログやCMSのHTML編集画面に貼り付けるだけですぐに機能します。
画像サイズと画質の自動調整
スライダーを正確に機能させるためには、比較する2枚の画像サイズとアスペクト比（縦横比）、および被写体の位置合わせが完全に一致している必要があります。もし縦横のピクセル数が異なる画像を読み込んだ場合、2枚目の画像は1枚目のサイズに合わせて強制的に引き伸ばされるためご注意ください。
また、生成されるHTMLコードのデータ量が大きくなりすぎるのを防ぐため、読み込まれた画像は自動的に最大幅1400ピクセルに縮小され、JPEG形式に再エンコードされます。
ご利用上の注意点と制限
画像データを直接HTMLコード内に埋め込む仕組みを採用しているため、出力されるテキスト量は非常に多くなります。そのため、1つのページ内に複数のスライダーを設置したり、ギャラリー用途で使用したりすると、ページのファイルサイズが肥大化し読み込み速度に悪影響を及ぼす可能性があります。記事内でポイントとなる1〜2箇所の比較に絞ってご利用ください。
画像圧縮による画質劣化を避けたい場合や、ピクセル単位での厳密な比較が必要な場合は、生成されたコード内のData URI部分を、ご自身のサーバーにアップロードした画像のURLに手動で書き換えてご使用ください。
よくある質問
1つのページに複数の画像比較スライダーを設置できますか？
技術的には可能ですが推奨されません。画像を文字列として直接コードに埋め込む仕組み上、複数設置するとページのファイルサイズが著しく肥大化し、読み込み遅延の原因となります。
画像のサイズや縦横比が異なる場合はどうなりますか？
2枚目の画像が1枚目のサイズに合わせて強制的に引き伸ばされるため、正確な比較ができません。あらかじめ画像編集ソフト等で2枚のピクセル数と被写体の位置を完全に一致させてから読み込んでください。
生成されたスライダーはどのCMSやブラウザでも動きますか？
基本的なHTMLとJavaScriptのみで構成されており、外部ライブラリに依存しないため、WordPressをはじめとする多くのCMSやモダンブラウザで動作します。HTMLの直接記述が許可されている環境であればどこでも使用可能です。
高解像度で画質を落とさずにスライダーを作る方法はありますか？
当ツールではコード肥大化を防ぐため自動的に最大幅1400ピクセルのJPEGに圧縮されます。無劣化の画像を使用したい場合は、生成されたコード内のData URI部分を、ご自身でサーバーにアップロードした画像のURLに置き換えてください。
読み込んだ画像がサーバーに保存されたり、外部に流出したりしませんか？
一切ありません。画像の変換やコードの生成はすべてご使用のブラウザ内（ローカル環境）で行われます。当ツールのサーバーにデータが送信されることはないため、公開前の機密画像などでも安全に処理できます。
ツールの不具合や改善案はありますか。 フィードバックを送る