Google先生のせいで画像がうまく表示されなくなった的なタイトルですが
八つ当たりです∩(・x・)∩
実際は自分が追記したphpのせいだったんですけどね・・・。
一体何をやっていたのか、かんたんに説明したいと思います。
GoogleのサービスでPageSpeed Insightsというのがあります。
ページの表示速度の分析ができるツールです。
運営を手伝っているお客様のサイト（Wordpress）でやってみたところ
改善した方がいいね・・・という数値が出てしまい、ページ表示の高速化をやってみることに。
まずやってみたのは「画像の軽量化」
サイト内に及ぼす影響がほぼ無く、簡単にできるのでおすすめです。
何をやっていいかわからんけど、とりあえずページ表示を軽くしたい方は
まずは「画像の軽量化」がいいと思います！
画像をドロップするだけで簡単に軽量化できちゃうサイトはこちら。
https://tinypng.com/
ドロップエリアに画像ファイルをポイッ！と放り込むだけでOKです。
場合によっては画質が荒くなってしまう、ということもあるので
心配なときはバックアップを取っておくと安心です∩(・x・)∩
次に手を付けたのは「Javascriptの非同期化」
コレが原因で一日あたふたする羽目になろうとは・・・(*_*)
写真画像をクリックするとlightbox的にモワッと拡大表示していたのですが・・・
↑モワッと表示してる図。右下の✕印をクリックで閉じることができます。
クリックしても拡大せず、画像だけがそのまま表示されるようになってしまったのです（白目）
ところでJavascriptの非同期化とはどんなものかを簡単に。
Javascriptはそのままですと、CSS読み込み＞js読み込み という順番なので
ファイル数が沢山あったり、容量が大きいとそのぶんページ表示が遅くなってしまいます。
それを「非同期」＝利用開始するときに読むよ！とすれば、ページ表示がその分軽くなります∩(・x・)∩
しかし、読み込み位置を変更したりすると、うまく動かないものもありますのでご注意！
今回はfunction.phpに追記したものの影響で、クリック時の画像拡大がうまく作動しませんでした。
自社サイトならここまで焦らないのですが、この現象が起こったのがバリバリ運営中のお客様のサイト。
以前、バージョンの異なるphpファイルをアップしてしまい
サイト全体が真っ白になってしまった事件（トラウマ）の次くらいに焦りました。
ひとまずJavascriptの非同期化は後回しにして、他の部分で軽量化をがんばりたい感じです。