コンテンツへ移動

Windows 上の WordPress 向け画像最適化

アップロード前に Windows で WordPress 画像を最適化します。テーマの要件に合わせてリサイズし、JPEG、PNG、WebP を選択し、レスポンシブ配信を維持してライブページで確認します。

WordPress は複数の画像サイズを生成できますが、不適切なソース画像からは回復できません。6000 ピクセルの PNG 写真をアップロードすると、不要な作業が発生し、ライブラリ内に重たいフルサイズのオリジナルが残ります。優れた WordPress 画像最適化は、ソースをテーマに合わせてマッチさせることから始まり、ブラウザが実際にダウンロードする内容を確認することで完了します。

リサイズ前にテーマを測定する

Edge で代表的な投稿を開き、アイキャッチ画像とコンテンツカラムを検証します。デスクトップとモバイルのブレークポイントにおけるレンダリング幅を記録します。アーカイブカードも確認してください。同じアイキャッチ画像が、広い記事のヘッダーと狭いリストグリッドの両方で表示される可能性があるためです。

測定せずに一律の 1920 ピクセルルールを採用しないでください。コンテンツカラムが 760 ピクセルの出版物と、フル幅の写真テーマでは、必要な候補画像が異なります。

Windows でソースを準備する

単一の画像の場合、Paint でコピーをリサイズします。フォトエッセイや移行作業の場合は、ファイルエクスプローラーから PowerToys Image Resizer を使用します。

実用的なフォルダ構成は以下の通りです。

article-name\originals\
article-name\wordpress-upload\

カメラファイルやデザインマスターは originals に保管し、確認済みの納品用コピーのみを wordpress-upload に配置します。IMG_4821-final2.jpg のような名前ではなく、oak-desk-cable-management.jpg のような説明的なファイル名を使用します。

アップロード前に、公開する必要のない位置情報を削除します。スクリーンショットに顧客名、ブラウザのタブ、内部 URL、通知内容が含まれていないか確認します。

WordPress が生成する内容を理解する

WordPress はバージョン 4.4 から、生成されたマークアップに srcset と sizes を追加することでレスポンシブ画像をサポートしています。 レスポンシブ画像のドキュメント では、WordPress が中間サイズを作成し、ブラウザが候補を選択することを説明しています。

このシステムはテーマとエディタで選択されたサイズに依存します。フルサイズを挿入しても、ブラウザが過大なソースをダウンロードすることがあります。カスタムブロックや background-image CSS は、通常のレスポンシブマークアップを迂回することがあります。

テーマの画像サイズを変更した後、古いアップロードにはサムネイルの再生成が必要な場合があります。新しい設定は、すべての履歴ファイルを自動的に再構築しません。

画像のコンテンツに応じてフォーマットを選択する

コンテンツ開始フォーマット理由
記事用または商品写真JPEG または WebP連続調に効率的
小さな文字を含むスクリーンショットPNG または高品質な WebPエッジとテキストを保持
透明なイラストWebP または PNG透明性を維持
ベクターアートからのロゴテーマが許可する場合 SVGラスターのぼけなしでスケーリング

高品質听起来那样だからといって、写真を PNG だけで保存しないでください。背景が意図的に平坦化されていない限り、透明なアートワークを JPEG に変換しないでください。トレードオフの詳細は 非可逆圧縮と可逆圧縮 を参照してください。

ライブ投稿を監査する

ステージング環境に公開し、Edge DevTools で画像リクエストを検証します。以下を確認します。

  • ブラウザがレンダリング幅に近い候補を選択していること
  • フルサイズのオリジナルが小さなカードに使用されていないこと
  • 幅と高さがレイアウトシフトを防いでいること
  • アイキャッチ画像が一般的なブレークポイントで鮮明であること
  • alt テキストが画像の編集上の目的を説明していること
  • 上記に表示される可能性の高いヒーロー画像に遅延読み込みが適用されていないこと

孤立したメディアライブラリのプレビューではなく、実際の投稿テンプレートでテストを実行します。プラグイン、CDN、テーマは最終的なマークアップを書き換える可能性があります。

GetCompressが WordPress 制作に適合する場合

Paint と PowerToys は偶発的なリサイズを処理します。GetCompressは、Windows の編集チームがメディアライブラリへのインポート前に、定期的なアイキャッチ画像、スクリーンショット、ギャラリー、WebP または JPEG 変数を作成する場合により適しています。ローカルの一括プリセットにより、ドラフトや embargo 対象の素材をオンラインオプティマイザーに送信することなく、ソースの寸法を一貫させることができます。

GetCompressでアップロード前の画像を整えます。レスポンシブ画像のマークアップ、CDN、説明的な代替テキスト、公開後のテストはWordPress側で適切に管理してください。

関連投稿