iPhoneでGoogleのChrome（クローム）アプリを使ってサイトを見ると、画像が表示されずにaltのテキストが表示されるという問題についての解決方法を見つけたので記録しておきます。

まず、表示されない部分のソースから

<img src=”./img/result.png” alt=”テキストテキスト” class=”mb10″ width=”100%” height=”auto” />

表示されたページのソースを見てみると・・・

<img src=”img/xresult.png.pagespeed.ic.GTgJe-Si86.webp” alt=”テキストテキスト” class=”mb10” pagespeed_url_hash=”2854374935” onload=”pagespeed.CriticalImages.checkImageForCriticality(this);” width=”506” height=”73“/>

んんん～～～？？？

身に覚えのないコードに変わっている！？

なんじゃコレ！

と思いながら色々と調べていると、webpというのはGoogleが開発している画像形式の事なんだそうです。

webpはウェブピーかと思いましたが、正しくはウェッピーなんだとか。。。

webp（ウェッピー）について

webpは、Googleが次世代の画像形式として開発しているんだそうです。

mod_PageSpeedというものがONになっていると.png ⇒ .webp へ勝手に変換されて表示されてしまうんですね。

png ⇒ webp へ自動で画像を変換するフィルター（convert_jpeg_to_webp）をONにするには、confファイルもしくは.htaccessに記載する必要がありましたが、ChromeではデフォルトでONになっているようです。

ONになっていても、サポートしていないブラウザの場合は、webpではなく普通の画像を表示するようになっているのだそうです。

ちなみに、iPhoneのsafariではwebpが利用できないため、フィルターがONになっていようがなかろうが、webpには変換することなく普通の画像を表示しています。

ただ、iphoneアプリのChromeでも前回のアップデートまでは確か画像は表示されていたハズ！前回のアップデートはいつ？だったか忘れましたが、しばらく様子を見ていても改善されないので相変わらず画像が表示されない状態です。

バグなら早く修正してほしいところですが、集客できているサイトの場合だと離脱率も上がるでしょうし、何より売り上げに直結していれば完全な死活問題です。

Googleさんの対応を待っていてもラチがあかないので、手っ取り早く表示されていない画像を表示させる応急処置として下記コードを .htaccess に追加してみてください。

このたった1行を追加するだけで、iPhoneのChromeでもwebpに変換されず、ソースに記述している通りの普通の画像が表示されるようになります。

ちなみに、iPhoneだけではなく、PCで使用しているChromeにも効きます。

といってもPC版ではwebpが表示されているので、スマホ用サイトやレスポンシブサイトの場合に限ると思いますけどね。

私と同じように悩みまくった方の手助けになれば光栄です＾＾