WordPress 5.3 以降、大きな画像をアップロードすると、ファイル名の末尾に「-scaled」という文字列が付加される現象に遭遇することがあります。
例えば、「original-image.jpg」という画像をアップロードしたにもかかわらず、メディアライブラリや実際に表示される画像が「original-image-scaled.jpg」となっている、といったケースです。
この挙動は、WordPressの新たな画像最適化機能によるものであり、決してバグではありません。しかし、特定の要件やワークフローにおいては、この「-scaled」の付与が問題となる場合があります。
本記事では、この「-scaled」が付加される原因を解説し、それがもたらす可能性のある問題点、そしてその問題に対する具体的な解消法をいくつかご紹介します。
「-scaled」が付加される原因とは？
この現象は、WordPress 5.3で導入された**「大きな画像の自動リサイズ機能」**によるものです。
WordPressは、アップロードされた画像の幅または高さが2560ピクセル（デフォルト値）を超えている場合、自動的にその画像をリサイズし、最も長い辺が2560ピクセルに収まるように調整します。
このリサイズされた画像が、元のファイル名に「-scaled」が付加された新しいファイルとして保存され、デフォルトでそちらが使用されるようになります。
この機能が導入された背景には、主に以下の目的があります。
- パフォーマンスの向上: 高解像度の画像はファイルサイズが非常に大きくなり、ページの読み込み速度に悪影響を与えます。特にモバイル環境では、大きな画像を読み込むことでユーザーエクスペリエンスが著しく低下する可能性があります。自動リサイズにより、ファイルサイズを削減し、サイト全体のパフォーマンス向上に貢献します。
- ストレージ容量の節約: 必要以上に大きな画像をサーバーに保存することを避け、ストレージ容量の節約に繋げます。
- 画像の最適化の手間を軽減: ユーザーが手動で画像をリサイズする手間を省き、より簡単に最適化された画像を扱えるようにします。
「-scaled」が付加されることによる潜在的な問題点
WordPressのこの機能は多くの場合で有益ですが、以下のようなケースでは問題となる可能性があります。
- ファイル名の一貫性維持: 特定の命名規則やワークフローに依存している場合、自動的にファイル名が変更されることで混乱が生じる可能性があります。
- 画像URLの直接指定: CSSやJavaScript、テーマのカスタマイズなどで画像のURLを直接指定している場合、期待する画像が表示されない、あるいはリンク切れが発生する可能性があります。
- 印刷品質や高解像度表示の要件: プロの写真家やデザイナーなど、元の高解像度画像をそのまま表示する必要がある場合、自動リサイズによって品質が低下する（と認識される）可能性があります。特に、ユーザーにダウンロードさせたい場合など。
- 既存のシステムとの連携: 既存のシステムやプラグインが特定のファイル名を前提としている場合、互換性の問題が生じる可能性があります。
「-scaled」が付加される問題を解消する方法
この問題を解消する方法はいくつかありますが、ご自身のサイトの目的や要件に合わせて適切な方法を選択することが重要です。
1. アップロードする画像サイズを制限する（推奨）
最もシンプルで推奨される方法は、アップロードする画像のサイズ自体を2560ピクセル以下に調整することです。
- 画像編集ソフト（Photoshop, GIMP, Affinity Photoなど）やオンラインツール（TinyPNG, Compressor.ioなど）を使用して、アップロード前に画像の幅または高さが2560ピクセルを超えないようにリサイズ・最適化します。
- この方法であれば、WordPressの自動リサイズ機能が発動せず、元のファイル名のまま画像が保存されます。また、サイトのパフォーマンスも自然に最適化されます。
2. wp_big_image_size_threshold フィルターを無効にする
WordPressの自動リサイズ機能自体を無効にする方法です。この方法は、どうしても元の高解像度画像をそのままWordPressに保存したい場合に有効です。
テーマの functions.php ファイル、または独自のカスタムプラグインに以下のコードを追加します。
PHP
<?php
/**
* WordPressの大きな画像の自動リサイズ機能を無効にする
*/
add_filter('wp_big_image_size_threshold', '__return_false');
?>
この方法の注意点:
- パフォーマンスへの影響: この設定を有効にすると、非常に大きな画像をアップロードした場合でもリサイズされずにそのまま保存されます。その結果、サイトの表示速度が遅くなる、モバイル環境での表示が重くなるなどのパフォーマンス問題を引き起こす可能性があります。
- ストレージ容量の消費: サーバースペースをより多く消費します。
この方法を選択する場合は、アップロードする画像のサイズを意識的に管理し、必要に応じて手動で最適化を行うことが強く推奨されます。
3. プラグインを利用する
WordPressには、画像の最適化やリサイズに関する多くのプラグインが存在します。これらのプラグインの中には、「-scaled」の付与を制御したり、より高度な画像最適化機能を提供するものもあります。
例えば、以下のようなプラグインが考えられます。
- Imagify, Smush, EWWW Image Optimizer など: これらの画像最適化プラグインは、アップロード時に画像を圧縮・最適化し、場合によってはWordPressのデフォルトのリサイズ挙動を上書きするオプションを提供していることがあります。
- 特定のプラグインが「
-scaled」の動作を直接制御する機能を提供しているか、各プラグインのドキュメントを確認してください。
4. FTP/ファイルマネージャーで直接ファイルを管理する（非推奨）
WordPressのメディアライブラリを使わず、FTPクライアントやレンタルサーバーのファイルマネージャーから直接 wp-content/uploads ディレクトリに画像をアップロードし、そのURLを直接利用する方法も技術的には可能です。
この方法の注意点:
- メディアライブラリとの連携がなくなる: WordPressのメディアライブラリで画像管理ができなくなり、非常に手間がかかります。
- サムネイル生成などがされない: WordPressが自動的に生成するサムネイルや各種サイズの画像が生成されないため、テーマやプラグインによっては表示に問題が生じる可能性があります。
- SEOへの影響: 画像のaltテキストやキャプションなどの設定が手動になり、SEO面での不利が生じる可能性があります。
この方法は、特別な理由がない限り推奨されません。
まとめ
WordPressが画像に「-scaled」を付加する動作は、ウェブサイトのパフォーマンス向上を目的とした賢明な機能です。しかし、特定の要件がある場合には、その動作を理解し、適切に対処する必要があります。
ほとんどのユーザーにとって、画像をアップロードする前に2560ピクセル以下にリサイズしておくのが最もシンプルで推奨される解決策です。もし、元の高解像度画像をどうしてもそのまま利用したい場合は、wp_big_image_size_threshold フィルターを無効にする方法も選択肢となりますが、その際のパフォーマンスへの影響を十分に考慮し、他の方法で最適化を行うことが重要です。
ご自身のサイトの目的とユーザーの体験を最優先に考え、最適な解決策を選択してください。
