ウェブページの画像最適化ツールと使用方法のヒントの共有

ウェブページの基本要素として、画像はページの読み込み速度に影響を与える重要な要素の 1 つです。画像に関連する Web サイト最適化手法には、CSS スプライト (画像の結合)、遅延読み込み、プログレッシブ画像拡張などがあります。ここでは、Web 画像を最適化するための優れたツールとテクニックをいくつか紹介します。

小さなPNG

TinyPNG はスマートな非可逆圧縮技術を使用して PNG ファイルのサイズを縮小します。

スマッシュ

Smush.it は、画像ファイルから不要なバイトを削除することで画像サイズを縮小します。

オプティPNG

OptiPNG は、情報を失うことなく PNG 画像圧縮を行うツールです。

イメージオプティム

PNG、JPEG、アニメーション GIF 画像は、最適な圧縮パラメータを見つけ、不要なコメントやカラー プロファイルを削除することで処理できます。

コードキット

CodeKit は、より高速で優れた Web サイトの構築に役立ち、画像の最適化にも役立ちます。

画像

imgo はロスレス自動画像最適化ツールです。フォルダ内の画像を最大限に最適化できます。

jQuery 遅延ロード

画像を遅延読み込みするための jQuery プラグイン。

画像最適化記事の推奨

Smashing Magazine – HTML5 Canvas で画像を最適化する

Smashing Magazine – 賢い JPEG 最適化テクニック

Smashing Magazine – 賢い PNG 最適化テクニック

スマッシングブック – ウェブサイトのパフォーマンス最適化

A List Apart – 転換点にあるレスポンシブ画像と Web 標準

A List Apart – 柔軟でスケーラブルで楽しい背景に SVG を使用する (パート II)

A List Apart – 柔軟でスケーラブルで楽しい背景に SVG を使用する (パート 1)

6 回の改訂 – Web 用画像保存の総合ガイド

6 つの改訂 – JPEG 101: JPEG の短期集中ガイド