MacでのWordPress用画像最適化

WordPressのメディアアップローダーは6 MBのPNGヒーロー画像を受け付けますが、テーマがsrc属性にリサイズ済みのバリエーションではなくフルサイズファイルを出力しているため、ホームページの読み込みが遅く感じることがあります。WordPressの画像最適化はアップロード前に始まります。ピクセル幅をテーマのコンテンツエリアに合わせて調整し、JPEGまたはWebPを選択してローカルで圧縮することで、ライブラリには軽量なソースファイルが保存されます。

WordPressのアップロード制限の実態

ホスティング設定はupload_max_filesizeとpost_max_sizeを指定します。1枚の10 MBの写真はアップロードできる場合でも、12枚のバッチアップロードはサイレントエラーやタイムアウトで失敗することがあります。

Media Libraryへのインポート前にMac上でソースファイルを修正します。ファイルサイズが小さいほどアップロードが速くなり、サーバー側のサムネイル生成負荷も軽減されます。一般的なリサイズとフォーマットのルールについては、 Macでの画像圧縮方法 をご覧ください。

推奨フォーマットとサイズ

最新のWordPressコアはJPEG、PNG、GIF、WebPをサポートしています。テーマやプラグインによってsrcsetやモダンフォーマットの出力方法は異なります。

すべての写真を無圧縮のPNGで保存する前に、 可逆圧縮と非可逆圧縮 を読んでおきましょう。リサイズ後の写真は、非可逆圧縮のJPEGまたはWebPが適しています。

テーマがWebPをサポートしている場合、ヒーロー画像をローカルで変換します。デザイン元のPNGからのエクスポートについては、 MacでのPNGからWebPへの変換 をご覧ください。

アップロード前の画像準備

繰り返し可能なMacのワークフローは以下の通りです。

1. テーマのcontent_widthを確認するか、ブラウザのデベロッパーツールでライブカラムの幅を測定します。
2. アートボードの3倍ではなく、Retina対応のためにその幅の2倍でデザインからエクスポートします。
3. エクスポート幅がオーバーしている場合は、プレビューでリサイズします（ツール → サイズ調整…）。
4. 品質82〜85のJPEG、またはcwebp経由でWebPとしてエクスポートします。
5. 4000 pxのマスターファイルではなく、最適化済みのファイルをアップロードします。

位置情報を公開したくないイベント写真からは、GPS EXIFデータを削除します。メタデータの削除はバイトサイズとは別物ですが、公開ブログにおけるプライバシー保護には重要です。

Windowsユーザーがアセットを再利用できない場合、カメラのHEICファイルをアップロードしないようにします。まずMacでJPEGに変換してください。

固定画像とコンテンツ幅

固定画像はインラインの図よりも広く表示されますが、カメラの解像度には及びません。

WordPressはバージョン4.4以降、レスポンシブなsrcsetとsizesマークアップを生成しています。 レスポンシブ画像のドキュメント では、中間サイズによってブラウザが適切な候補を選択する方法が説明されています。すべてのメディアライブラリ画像がレスポンシブ配信されると仮定するのではなく、テーマが固定画像、カード、カスタムブロックでこのマークアップを使用していることを確認します。

ライブラリ内のソースファイルを置き換えた後にのみ、サムネイルを再生成します。WordPressはプラグインが再構築するまで古いサイズを保持します。過剰な-scaled中間ファイルが配信されないよう、正しいサイズを最初にアップロードします。

同じアセットがWordPress外の静的ランディングページにも供給される場合は、 MacでのWeb用画像最適化 と併用してください。

メディアライブラリの一括処理

ブログの移行やフォトエッセイでは、1回のセッションで数十個のファイルを扱うことがあります。

mkdir wp-upload
for f in *.jpg; do sips -Z 1920 -s formatOptions 85 "$f" --out "wp-upload/$f"; done

originals/とwp-upload/を別々に整理します。投稿が公開され、確認されるまでマスターファイルを削除しないでください。

オンラインのWordPress画像最適化ツールはファイルを第三者に送信します。下書きの投稿、 公開前のスクリーンショット、クライアントの作業途中のファイルについては、ローカルで圧縮します。アップロードの安全性については、 オンラインファイル圧縮ツールは安全か をご覧ください。

編集チェックリストに最大幅を明記し、寄稿者がフル解像度のスマホ写真をアップロードしないようにします。

圧縮後ではなく、アップロード後に代替テキスト（alt text）を追加します。代替テキストはバイト数に影響しませんが、最適化されたファイルと説明的なalt textを組み合わせることで、アクセシビリティ監査とファイルサイズ監査を分離できます。

プラグインがサーバー側でWebPを生成する場合でも、ローカルでWebPを準備しておくことで、一括インポート時のアップロード時間と管理画面の処理負荷を削減できます。

GetCompressの活用

GetCompressは、アップロードなしでMac上の混合画像フォルダーを処理します。編集者がオフラインで1か月分の投稿を準備する場合に便利です。

• 図のフォルダーをドロップし、WordPressインポート用の最大幅とJPEGまたはWebP出力を設定します。
• テーマの寸法に合わせてプリセット（例：「WP固定画像 1920 JPEG q85」）を保存します。
• バッチエクスポート前に、テキストが多いスクリーンショットをプレビューします。
• 記事ごとに10枚を超えるフォトエッセイの場合、MacでのWordPress用画像最適化を一括処理します。
• 著者が管理画面のアップローダーを開く前に、HEICのiPhone写真をJPEGに一括変換します。

GetCompressは、WordPressへアップロードする前の元画像を整えるために使います。フロントエンドのマークアップやCDNの設定は、WordPress側で適切に管理してください。フォルダ監視でto-upload/ディレクトリを監視すれば、デザインチームが追加した新しい書き出しを自動で圧縮できます。

アップロード後、モバイルで1枚の固定画像をスポットチェックします。プラグインの遅延読み込み設定を調整する前に、幅を修正してください。