CWVのCLS対応のために商品詳細画像のwidth、height追加

[tao-s]

概要(Overview・Refs Issue)

ref: #4807 #4901 #5022

Core Web VitalでCumulative Layout Shiftのスコアが悪くなるので、ブラウザがアスペクト比を計算するためにデフォルトの縦横サイズを入れとく。あと標準でaltくらい出しとこうよ

方針(Policy)

メイン画像の2目枚目以降はlazy loadに

マイナーバージョン互換性保持のための制限事項チェックリスト

• 既存機能の仕様変更
• フックポイントの呼び出しタイミングの変更
• フックポイントのパラメータの削除・データ型の変更
• twigファイルに渡しているパラメータの削除・データ型の変更
• Serviceクラスの公開関数の、引数の削除・データ型の変更
• 入出力ファイル(CSVなど)のフォーマット変更

レビュワー確認項目

• 動作確認
• コードレビュー
• E2E/Unit テスト確認(テストの追加・変更が必要かどうか)
• 互換性が保持されているか
• セキュリティ上の問題がないか

[nanasess]

@tao-s コンフリクト解消お願い致します

[carkn]

@tao-s
こちらにてコンフリクトの解消をしました。
また、 #5058 の方針に従って、サムネイルのaltを削除を行っています。
マージします。

[tao-s]

@nanasess @carkn 反応遅れてすいません。
この実装だと商品画像が正方形では無い場合にアスペクト比ズレる可能性があるのですが、各画像のアスペクト比まで見ると色々処理が重くなるのでとりあえずはこれで良いかなと思っています

[codecov-commenter]

Codecov Report

Merging #5023 (1c19503) into 4.1 (530906d) will not change coverage.
The diff coverage is n/a.

@@            Coverage Diff            @@
##                4.1    #5023   +/-   ##
=========================================
  Coverage     68.34%   68.34%           
  Complexity     6070     6070           
=========================================
  Files           456      456           
  Lines         24946    24946           
=========================================
  Hits          17050    17050           
  Misses         7896     7896           

Flag	Coverage Δ
E2E	57.23% <ø> (ø)
Unit	76.08% <ø> (+0.04%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 530906d...1c19503. Read the comment docs.

[chihiro-adachi]

@tao-s
こちらすみません、取り込み予定でしたが見送らせてください。

この実装だと商品画像が正方形では無い場合にアスペクト比ズレる可能性がある

正方形ではない画像を登録されているサイトもあり(ec-cube.coで確認)、固定でのwidth/heightの指定だと既存サイトへの影響が大きそうです。

サーバサイドで事前に計算しておき、それをtwigで出力するようにするなどの実装が望ましいかもしれません。