abc111さん

私からは以下のように見えております。
（容量オーバーのため、かなり縮小してしまい、見づらくてすみません）

例えば、5枚目の画像も、幅は1000pxに見えます。

説明不足ですいません。ワードプレスのバージョンは6.7です。

コクーンとワードプレスを同時にアップデートし、その直後からです。

デベロッパーツールで記事の3枚目までの画像はアップした通りのサイズで出力されているのですが、4枚目以降を見るとintrinsic sizeがアップした通りのサイズになっておらず、縮小されて出力されてしまっています。

その他必要な情報などはありますでしょうか？

abc111さん

フォーラム上部の案内にありますように、環境情報のご提示をお願い致します。
（2度目です、案内を読んでいただきますよう、お願い致します。）

また、高速化を解除してください。

投稿者:: @mk2_mk2

↑

フォーラム上部の案内にありますように、環境情報のご提示をお願い致します。
（以下は、フォーラム上部に記載されているものです、フォーラム上部の案内、リンク先をご確認ください）

書き込みの前に以下の3点をご確認ください。

1. 1つのトピックにつき1つの質問を書き込んでください
2. 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

の取得方法はこちら。
→  https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→  https://wp-cocoon.com/theme-trouble/

私からは、先にご提示したように、特に異常はないように見えます。

abc111さんからは、どのように見えているのか、キャプチャ画像（スクリーンショット）も添付してください。

お問い合わせ時は、プラグイン「LiteSpeed Cache」も無効にしていただくと良いと思います。
（最新の状態が確認できない可能性があるため）

●発生要因

期待の表示となっているimgタグ

<img 
  decoding="async" 
  src="https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114322-2.jpg" 
  alt="とんかつ山花 周辺" 
  width="1000" 
  height="750" 
  class="alignnone size-full wp-image-12884" 
  srcset="
     https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114322-2.jpg  1000w,
     https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114322-2-500x375.jpg  500w,
     https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114322-2-800x600.jpg  800w,
     https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114322-2-300x225.jpg  300w,
     https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114322-2-768x576.jpg  768w
  " 
  sizes="(max-width: 1000px) 100vw, 1000px"
>

100vwが選択され、画面幅となる。

小さくなってしまっているimgタグ

Cocoonが要因ではないと思われます（imgタグはWordPressの関数で自動生成しており）。

<img 
  loading="lazy" 
  decoding="async" 
  src="https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114259.jpg" 
  alt="とんかつ山花 駐車場の案内" 
  width="1024" 
  height="768" 
  class="alignnone size-full wp-image-12885" 
  srcset="
     https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114259.jpg  1024w,
     https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114259-500x375.jpg  500w,
     https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114259-800x600.jpg  800w,
     https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114259-300x225.jpg  300w,
     https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114259-768x576.jpg  768w
  " 
  sizes="auto, (max-width: 1024px) 100vw, 1024px"
>

autoが付いているため、図示のブラウザの指定に従い、300✕150pxとなってしまった（Chrome130）。

●対策

height:autoのため、以下のコードでwidth:autoではなく、本来width:100vwとし画面幅とすべき。

@media screen and (max-width: 480px) {
  .article .entry-content img {
    margin: 0 calc(50% - 50vw);
    max-width: none;
    width: auto;
  }
}

----------------------------------------------
サイト名：Gate to にいがた
サイトURL： https://www.niigata-gate.com 
ホームURL： https://www.niigata-gate.com 
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
スキン：/wp-content/themes/cocoon-master/skins/simple-green/style.css
WordPressバージョン：6.7
PHPバージョン：8.1.29
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.9.1
カテゴリー数：23
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：30699 バイト
functions.phpサイズ：5583 バイト
----------------------------------------------
Gutenberg：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：1
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Akismet Anti-spam: Spam Protection 5.3.3
BackWPup 4.1.6
Category Order and Taxonomy Terms Order 1.8.6
Contact Form 7 6.0
Edit Author Slug 1.9.1
EWWW Image Optimizer 7.9.1
Flamingo 2.5
Flying Scripts: Delay JavaScript to Improve Site Speed & Performance 1.2.3
LiteSpeed Cache 6.5.2
Regenerate Thumbnails 3.1.6
SiteGuard WP Plugin 1.7.8
TypeSquare Webfonts for エックスサーバー 2.0.8
Wordfence Security 8.0.0
WP Multibyte Patch 2.9
XML Sitemap Generator for Google 4.1.21
----------------------------------------------

お二人方ありがとうございます。width:100vwにしてスマホの表示上は元に戻りました。

ただ、画像のように1000pxでアップした画像がintrinsic sizeをみると800pxとなっているのですが、画像4枚目以降だけなぜこうなるのでしょうか？

投稿者:: @abc111

↑

画像のように1000pxでアップした画像がintrinsic sizeをみると800pxとなっている

これは、以下のことですよね。

投稿者:: @abc111

↑

今、私が見ると、以下なのですけれど。
（対象の画像が違ったので、貼り直しました）

それです！

デベロッパーツールでスマホの方を表示してからPCの方を表示するとmkさんがいうように1000pxであれば1000pxというようになっているのですが、最初からPC、もしくはスマホからPCに変え更新などすると私が先ほどアップしました「画像のように1000pxでアップした画像がintrinsic sizeをみると800pxとなっている」というようになってしまうようなのですが。

abc111さん

追記させていただいたりしているのですけれど、以下お願いできますか。

投稿者:: @mk2_mk2

↑

【追記】

 

最新の状態を確認できない可能性がありますので、プラグイン「LiteSpeed Cache」は無効化してください。
（たった今、ページキャッシュが更新されていました）

はい、無効化しました。お願いします

width:100vwにしてスマホの表示上は元に戻せたので解決という事でお願いします。ありがとうございました。

投稿者:: @abc111

↑

ただ、画像のように1000pxでアップした画像がintrinsic sizeをみると800pxとなっているのですが、画像4枚目以降だけなぜこうなるのでしょうか？

@chu-ya 上手く伝えることができずすいません。

キャプチャはこちらになります。

imgのwidth1000に対しintrinsic sizeが800となっています。

ただデベロッパーツールで再度確認したんですが、デベロッパーを開いた時に表示されている画像のintrinsic sizeが1000で下にスクロールし遅延表示される画像のintrinsic sizeが800となっていたので、私の勘違いでintrinsic sizeについては問題なかったものと思います。

それとあと1点だけ分からなかったことがあったんですが、100vwにすることで解決はしたのですが、なぜ4枚目以降だけが縮小されていたのでしょうか？

cssに問題があれば1～3枚目も縮小されて表示されているものと思っていました。

投稿者:: @abc111

↑

キャプチャはこちらになります。それとあと1点だけ分からなかったことがあったんですが、100vwにすることで解決はしたのですが、なぜ4枚目以降だけが縮小されていたのでしょうか？

以下に書いてある通りです。
imgのsizeにautoがあり、CSSでautoとしているため、添付図の赤線でブラウザデフォルトとなったようです。
私が分からないのは、なぜsize=autoとなったかです。

  sizes="auto, (max-width: 1024px) 100vw, 1024px"

投稿者:: @chu-ya

↑

autoが付いているため、図示のブラウザの指定に従い、300✕150pxとなってしまった（Chrome130）。

@chu-ya ご返信ありがとうございます。size=autoについてはなんでautoがついてるのかわかりません。functionsも関連するようなのはいじってないと思うのですが。必要な情報があれば記載します。

それとautoは、なぜか4枚目の画像以降についております。過去記事にも同じように4枚目の画像以降にのみついているようです。アップデート前はサイズも問題なかったのでアップデート後にautoが付いたものと思います

すみません、直接原因はよく分かりません。

imgタグのsize=autoとなっているのが、4枚目以降と3枚目までの違いです。
そこから推測し、CSSでもwidth:autoとしているため、デフォルトの定義が適用されたと思われます。

この現象は見たことがないです。

Gutenbergエディターでない点も気になります。

sizes="auto"についてですけれど。

以下をご覧ください

Auto Sizes for Lazy Loaded Images in WordPress 6.7
https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/

WordPress will only add auto to the sizes value if the image includes loading=”lazy”. Otherwise, browsers that support sizes=auto will fail to validate the sizes value and apply the default value of 100vw, which will cause larger than needed images to be selected from the srcset attribute. Any custom implementations that change the loading value of images after WordPress generates the markup should use the new wp_img_tag_add_auto_sizes() function to correct the sizes attribute.

 
WordPressは、画像に loading="lazy" が含まれている場合にのみ、sizes 属性に auto を追加します。それ以外の場合、sizes=auto をサポートするブラウザは sizes 属性の値を検証できず、デフォルト値である 100vw を適用します。これにより、srcset 属性から不必要に大きな画像が選択されることになります。WordPressがマークアップを生成した後に画像の loading 値を変更するカスタム実装では、sizes 属性を修正するために新しい wp_img_tag_add_auto_sizes() 関数を使用する必要があります。

投稿者:: @mk2_mk2

↑

sizes="auto"についてですけれど。

loading="lazy"があると確かにsizes="auto"が付いてます。
loading="lazy"が付いていない画像もあり、その差は何でしょうね？

投稿者:: @chu-ya

↑

loading="lazy"が付いていない画像もあり、その差は何でしょうね？

この辺りは、WordPressのメジャーアップデートごとに、細かい調整があって、変わっていることもあるのですけれど。

ファーストビュー＋α（アルファ）には、つかないようになっていたと思います。
（ファーストビュー直下も、先に読んでおきますので、いくつかつかないはず。）

最新のドキュメントは、まだ探していないです。（しばらく自分の作業中でして）
探しても、見つからないかもですが。

以下辺り？

wp_get_loading_optimization_attributes
https://developer.wordpress.org/reference/functions/wp_get_loading_optimization_attributes/

以下で、ビューポートとかその付近か等を見ている？
https://github.com/WordPress/WordPress/blob/a20a5a4516dbf4cc7ca9e16f1604e96f4f13f563/wp-includes/media.php#L6059-L6066

この直上の部分で、$maybe_in_viewportの判定をしていそう・・・。

以下で、閾値を判定？
https://github.com/WordPress/WordPress/blob/a20a5a4516dbf4cc7ca9e16f1604e96f4f13f563/wp-includes/media.php#L6033

以下によると、閾値は「3」？
（WordPress 6.3で変わった？）

wp_omit_loading_attr_threshold
https://developer.wordpress.org/reference/functions/wp_omit_loading_attr_threshold/

https://github.com/WordPress/WordPress/blob/a20a5a4516dbf4cc7ca9e16f1604e96f4f13f563/wp-includes/media.php#L6125

投稿者:: @mk2_mk2

↑

以下によると、閾値は「3」？

WP6.7により、他のページも画像4枚目以降、size="auto"が付いており。
先述の通り、CSSでwidth:autoとしているため、4枚目以降が、デフォルト300✕150pxとなった。

●ご参考

https://core.trac.wordpress.org/ticket/62413

@chu-ya なるほど。ワードプレスで追加された遅延読み込みとの競合の問題なのですね。ありがとうございます

ちなみにGutenbergエディターを使ってないのも気になったとありますが、クラシックエディターだとまずいこともあるのでしょうか？

投稿者:: @abc111

↑

ちなみにGutenbergエディターを使ってないのも気になったとありますが、クラシックエディターだとまずいこともあるのでしょうか？

Gutenbergエディターはノーコードで複雑なレイアウトが可能となっています。
また、クラシックだと折角のCocoonのブロックが使えません。
使い勝手を考えるとGutenbergエディターに切り替える方がいいかと思います。

@chu-ya なるほど、切り替えてみます。ありがとうございます。またsize="auto"についてなんですが、これはワードプレスの対応を待つしかないという事でしょうか？

abc111さん

本日、WordPress 6.7.1 リリース候補版が使用可能になりました。
上記で確認したところ、WordPress側としては、以下のstyleタグを暫定的に追加することにしたようです。
（sizes属性の"auto"は残る）

なお、WordPress 6.7.1では、sizes属性"auto"の出力制御ができるようなフックも追加されるようです。

add_filter ( 'wp_img_tag_add_auto_sizes' ,  '__return_false' );