“wp-image-” のないimgタグで起こりえる問題は？

  • 解決済 makotos1112

    (@makotos1112)


    3年、 7ヶ月前

    私は投稿フォームで記事を作成するのではなく、事前にhtmlを用意しておいたものを
    コピペで記事に貼り付ける運用をしている上での質問です。

    記事の文章はもとより、imgタグもパスを見越してhtmlにマークアップしています。
    パス自体はアップロード後のものと一致できているので、画像表示は可能ですが、
    その場合、imgタグにあるclassの “wp-image-xxxxx” が記載されないままになります。

    上記のクラスは画像アップ後に値が決まるので事前に設定することはできないと理解していますが、
    “wp-image-xxxxx” のないimgタグを使用した記事で起こりえる問題について(もしあれば回避策も)
    ご教示頂けませんでしょうか。

    1つ分かったのは、「画像詳細」画面で「サイズ」の項目が表示されないことです。
    たとえば、この「サイズ」が非表示であることは、ページ表示速度やパフォーマンス評価においてリスクとなるでしょうか。

    よろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • moyo55

    (@moyo55)

    3年、 7ヶ月前

    imgタグで画像を貼っても特に問題は無いと思います。
    例えばlazyloadなどの機能はコンテンツ内のimgタグで判定して機能するように設定していれば動きますし、画像を指定してcssで何かするときにちょっと修正の手間がかかる程度ではないかと。

    画像のwidth/height情報が無いことで起こりうるのは
    画像表示スクリプトの種類によっては上手く動かないとか、
    累積レイアウトシフト（CLS:Cumulative Layout Shift）が発生するとかではないでしょうか。

    CLSというのはLazyloadを使っているときに発生しがちな遅延読み込みの影響でテキスト等がズレる現象のことです。
    これはユーザーエクスペリエンス的によろしくないということで、今後サイト評価が下げられる可能性があります。

    トピック投稿者 makotos1112

    (@makotos1112)

    3年、 7ヶ月前

    回答ありがとうございます。
    グーグルサーチコンソールでCLS警告が発生しており、ご回答頂いた内容がまさに知りたいことでした。

    その原因が上記のクラスの有無である影響があるか気になった次第で質問したのですが、“wp-image-xxxxx”がなくともwidth,heightはタグに記載がありますので、CLS警告に関するの根本の問題は、Lazyloadによってレイアウト全体がずれながら表示されること、である可能性について理解ができました。

    質問が脱線してしまいますが、CLSの発生を回避する有効は方法はありますでしょうか？
    思いついたのはimgが収まっているdivにheightを明記しておけばレイアウトのズレはなくなり、評価が改善につながるんでしょうか？

    moyo55

    (@moyo55)

    3年、 7ヶ月前

    >評価の改善
    タグの直接記述とcssで指定するのが基本対応ですが、
    コンテンツ表示関連の評価はCLSに限らずブラウザの仕様とPagespeed InsightsやLighthouseなどの判定ツールの仕様によるため、実際に試してひとつずつ確認していくしかないと思います。

    トピック投稿者 makotos1112

    (@makotos1112)

    3年、 7ヶ月前

    ご回答ありがとうございました。
    色々と試してみます。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「“wp-image-” のないimgタグで起こりえる問題は？」には新たに返信することはできません。

タグ