最適化とは画質を維持したままファイルサイズを小さくして、ファイルの読み込みを速くすることです。
最適化されていない状態でサイトに画像をアップロードすると読み込み速度が遅くなり、訪問者がサイトの閲覧をあきらめてしまう原因になります。ブランドを立ち上げ、サイトのトラフィックを増やすという目的において、これは大問題です。ファイルサイズと画質はページの読み込み速度に大きく影響する2つの要素です。
このガイド内
こちらの印刷品質の小さな画像を例として見てみましょう。Unsplash.com からダウンロードしたもので、解像度は240 DPI (ドット/インチ)、ピクセル数は2048×1286です。ファイルサイズは1.1 MB とかなり大きめです。
同じ画像をメディアライブラリに取り込む前に、サイズと DPI を小さくしてみましょう。無駄に重い画像を軽くして同じ結果を得ることができます。
手軽に画像サイズを小さくする、こちらのようなサードパーティ製の無料ツールを使うとよいでしょう。
画像をより細かく最適化する方法をもう少し詳しく知りたい方は、このまま読み進めてください。ここでは2つの無料ソフトウェアを使って画像サイズを小さくします。こちらからダウンロードできます:
画像サイズを小さくするには:
- GIMP で画像を開く
- ツールバーの「画像」をクリックして「画像を拡縮」を選択
- 「画像サイズ」で横幅を1920ピクセル (または任意の幅) に変更
- 「拡縮」をクリック
- ツールバーの「ファイル」を選択「名前を付けてエクスポート」を選択
- ファイル名の末尾に「.jpg」を追加
- 「エクスポート」を選択
- ダイアログボックスが開いたら「品質」を60に変更
- 「高度なオプション」をクリック
- 「サブサンプリング」の比率を4:2:0 (クロマは4分の1) に変更
- 「エクスポート」をクリック
以上の設定はあくまで一例です。必要に応じて調整してください。
では結果を比較してみましょう。
ImageOptim (Mac アプリまたはウェブサービス) を使用してファイルサイズをさらに小さくできます。
ImageOptim を開いて各ファイルタイプの画質を60% に設定します。
それぞれの設定を追加したら、最適化する画像を右クリックして「ImageOptim で開く」を選択します。
さきほど指定した設定値に合わせて ImageOptim が自動的に画像を小さくします。
この変更は元に戻せません。実行する前に必ず画像のバックアップを取ってください。
パソコンを使用する場合、ImageOptim のウェブサイトに画像をアップロードすると、最適化されたファイルをダウンロードできます。
ウェブサイト版は無料ではなく月額費用が発生します。ただしお試し期間があります。
サイトへの投稿に WordPress アプリをお使いの場合、画像を最適化するオプションがあります。
iPhone 用の WordPress アプリは、「アップロードできる最大の画像サイズ」を設定すると、画像をアップロードするときに元のファイルが自動的にサイズ変更されるようになっています。このオプションを確認するには、「参加サイト」にアクセスして右上のプロフィールアイコンをクリックし、「アプリ設定」を選択します。
Android 用の WordPress アプリでは、画面右上のプロフィールアイコンをクリックして「アプリの設定」を選択します。ここで「画像の最適化」を有効にすると、アップロード時に画像のサイズ変更と圧縮が実行されます。
Retina ディスプレイは通常のディスプレイと比較して画素密度が非常に高く、標準的な画像だとぼやけて見えることがあります。その防止策として、Retina ディスプレイを検出した場合に画像を倍のサイズで表示し、最大限の鮮明さを保てるようにしています。この方法はメディアライブラリに表示される画像がサイトでの表示サイズより大きい場合のみ有効です。
画像ファイルの大きさがブログの最大表示サイズの倍であっても、カメラの解像度が最大の場合に比べると格段に小さいため、画像を最適化すれば Retina ディスプレイでも美しく見せることができます。
別の画像編集ソフトウェアツールには、写真のサイズ調整や圧縮を一括で簡単に実行するオプションを備えているものもあります。Photoshop や Paint Shop Pro などのパッケージも便利ですが、無料で使えるものとして以下のような選択肢があります。
ウェブ上で利用できるものでは以下のようなサービスもあります。
日本語サポート 
コメントを投稿するにはログインしてください。