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

フォーラム

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

[解決済] safariでサムネイルが表示されません

4 投稿
2 ユーザー
5 Likes
1,402 表示
nora55
(@nora55)
投稿: 2
メンバー
Topic starter
 

はじめまして。
swellで自分のサイトを作りました。初心者です。

safariでホームページのサムネイルが表示されないと友人に教えられました。
(私は直に確認できていません)
記事に飛べば、そこの画像は普通に見えるそうです。

■私の環境はWindowsとAndroidです。
Chrome
・Microsoft Edge
では見られます。

■iPhoneを持っている友人に見て貰った所
・safari
では見る事ができません。

S  18989059

ネットで調べた所、「lazy-load」というものが関係していそうだと思いましたが、
今自分が入れているプラグインは、それと関係なさそうだと思うのですが、
それも間違っていますでしょうか。

また、一応入れたのですが「無効」にしているプラグインが
・EWWW Image Optimizer
・ Image Quality Control
になりますが、これも関係していますでしょうか?

もしよろしければご教授いただけますと幸いです。
よろしくお願い申し上げます。

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, WordPress更新後、SWELLは最新版にしましたか?, Googleなどでも検索してみました, サポート範囲外だということを理解しているが助けが欲しい(有料サポートしてくれる方を探したい)
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.6.2
利用中のPHPバージョン
7.4.0
OS
Windows10
利用中のWordPressバージョン
5.8
利用中のサーバー会社
ロリポップ
ブラウザ
Chrome,Edge,safari
利用中のプラグイン一覧

BackWPup
BBQ Firewall
Broken Link Checker
Contact Form 7
FileBird Lite
Really Simple SSL
SEO SIMPLE PACK
WP Multibyte Patch
WP Revisions Control
XML Sitemap & Google News
XO Security

 
投稿済 : 27/06/2022 7:21 pm
山本大介
(@b4rskbe5)
投稿: 118
メンバー
 

ほとんど全ての画像が WebP となっているので、少し古い Safari では表示することができません。
PNG が使用されているロゴ画像が表示されているのでおそらく WebP が表示できないことが原因でしょう。
https://caniuse.com/webp

これを回避するために、JPEG や PNG でアップロードしておき、プラグイン等で WebP 対応ブラウザには軽量な WebP を使用してもらう (非対応は元の JPEG や PNG を表示)、という使い方が一般的です。

EWWW Image Optimizerも Image Quality Control もどちらも WebP 以外の画像をアップロードすれば自動で WebP を生成して、WebP が使用可能なブラウザの時には WebP が使用されるようになっています。
(どちらのプラグインで WebP を作成したかで、WebP のファイル名の命名規則が違う可能性があるので、途中でプラグインを変更することはオススメできません)

ちょっと大変ですが、画像圧縮のプラグインを有効化して、JPEG や PNG の画像をアップロードして置き換えてみて下さい。

Web 開発やってます。3/31まで不具合やカスタマイズを定額で行うサービスを20%引きでキャンペーン中です!
WordPress プラグインも開発しています。
Image Quality Control ・・・ 画像最適化のプラグイン
Combine Social Photos ・・・ Instagram 埋め込みブロックのプラグイン

 
投稿済 : 27/06/2022 9:06 pm
nora55
(@nora55)
投稿: 2
メンバー
Topic starter
 

山本様

さっそくのご教示ありがとうございました。

WebPですね!
その視点が全くありませんでした。
本当にありがとうございます。

・EWWW Image Optimizer
・ Image Quality Control

どちらも、使う意味がよく分からなかったのですが
そのようにブラウザーに合わせて出力してくれるのですね。
さっそくどちらかを有効にして試してみます。

どのように解決すればいいのか分からず本当に困っていましたので
山本様に心から感謝いたします!

これで解決とさせていただきます(^_^)
ありがとうございました。

 
投稿済 : 28/06/2022 12:24 pm
山本大介
(@b4rskbe5)
投稿: 118
メンバー
 

WebP から JPEG や PNG に置き換えてみて改善したら、ここで報告をしていただけると助かります。
今後は、問題が解決されたことを確認したら、結果をここに書いていただき、その後に解決済みをマークして下さい。こういったフォーラムでは、解決したという報告がなによりも資産です。

画像最適化のプラグインは、画像の圧縮率を調整したり、WebP などのより軽量なフォーマットを自動生成したりしてくれます。SWELL は、圧縮品質が100に設定されているので圧縮率の調整は必須でしょう。

EWWW は、評判も良くインストール数も莫大ですが、SWELL では不具合が起こる事例も報告されていますので問題ないかよく確認して下さい。また、画像の Lazy Load (画像が画面の表示領域にスクロールされた時に読み込んで、ファーストビューの表示を遅くしない機能) は、SWELL にも組み込まれていて機能が重複しますのでどちらかは無効化しておいて下さい。

Image Quality Control にはそういった機能はなく、アップロード後の画像の品質に問題がなければ初期設定から変更しなくて構いません。
画像ごとに自動で圧縮率を調整する機能はありませんので、画質が悪く感じる・ファイルサイズが大きすぎる、という場合には設定画面から圧縮率を調節して下さい。(プラグインの設定画面内に品質とファイルサイズのテストツールもあります)

Web 開発やってます。3/31まで不具合やカスタマイズを定額で行うサービスを20%引きでキャンペーン中です!
WordPress プラグインも開発しています。
Image Quality Control ・・・ 画像最適化のプラグイン
Combine Social Photos ・・・ Instagram 埋め込みブロックのプラグイン

 
投稿済 : 28/06/2022 2:01 pm
taizo and skillsharejp reacted
共有: