投稿記事内の画像がスマホでは画像が荒い

「WP Retina 2X」というプラグインを使ったらスマホでもキレイに表示されました。こんな解決方法で正しいのかわかりませんが、無駄にトピックを作ってしまいすみませんでした！
気に入っているテンプレートなので、ありがとうございます！！

wordpressの最新バージョンでsrcsetと言う仕組みが導入されたんですが、それが原因ではないでしょうか？

srcsetは、ブラウザによってまだ対応してないものもあったように思いますし、iPhoneとかは色々と問題が多いのでそれが原因かも知れません。アンドロイドの場合はたいていイケると思いますが、それでもPCよりも不完全な場合があるので、どうしても解決できないという場合は、srcset自体を解除すると言う方法でもしかしたら直るかも知れません。

ただし、根本的に元の画像の画質が荒いとか、サイズが不十分と言うこともありえますので、この全てではありません。

add_filter( 'wp_calculate_image_sizes', '__return_false');
add_filter( 'wp_calculate_image_srcset', '__return_false');

これらを子テーマfunctions.phpに書きます。これでsrcsetは解除できるかと思うんですが、元々の画像のサイズ等を予めiphoneに最適化するのも良いかと思います。srcsetの問題なら、縦向きと横向きで画像サイズが変わるかと思うんですが、その時の画質とかで色々調べられるかも知れませんね。

まぁあれなんですよiphoneとかの場合は、retinaやら色々とその仕組みが原因だろうとは思うんですけれども、本来の画像サイズと、dpiの関係とかでうまくサイズが選択できていないんじゃなかろうかと思ってたりしてます。一応iphone(safari)はsrcsetに対応しているはずなんですけどね。

• この返信は9年、 8ヶ月前にわいひらが編集しました。

いつもお世話になっております。

このトピックを見せていただいて、WP Retina 2Xを使ってみました、

投稿主様のようにiPhoneでの画像の荒さが改善しました。

しかし、ＰＣで開くと画面全体が真っ白になってしまいます。

プラグインをＯＦＦにすると、戻ります。
※相性の悪いプラグインとして報告済みです。

そこで、Hidekichiさんのご提案のとおり

add_filter( 'wp_calculate_image_sizes’, '__return_false’);
add_filter( 'wp_calculate_image_srcset’, '__return_false’);

をFunction.phpに書いたのですが画質の荒さは変わりませんでした。

何かいい方法はありませんでしょうか？

また、WP Retina 2Xを使っても大丈夫な環境にすることはできませんでしょうか？

上記を止めて、
remove_filter( 'the_content', 'wp_make_content_images_responsive' );
とかはどうですか？
まぁsrcsetが問題であればですけれども。

結局retinaは本来必要な画像の幅ピッタリ2倍がいるわけで、320pxで表示したい時は680pxの画像を用意する必要があり、対応用の画像とノーマル用の2種類の画像があれば、メディアクエリで

@media screen and (-webkit-min-device-pixel-ratio : 2),screen and (min-device-pixel-ratio : 2){
 //iphoneの時の画像設定
}

みたいにすればそれなりに行けそうな気がするんですけどね。

結局iphoneの解像度が高いから拡大されてぼやけて見えるわけです。特にjpegで圧縮かけたものとかはひどいでしょうね。そもそもスマホに高解像度が必要かどうかも疑問ですよね。できるだけ軽くしたいのに画質は高くしなければならないという矛盾。ハード側で補正してくれよと思ったりするわけですが、対応としてはできるだけ高画質のものを必要な時に必要なものが表示されるようにすると言う感じになりそうです。

ひとまずsrcsetが問題かどうかは、imgタグにsrcset及びsizesが入ってるかどうかでわかるのでここらをまず試して、無くなっているようであればプラグインなりを試してみてどうなるかを確認したい所ですね。

photonを利用している場合は、まず切っておいて問題が無くなってから利用するようにしないとphotonのキャッシュがいつまでも有効になってややこしいことになるので気をつけて下さい。
まぁ使っても使わなくても体感変わったかな…変わったような気がするかな…ぐらいのものですのでひとまず切っておくのがベターかと思います。

この件の解決法を探してこちらにたどり着きました。iPhone6Plusでは画像がきれいに見えるのに、iPhone6だと粗くなる、という症状です。

Hidekichiさんの示されたコードをfunctions.phpに書いて解決しました。ありがとうございます。

ただ、上記のコメント内のコードには全角が含まれているため、そのままコピペだと解決しなかった可能性があると思います。せっかくの貴重なアドバイスなので、ご報告させていただきます。

> 上記のコメント内のコードには全角が含まれているため

これはbb-pressの仕様なので、各々注意してもらうしか無い部分です。セキュリティのための仕様かと思います。

｝っと、と、投稿では半角でちゃんといれてるんだかねっ(ツンデレ

そういう仕様なのですね。指摘ぽく書いてすみません。
この件はどうしても直らなくて悩んでいたので、すごく助かりました。いつもありがとうございます。