画像が壊れて見えたのは、確かめ方のせいでした。iframe 検証を疑う順番と、実ページの currentSrc

// 実ページのコンソールで実行する: 画像ごとの状態を一覧にする
console.table(
  [...document.images].map((img) => {
    const r = img.getBoundingClientRect();
    return {
      src: img.getAttribute("src"),
      lazy: img.loading === "lazy",
      complete: img.complete,
      naturalWidth: img.naturalWidth,
      currentSrc: img.currentSrc.split("/").pop() || "(未選択)",
      renderedWidth: Math.round(r.width),
    };
  })
);

# verify_images.py — 実ページで画像の状態を分類する(Playwright / Python 3)
import sys
from playwright.sync_api import sync_playwright
 
SNAPSHOT = """() => [...document.images].map(i => {
  const r = i.getBoundingClientRect();
  return { id: i.id || i.getAttribute('src'), complete: i.complete,
           nw: i.naturalWidth, cur: i.currentSrc.split('/').pop(),
           rw: Math.round(r.width), lazy: i.loading === 'lazy' };
})"""
 
def classify(s):
    if s["rw"] == 0:
        return "hidden"        # 描画幅 0。ここで naturalWidth を信じない
    if s["lazy"] and s["cur"] == "" and not s["complete"]:
        return "not-started"   # 遅延読み込みがまだ始まっていない
    if s["complete"] and s["nw"] == 0:
        return "BROKEN"        # 読み込み完了なのに中身が空
    return "ok"
 
def scroll_through(page, step=600):
    h = page.evaluate("document.documentElement.scrollHeight")
    for y in range(0, h + step, step):
        page.evaluate(f"window.scrollTo(0, {y})")
        page.wait_for_timeout(120)   # 遅延読み込みの発火を待つ
    page.wait_for_timeout(500)
 
def check(url, width):
    with sync_playwright() as p:
        b = p.chromium.launch()
        page = b.new_page(viewport={"width": width, "height": 800})
        page.goto(url, wait_until="load")
        first = {s["id"]: classify(s) for s in page.evaluate(SNAPSHOT)}
        scroll_through(page)
        after = page.evaluate(SNAPSHOT)
        print(f"== {url} @ {width}px")
        for s in after:
            print(f'{s["id"]:12} first={first[s["id"]]:12} '
                  f'after={classify(s):8} cur={s["cur"] or "-":10} '
                  f'nw={s["nw"]:5} rw={s["rw"]}')
        b.close()
 
if __name__ == "__main__":
    check(sys.argv[1], int(sys.argv[2]))

== http://localhost:8767/page.html @ 375px
below        first=not-started  after=ok       cur=img_l.png  nw= 1600 rw=400
gone         first=BROKEN       after=BROKEN   cur=missing.png nw=    0 rw=47
eager        first=ok           after=ok       cur=img_s.png  nw=  374 rw=400
 
== http://localhost:8767/page.html @ 1280px
below        first=not-started  after=ok       cur=img_l.png  nw= 1600 rw=400
gone         first=BROKEN       after=BROKEN   cur=missing.png nw=    0 rw=47
eager        first=ok           after=ok       cur=img_m.png  nw=  800 rw=400

画像の表示確認をお願いします。次の条件を守ってください。
1. 実ページを直接開いて確認してください。iframe に差し込んだ検査ページでは判定しないでください。
2. 幅 375px と 1280px の両方で確認してください。
3. 判定は naturalWidth だけで行わず、描画幅(0 でないこと)と currentSrc も記録してください。
4. 最初に読んだあと、ページ最下部までスクロールしてからもう一度読み、変化を報告してください。
5. 壊れていると判定した画像は、実ページを開き直して同じ症状が再現するかを確認し、再現したものだけを報告してください。

# shrink.py — 数値を半分にする置換: 素朴な版と、安全な版(Python 3)
import re
 
css = """.gallery img { width: 800px; max-height: 600px; }
@media (min-width: 768px) { .gallery img { width: 640px; } }
@media (max-width: 480px) { .gallery img { width: 320px; } }
"""
 
def naive(css, ratio):
    # すべての「数値px」を縮める。@media の閾値も巻き込む
    return re.sub(r"(\d+)px", lambda m: f"{round(int(m.group(1))*ratio)}px", css)
 
PROP = r"(?<![\w-])(width|max-height)(\s*:\s*)(\d+)px"  # min-width/max-width は除外
 
def scale_props(text, ratio):
    return re.sub(PROP, lambda k: f"{k.group(1)}{k.group(2)}{round(int(k.group(3))*ratio)}px", text)
 
def safe(css, ratio):
    out = []
    for line in css.splitlines():
        m = re.match(r"\s*@media[^{]*\{(.*)\}\s*$", line)
        if m:  # @media の条件部分(括弧の中)には触れず、波括弧の中身だけ縮める
            head = line[: line.index("{") + 1]
            out.append(head + scale_props(line[len(head):], ratio))
        else:
            out.append(scale_props(line, ratio))
    return "\n".join(out) + "\n"
 
print("--- naive 0.5 ---"); print(naive(css, 0.5))
print("--- safe 0.5 ---");  print(safe(css, 0.5))

--- naive 0.5 ---
.gallery img { width: 400px; max-height: 300px; }
@media (min-width: 384px) { .gallery img { width: 320px; } }
@media (max-width: 240px) { .gallery img { width: 160px; } }
 
--- safe 0.5 ---
.gallery img { width: 400px; max-height: 300px; }
@media (min-width: 768px) { .gallery img { width: 320px; } }
@media (max-width: 480px) { .gallery img { width: 160px; } }