ウェブ用に画像ファイルサイズを減らす方法

大きな画像はページが遅く読み込まれる一番の理由です。対処はほぼ必ず2ステップです。画像を正しい寸法にし、それから残りを圧縮する。両方やれば、4MBの写真が、画面では見分けのつかない150KBの写真になります。

具体的な数字を当てはめましょう。

狙うべき目標サイズ

推測は要りません。ページを速く保つ実用的な重量の目安がこちらです。

そして寸法：

ページ上のどれか1枚の画像が約300KBを超えているなら、たいてい直す価値のある間違いです。

これは人が飛ばすステップで、最大のてこです。スマホから出したばかりの写真はしばしば横4000px超です。800pxの段組みに表示されるなら、画面が見せる25倍のピクセルを配信していることになります——そしてピクセル数は何よりファイルサイズを左右します。

画像リサイズを使って、画像を実際に現れる幅まで下げましょう。ピクセルかパーセントでリサイズし、縦横比をロックしたまま、高品質な縮小器に縁をきれいに保たせます。

適切なサイズにするだけで、1バイトも圧縮する前に、しばしばファイルサイズが80〜90%削れます。

さて、その正しい寸法の中のデータを縮めます。

写真（JPG/WebP）： 品質スライダーを75〜85に設定。ほとんどの画像で見た目に劣化なく、サイズを大きく削ります。
PNG（スクリーンショット、グラフィック）： 画像圧縮がこれらを256色パレットに減らし、たいてい60〜80%節約しつつ見た目を変えず、透過を保ちます。

圧縮ツールは出力を元のサイズで頭打ちにもします——大きなものを返すことは決してありません——そして任意の幅の上限があるので、実は両ステップを一度に行えます。上限を目標の幅に設定し、一気に圧縮するのです。フォルダまるごとをバッチ処理して、ZIPでダウンロードしましょう。

画像が現代のブラウザに配信されるなら、写真をWebPに変換すると、同じ品質でJPEGをさらに25〜35%上回るのがふつうです。フラットなグラフィックはPNG（またはWebP）のまま。写真をPNGで保存しないでください——それが定番の肥大化の間違いで、簡単に5〜10倍のペナルティになります。

写真5枚のブログ記事なら。

合計20MBで始まった5枚の写真が、約600KBに収まります——止まる代わりに、まばたきで読み込むページです。

上のすべてがCanvasとWebAssemblyを使って完全にブラウザ内で動きます。画像がサーバーにアップロードされることはなく、初回訪問後はツールがキャッシュされてオフラインで動きます。記事1本分の画像を、接続なしで、何一つマシンから出さずに最適化できます。