網頁應用 画像ツール 読了目安 約3分

画像一括リサイズ・WebP変換ツール|アップロード不要でブラウザ内で縮小

ブログに載せる写真を小さくしたい、SNSに送る前に容量を減らしたい。そんなときのために、画像をアップロードせずにブラウザの中だけで縮小・変換できるツールを作りました。

画像一括リサイズ・変換

画像を選ぶと「変換する」を押せるようになります。

    画像はこのページの中だけで処理され、サーバーには送信されません。

    このツールでできること

    写真を選んで「変換する」を押すと、指定した最大サイズに収まるよう縦横比を保ったまま縮小し、選んだ形式で保存し直します。複数の画像をまとめて処理でき、変換前後の容量も一覧で確認できます。

    • 一括縮小:幅と高さの上限を決めると、それを超える画像だけが縮小されます。
    • 形式の変換:WebP・JPEG・PNGから選べます。Webに載せるならWebPが軽くなりやすい形式です。
    • 画質の調整:WebPとJPEGでは画質を40〜100で指定できます。
    • Exif情報の除去:保存し直す際、撮影日時や位置情報などのメタデータは含まれません。

    使い方

    1. 点線の枠に画像をドラッグするか、ファイル選択から画像を選びます。スマホでは写真ライブラリから複数選択できます。
    2. 最大の幅・高さ、書き出し形式、画質を決めます。迷ったら初期値(1600px・WebP・画質80)のままで大丈夫です。
    3. 「変換する」を押すと、処理が終わった画像から順に一覧へ表示されます。
    4. 各行の「保存」から画像をダウンロードします。iPhoneでは長押しして「写真に保存」も使えます。

    設定値の目安

    用途最大サイズ形式・画質
    ブログ本文の写真1600px前後WebP・75〜82
    記事のサムネイル800px前後WebP・80
    文字の多いスクリーンショット元のサイズPNG、またはWebP・90以上
    メール添付・資料用1280px前後JPEG・80
    ロゴ・イラスト(透過あり)表示サイズの2倍PNG、またはWebP・90

    画質の数字は「高ければ高いほど良い」わけではありません。多くの写真では、80と95を並べて見比べてもほとんど違いが分からない一方、容量は2倍近く変わることがあります。まず80で試し、気になる劣化があれば少しずつ上げるのがおすすめです。

    WebPへの変換を自分のサイトに取り入れる手順は、画像をWebPに変えてページを軽くする手順で詳しく解説しています。

    仕組みと、端末内で完結する理由

    このツールは、ブラウザに標準で備わっている「Canvas」という描画機能を使っています。選んだ画像をいったんCanvasに縮小して描き直し、指定した形式で書き出すという流れです。すべての処理がブラウザの中で行われるため、画像がインターネットへ送られることはありません。

    描き直すときに画素の情報だけを取り出すので、写真に埋め込まれていた撮影日時、カメラの機種、位置情報などのExifデータは新しいファイルに含まれません。SNSや掲示板に写真を載せる前に通しておくと、うっかり自宅の位置情報を公開してしまう心配を減らせます。

    一部のブラウザ(古いSafariなど)は、WebP形式での書き出しに対応していません。その場合は自動的にお知らせが出るので、JPEGかPNGを選んでください。表示はどのブラウザでもできます。

    よくある質問

    何枚まで一度に変換できますか?
    上限は設けていませんが、処理は端末の性能に左右されます。スマホで大きな写真を数十枚まとめて変換すると時間がかかるため、10枚程度ずつに分けると快適です。
    変換したら容量が増えました。
    もともと強く圧縮されたJPEGや、小さなPNGを高い画質で変換すると、容量が増えることがあります。その場合は画質を下げるか、元の画像をそのまま使ってください。一覧では増えた場合も分かるように表示しています。
    写真の向きがおかしくなりました。
    最近のブラウザは写真の回転情報を読み取って正しい向きで描画します。古いブラウザでは横倒しになる場合があるため、ブラウザを最新版に更新してお試しください。
    HEIC形式の写真は使えますか?
    ブラウザがHEICを表示できる環境(主にSafari)でのみ読み込めます。読み込めない場合は、iPhoneの設定で「互換性優先」を選ぶか、共有時にJPEGへ変換してからお使いください。