CodeKitHubなぜこれを使うのか？
- 自社サイトがPageSpeed Insightsで、ブログに貼った4MBのスマホ写真のせいで低評価になっている——ここで200KB未満に圧縮してからアップロードすれば、Core Web Vitalsの警告が解消します。
- 家族に旅行の写真をメールで送りたいのに、添付ファイルがメールサーバーの容量制限を超えてしまう——フォルダごとバッチ処理で圧縮すれば、外部サーバーを一切経由せず自分のパソコン内で完結します。
- 取引先から発売前の未公開の商品写真が届き、クラウドサービスには絶対にアップロードできない——このツールはブラウザ内で処理が完結し、サーバー通信が一切発生しないため、機密性の高い画像にも安心して使えます。
- Excelの表をスクリーンショットしたらJPGでは文字がにじんでほとんど読めない——JPGではなくPNGを選べば、テキストやシャープなエッジがそのまま保たれます。
- ネットショップの商品写真80枚をCMSに取り込む前に、同じ最大幅に統一してリサイズしたい——画像編集ソフトで1枚ずつ処理する代わりに、バッチモードで数分で完了します。
- 撮影場所のGPS情報が含まれた写真をそのままSNSに投稿したくない——Canvas APIによる再エンコードにより、EXIFの位置情報なども自動的に削除されます。
よくある質問
圧縮すると、画像の画質が悪くなってしまいますか？
画質が70～85％の場合、画面上で閲覧する写真では違いは実質的に見分けがつきません。目に見えるアーティファクトが現れるのは、画質が約50％を下回った場合です。ただし、テキストの多いスクリーンショットは例外です。JPG形式ではこうした画像でより早くアーティファクトが現れるため、WebP形式での出力か、画質を85％以上に設定することをお勧めします。
ファイルサイズやファイル数の制限はありますか？
いいえ。圧縮処理はサーバーではなくお使いのデバイス上で実行されるため、制限は一切ありません。50 MBの画像1枚でも、100枚の画像をまとめてでも圧縮できます。非常に大きな画像の場合でも、処理に少し時間がかかるだけです。
私の画像はどこかにアップロードされていますか？
いいえ。ファイルの読み込みと再エンコードは、HTML5のcanvas APIを使用して、すべてお使いのブラウザによって行われます。このページを読み込んだ後、オフラインになっても、圧縮処理を継続することができます。
出力形式はJPGとWebPのどちらを選べばいいでしょうか？
WebPは、同じ画質であれば通常25～35％ファイルサイズが小さく、最新のブラウザすべてで動作するため、ウェブサイトには最適です。JPGは、古いソフトウェアやプリンターを含め、あらゆる場所で開くことができるため、共有やメール送信には最適です。迷った場合は、JPGを選びましょう。
なぜ私のPNGファイルのサイズがこんなに小さくなったのですか？
PNGはロスレス形式であるため、写真には負荷がかかります。写真用のPNGファイルは、見た目が同じJPGファイルに比べて5～10倍の容量になることがよくあります。写真用のPNGをJPGやWebPに変換することで、最も大きな容量削減効果が得られます。PNGは、透明度が必要なグラフィックや、エッジが極めてシャープである必要があるグラフィックにのみ使用するようにしてください。
なぜ出力結果が元のデータよりも大きくなることがあるのですか？
画像がすでに大幅に圧縮されている場合、再エンコードしても効果はなく、むしろファイルサイズが増える可能性があります。このような場合はツールが通知してくれますので、その際は元の画像をそのまま保存しておいてください。
撮影場所やカメラ機種などのEXIF情報は圧縮時に削除されますか？
はい、副次的な効果として削除されます。画像はHTML5のcanvas APIによって完全に再描画・再エンコードされるため、GPS座標を含むEXIFメタデータはほぼすべて自動的に失われます。撮影場所を知られたくない写真をSNSなどで公開する際には、このプライバシー面のメリットも役立ちます。
非可逆圧縮と可逆圧縮の違いは何ですか？
非可逆圧縮（JPGや品質を指定したWebP）は、目に見えにくい画像データを永久に削除してファイルサイズを大幅に減らします。可逆圧縮（PNG）は内部の符号化方式を変えるだけで各ピクセルの値をそのまま保持するため、画質の劣化はありませんが、削減率はずっと小さくなります。
バッチモードで一度に処理できる画像の枚数に上限はありますか？
ツール自体に人為的な上限は設けていません。実質的な制限はブラウザが使えるメモリ量で、高解像度の写真を数百枚同時に処理するとタブの動作が重くなることがありますが、20〜50枚程度の通常のバッチ処理であれば問題なく完了します。
iPhoneで撮影したHEIC形式のファイルにも対応していますか？
ブラウザによります。SafariはHEICを直接読み込めますが、HEICはオープンなWeb標準ではないため、Windows上のChromiumベースのブラウザの多くは対応していません。その場合は、iPhoneの共有機能や変換ツールで事前にJPGへ変換してからアップロードしてください。
このツールとは？
画像圧縮ツールは、より効率的な（非可逆）設定で画像を再エンコードすることで、ファイルサイズを縮小します。スマートフォンで撮影した写真のファイルサイズは、多くの場合3～8 MBですが、ウェブサイトやチャットメッセージ、メールでは、200～500 KBの画像でも画面上では通常、見た目に違いはありません。 画像のサイズが小さければ、アップロードや読み込みが速くなり、ストレージ容量と帯域幅を節約できます。
このツールは、ブラウザ独自のコーデックを使用して、指定した画質で画像を再エンコードします。また、必要に応じて非常に大きな画像を適切な最大幅まで縮小することも可能です。これらは、ファイルサイズに影響を与える最も重要な2つの要素です。圧縮率と視覚的な画質は常にトレードオフの関係にあります。変更前後のファイルサイズをリアルタイムで確認できるため、画像ごとに最適なバランスを見つけることができます。
ファイルサイズの比較：JPG、WebP、PNG
同じ写真、同じ画質、しかし3つのサイズには大きな違いがあります。PNGは「大容量」（ロスレス形式で、写真の場合、JPGの5～10倍のサイズになることが多い）、JPGは汎用性の高い「中間」、WebPは通常、JPGよりも25～35％小さいサイズになります。 したがって、写真における圧縮の優先順位は、まずPNGから変換し、互換性を重視する場合はJPGを、ファイルサイズを最小限に抑えたい場合はWebPを選択するというものです。
グラフィックに関しては状況が一転します。スクリーンショット、ロゴ、単色のUI画像の場合、パレット量子化されたPNGは通常、ファイルサイズと鮮明度の両面でJPGを上回ります。JPGの写真用圧縮方式では、シャープなエッジがぼやけてしまうからです。このケースについては、以下に専用のツールを用意しています。
| コンテンツの種類 | 最適な形式 | なぜ |
|---|---|---|
| Web・メール・チャット用の写真 | WebP（互換性のためJPGも可） | 非可逆圧縮は写真の細部表現に適しています。WebPは、同等の画質であればJPGよりも25～35％ファイルサイズが小さくなります。 |
| スクリーンショット、ロゴ、フラットカラーのUI | PNG | ロスレス — JPGの画像圧縮では、シャープなテキストや鋭いエッジがぼやけてしまいます。 |
| 透明度が必要な画像 | PNG または WebP | JPGにはアルファチャンネルがありません。PNGとWebPはどちらも透明な背景に対応しています。 |
| 最大限の互換性（旧バージョンのソフトウェア、プリンターなど） | JPG | 1990年代から広くサポートされています。WebPのサポートは比較的新しいものですが、現在ではブラウザにおいてほぼすべてのブラウザでサポートされています。 |
演奏上の注意事項
- 圧縮を強くする前にサイズを変更しましょう。解像度を4000pxから1920pxに縮小すると、ピクセル数が約77%削減されます。どんな画質調整スライダーでも、これには敵いません。
- バッチ処理はCPU上で順次実行されます。ノートパソコンであれば、スマホで撮った写真100枚の処理に数分程度しかかかりません。サーバー上で処理がキューに入れられることはないので、通常はアップロード型のサイトよりも高速ですし、オフラインでも動作します。
- 「−%」という数値はフィードバックループです。一桁の数値が表示されている場合、その画像はすでに最適化されており、これ以上画質を低下させると、ファイルサイズの削減効果よりも見た目の劣化の方が大きくなってしまいます。
- ウェブ公開においては、コンテンツ画像は200 KB以下、全幅のヒーロー画像は500 KB以下を目安にしてください。この範囲内に収めることで、モバイル接続時でもCore Web Vitalsの指標を良好な水準に保つことができます。
プライバシーとメタデータ：EXIF情報はどうなるか
スマートフォンで撮影した写真には、標準でEXIFメタデータが埋め込まれています。カメラの機種名、撮影日時、露出設定に加え、位置情報サービスが有効になっていれば撮影場所の正確なGPS座標まで記録されています。これらの情報は画像の中に見えない形で保存されており、オリジナルの写真をそのまま共有すると、後でその画像をダウンロードしてEXIFビューアーで開いた人には筒抜けになってしまいます。
このツールは元のファイルを単純にリネームするのではなく、Canvas APIで画像を一から再描画するため、圧縮の過程でこうしたメタデータはほぼ確実に失われます。自宅や職場の場所を特定されたくないユーザーにとって、オリジナル写真をそのまま共有するよりも一段安心できるポイントであり、主目的であるファイルサイズ削減に加えたうれしい副産物と言えます。
当社によるテストの結果
このツールを出荷する前に、生成されたテスト画像を用いて実行し、目視だけでなくピクセル単位で出力を確認しました。 3000×2000のマルチカラーPNGは、1920pxの上限を設定し、品質を75%に設定した結果、140 KBから94 KB（−33%）に縮小されました。また、テスト画像は合成画像であったため、 JPGコーデックの許容範囲を超えるピクセルずれがないことを確認できました。また、「すでに最適化されたファイル」という警告が正しく発動し、黙ってより大きなファイルが生成されることがないことも確認しました。つまり、高度に圧縮されたJPGファイルを投入すると、改善されたふりをするのではなく、オリジナルを保持するよう促してくれます。
使い方
- 画像をボックスにドラッグ＆ドロップするか（またはクリックして選択してください）— JPG、PNG、WebPに対応しています。
- 画質を設定してください。75%が適度なバランスです。コストを最大限に抑えるには、60%に下げてください。
- 最大幅を選択してください。フルスクリーンでのウェブ閲覧には、1920pxで十分です。
- 出力形式として「JPG（汎用）」または「WebP（ファイルサイズが小さく、最新のブラウザすべてに対応）」を選択してください。
- 各検索結果の横にある「ダウンロード」をクリックしてください。ファイルごとのサイズと保存進捗率が表示されます。
例
- 入力
phone-photo.jpg — 4.20 MB, 4032×3024- 出力
phone-photo-compressed.jpg — 0.48 MB (−89%), 1920×1440
1920pxにリサイズし、画質を75%に設定して再エンコード：どの画面でも見た目は全く同じで、ファイルサイズは9分の1に縮小されました。