画像圧縮・リサイズ
JPG・PNG・WebP をブラウザだけで圧縮・縮小・変換。
EXIF・GPS位置情報の自動削除、目標サイズ指定、複数ファイル一括処理に対応。
ここに画像をドラッグ&ドロップ(複数可)
または
JPG・PNG・WebP・GIF対応/複数ファイルの一括処理OK
📐 SNS・Web 画像サイズ推奨一覧
リサイズ機能で各サービスの推奨サイズに合わせて出力できます。
| サービス | 用途 | 推奨サイズ(px) | アスペクト比 | 推奨形式 |
|---|---|---|---|---|
| フィード(正方形) | 1080 × 1080 | 1:1 | JPG | |
| フィード(横長) | 1080 × 566 | 1.91:1 | JPG | |
| フィード(縦長) | 1080 × 1350 | 4:5 | JPG | |
| ストーリーズ・リール | 1080 × 1920 | 9:16 | JPG | |
| プロフィール画像 | 320 × 320 | 1:1 | JPG | |
| 🐦 X(旧Twitter) | ||||
| X | 投稿画像 | 1200 × 675 | 16:9 | JPG / PNG |
| X | プロフィール画像 | 400 × 400 | 1:1 | JPG / PNG |
| X | ヘッダー画像 | 1500 × 500 | 3:1 | JPG / PNG |
| 🌐 Web・ブログ | ||||
| Web全般 | OGP・シェア画像 | 1200 × 630 | 1.91:1 | JPG / PNG |
| ブログ | 記事アイキャッチ | 1200 × 630 | 1.91:1 | JPG / WebP |
| ブログ | 記事内画像 | 800 〜 1200 幅 | 自由 | JPG / WebP |
| 🛒 EC・その他 | ||||
| Amazon | 商品メイン画像 | 1000 × 1000 以上 | 1:1 | JPG |
| メルカリ | 商品画像 | 1000 × 1000 推奨 | 1:1 | JPG |
| ファビコン | ブラウザアイコン | 32 × 32 / 180 × 180 | 1:1 | PNG |
※ 推奨サイズは各サービスの仕様変更により変わる場合があります。最新情報は各公式サイトでご確認ください。
📚 写真・画像編集グッズ
写真撮影・編集をより快適にするアイテム
画像圧縮・リサイズツールの使い方
画像をドラッグ&ドロップするか「ファイルを選択」ボタンで画像を選択してください。出力形式・画質・リサイズを設定して「変換・圧縮する」ボタンを押すと処理が完了します。
本ツールはすべての処理をブラウザ上で行います。画像がサーバーに送信されることはないので、プライベートな写真や機密性の高い画像も安心してご利用いただけます。
写真はJPEG(非可逆・サイズ小)、透過が必要なロゴ・イラストはPNG(可逆・透過対応)、Webでの速度重視はWebP(JPEG比約30%削減)が適しています。用途に合わせて出力形式を選んでください。
JPEG品質80〜85%設定で元サイズの20〜50%に削減でき、画質の劣化もほとんど気になりません。Webサイト掲載なら1枚あたり200KB以下、ファーストビュー画像は100KB以下を目安にすると表示速度が改善します。
Xアイコン400×400px・Instagramフィード1080×1080px(正方形)・OGP画像1200×630px・ブログ記事内画像横幅800〜1200pxが一般的な目安です。本ツールで一括リサイズして最適化してください。
複数の画像を選択してまとめて圧縮・リサイズできます。ECサイトの商品画像・ブログ記事の差し込み画像など、大量の画像を一括最適化するときに便利です。
🔧 この圧縮ツール、中で何をしているの?
「画像を小さくする」と一言で言っても、ブラウザの中では地味な工程がいくつも走っています。難しい話は抜きで、ざっくり4つだけ。
読み込んだ画像を、そのまま保存しているわけではありません。<canvas> という画面に出さない下描き台へ一度描き直し、そこから改めて書き出しています。リサイズも形式変換も、この「描き直し」の一環です。
元の写真に付いていたGPSや撮影日時などのメタ情報は、この描き直しをした時点で丸ごと落ちます。わざわざ削除処理を書いているというより、「描き直したら元データは付いてこない」という仕組みを利用しています。だからサーバーに送らずとも位置情報が消せるわけです。
画質を何%にすればちょうど200KBに収まるか、実は計算式で一発では出せません。そこで「品質70%で書き出す→大きすぎた→60%→今度は小さすぎ→65%…」と、上げ下げしながら目標に近づけています(いわゆる二分探索)。数回試すだけで、かなり近いところに着地します。
複数画像をまとめてダウンロードするZIPは、外部サービスに頼らずブラウザ内で組み立てています。だから何枚投げ込んでも、画像が外に送信されることはありません。
🙋 作った人のひとりごと
見た目は地味なツールですが、作るときに何度も転びました。せっかくなので「ここでハマった」話を正直に置いておきます。誰かの参考になれば。
😩 いちばん苦戦したのは「iPhoneの写真が横に倒れる」
最初、自分のPCのスクショばかりでテストしていて完璧!と思っていたんです。ところが友人にiPhoneで撮った縦写真を入れてもらった瞬間、出力が全部横倒し。血の気が引きました。原因は、さっきの「描き直し」で写真の向き情報まで一緒に消えてしまうこと。EXIFが消えるのは長所なんですが、その裏で「上下の向き」も道連れになる、という副作用でした。今は描く前に向きを読んで回転を補正しています。長所と短所が同じ仕組みから来てるの、地味に面白かったです。
🤔 「圧縮したのにファイルが大きくなった」問題
もう十分小さいスクショを、うっかり品質95%で通すと、逆にサイズが増えることがあります。「圧縮ツールなのに太った」って、いちばん言われたくないやつです…。なので今は、変換して元より大きくなってしまったら、そっと元のファイルのまま返すようにしています。地味ですが、これが一番クレームを防いでくれています。
🥴 一括処理でタブが重くなって半日溶かした話
20枚くらいまとめて放り込むと、だんだんブラウザがもったり重くなる不具合が出て。原因はプレビュー画像の一時データを使い終わった後もずっと抱えっぱなしにしていたことでした。「使い終わったら捨てる」を入れ忘れていただけ、という…。気づくのに半日かかったわりに、直したのは数行。プログラミングあるあるですね。
— MyTool Studio 中の人
🛠️ このツールの「全コード+作り方」をnoteで公開中
上のこぼれ話で出てきた向きの補正・目標サイズの探り方・ZIPの自前生成を、実際のコードでどう書いているか。HTML1ファイルで動く完成版のソースを、コメント付きで丸ごと公開しています。
- コピペで動く完成アプリ一式(HTML1ファイル)
- 全ソースコード+「なぜこう書くか」の解説
- EXIF・向き補正/目標サイズの二分探索/ZIP自前生成の実装+カスタマイズ手順つき
noteマガジン「まるっとアプリ」#03/本ツールは無料で使い放題です。