Discordコミュニティを作りました! 参加する

フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
スライダーや新着記事に表示される適切な...
 
通知
すべてクリア

[解決済] スライダーや新着記事に表示される適切な画像サイズの選択について

8 投稿
3 ユーザー
3 Likes
1,547 表示
amamoring
(@amamoring)
投稿: 3
メンバー
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
suya
 suya
(@suyasite)
投稿: 115
メンバー
 

メディアクエリというよりも、width属性がある、もしくはwidth属性が大きいためなんですかね?

メディアクエリーで場合分けする場合は、width属性を指定してはいけません。width属性を指定すると、画像サイズが指定した値に固定されてしまい、場合分けされないからです。

参考: https://laboradian.com/img-srcset-sizes/

SWELLファンです。
SWELL初心者のためのお役立ちリンク集(おすすめプラグイン)
SWELLサイト・ブログ事例集(WP-Search)
無料のプロフィール&プレスリリースサイト「ブロググ」

 
投稿済 : 18/04/2022 9:13 pm
amamoring
(@amamoring)
投稿: 3
メンバー
Topic starter
 

@suyasite 

返信ありがとうございます。
確かにwidth属性も指定されているため、記載の部分の影響があるのかもしれません。

 
投稿済 : 19/04/2022 7:42 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 
投稿者:: @suyasite

メディアクエリーで場合分けする場合は、width属性を指定してはいけません。width属性を指定すると、画像サイズが指定した値に固定されてしまい、場合分けされないからです。

あれ、sizesってこんな仕様でしたっけ?
現状では、参照元になっている HTML Standard の方にはそのような記載はなくなっているように見受けられましたが... 🤔 

コアの画像ブロック等もwidthとsizesは併用されていて、逆に今はimgタグにはwidthとheightがないとCLSスコアが下がるような気もするのですが...。

ちょっと改めて調べてみます。

SWELL開発者です。

 
投稿済 : 21/04/2022 11:38 am
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

どちららにせよ、本来スライド枚数に応じてsizes計算していたはずなのにそれが適用されなくなってしまっているみたいなので、まずはそこのバグを修正してみます!

SWELL開発者です。

 
投稿済 : 21/04/2022 11:44 am
suya
 suya
(@suyasite)
投稿: 115
メンバー
 

@loos_ryo 

私もよくわかっていないところがありますが、デベロッパーツールのネットワークを見ると、確かに大きいサイズの画像が読み込まれているようでしたので調べてみました。

古い情報でしたらすみません。

ちなみに、他テーマでもwidth指定はされているようですが、widthが小さくなっていました。

widthを指定すべきなのか、指定しないほうがいいのかは正直よくわかりません。

SWELLファンです。
SWELL初心者のためのお役立ちリンク集(おすすめプラグイン)
SWELLサイト・ブログ事例集(WP-Search)
無料のプロフィール&プレスリリースサイト「ブロググ」

 
投稿済 : 21/04/2022 12:02 pm
了
 
(@loos_ryo)
投稿: 1248
メンバー Admin
 

2.6.1.4でsizes修正しました!

SWELL開発者です。

 
投稿済 : 26/04/2022 1:45 am
suya reacted
amamoring
(@amamoring)
投稿: 3
メンバー
Topic starter
 

2.6.1.4にて最大サイズ以外が選択されていることを確認しました。

ご対応頂きありがとうございます。

 
投稿済 : 26/04/2022 7:53 pm
and suya reacted
共有: