トピックを立てる前にチェック
- 「フォーラムガイドライン」に必ず目を通してください。
- バージョンアップデート後に表示がおかしくなった場合は、
「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。 - フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
フォーラム
通知
すべてクリア
Topic starter
フォーラムのこちらの内容と同じ質問となるのですが、スライダーや新着記事などに表示されてる画像に必要以上に大きな画像が選択されてしまいます。
srcsetには複数サイズの画像が列挙されていますが、表示したい領域に近いサイズの画像が選択されるようにすることは可能でしょうか？
例えば以下デモサイトのスライダーや新着記事部分の画像がそうです。
https://demo.swell-theme.com/demo01/
sizes="(max-width: 1024px) 100vw, 1024px"
スライダー部分ですとこちらの属性指定があり、100vwか1024pxよりより大きく外れる小さい画像が採用されないことが原因かと考えております。
※
PCのGoogle Chromeでの表示確認なります。
デモサイトを参照先として確認させて頂きたいため「利用中のプラグイン一覧」は省略させていただきました。
必用でしたら加筆致します。
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.6.1.3
利用中のWordPressバージョン
5.9.3
利用中のプラグイン一覧
Site Kit by Google
This topic was modified 2年前 by amamoring
投稿済 : 17/04/2022 2:21 pm
メディアクエリというよりも、width属性がある、もしくはwidth属性が大きいためなんですかね？
メディアクエリーで場合分けする場合は、width属性を指定してはいけません。width属性を指定すると、画像サイズが指定した値に固定されてしまい、場合分けされないからです。
投稿済 : 18/04/2022 9:13 pm
Topic starter
返信ありがとうございます。
確かにwidth属性も指定されているため、記載の部分の影響があるのかもしれません。
投稿済 : 19/04/2022 7:42 pm
メディアクエリーで場合分けする場合は、width属性を指定してはいけません。width属性を指定すると、画像サイズが指定した値に固定されてしまい、場合分けされないからです。
あれ、sizesってこんな仕様でしたっけ？
現状では、参照元になっている HTML Standard の方にはそのような記載はなくなっているように見受けられましたが... 🤔
コアの画像ブロック等もwidthとsizesは併用されていて、逆に今はimgタグにはwidthとheightがないとCLSスコアが下がるような気もするのですが...。
ちょっと改めて調べてみます。
SWELL開発者です。
投稿済 : 21/04/2022 11:38 am
どちららにせよ、本来スライド枚数に応じてsizes計算していたはずなのにそれが適用されなくなってしまっているみたいなので、まずはそこのバグを修正してみます！
SWELL開発者です。
投稿済 : 21/04/2022 11:44 am
私もよくわかっていないところがありますが、デベロッパーツールのネットワークを見ると、確かに大きいサイズの画像が読み込まれているようでしたので調べてみました。
古い情報でしたらすみません。
ちなみに、他テーマでもwidth指定はされているようですが、widthが小さくなっていました。
widthを指定すべきなのか、指定しないほうがいいのかは正直よくわかりません。
投稿済 : 21/04/2022 12:02 pm