CodeKitHubなぜこれを使うのか？
- 100% ローカル保存：画像は端末の外に出ることはありません。プライベートな写真や未公開のデザインも安心して保管できます。
- 制限なし：ファイルサイズの制限なし、1日あたりの利用制限なし、透かしなし、アカウント不要。
- バッチモード — 複数の画像を一度にドロップすると、それぞれが個別にダウンロードされます。
- 高品質スライダー + 最大幅でのリサイズ + JPG/WebP出力 — 実際に重要な3つの設定。
- 画像ごとの正確な節約額を表示するため、コストと効果のバランスを判断できます。
よくある質問
圧縮すると、画像の画質が悪くなってしまいますか？
画質が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は、透明度が必要なグラフィックや、エッジが極めてシャープである必要があるグラフィックにのみ使用するようにしてください。
なぜ出力結果が元のデータよりも大きくなることがあるのですか？
画像がすでに大幅に圧縮されている場合、再エンコードしても効果はなく、むしろファイルサイズが増える可能性があります。このような場合はツールが通知してくれますので、その際は元の画像をそのまま保存しておいてください。
このツールとは？
画像圧縮ツールは、より効率的な（非可逆）設定で画像を再エンコードすることで、ファイルサイズを縮小します。スマートフォンで撮影した写真のファイルサイズは、多くの場合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の指標を良好な水準に保つことができます。
当社によるテストの結果
このツールを出荷する前に、生成されたテスト画像を用いて実行し、目視だけでなくピクセル単位で出力を確認しました。 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に縮小されました。