とりあえずスマホでもすべての画像が表示されるようにブログの画像を修正しました。
と言っても、iPhone 5sでしか確認できていませんが・・・。

※iPhone 4でも確認しました!
もし、お持ちのスマホでこのブログの画像が表示されてないよーという方がいらっしゃいましたら、教えていただけると助かります・・・。

やったことは、表示されなくなった画像の「元画像」のサイズを小さくして、添付の際にはさらに小さいサイズを指定して投稿。これだけです。詳しくは下に書いてあります。

(※元画像のサイズを小さくしたのはiPhoneのカメラアプリで撮った写真だけです。
表示されなくなった画像はiPhoneのカメラアプリで撮った写真だけだったため。)

サイズを小さくしたのは、スマホで画像が表示されなくなったのが、おそらくファイルサイズ(またはサイズ)が問題なのではないかと思ったからです。
※詳細(前記事)⇒WordPressの画像がスマホだと表示されなくなった話

スポンサーリンク
[adsense]

ファイルサイズを小さくして軽くしてみた

とりあえずスマホで表示されるように、元の画像のサイズを落とすことにしました。
※サイズを小さくすれば、ファイルサイズ自体も小さくなるので表示も速くなります。

元のサイズ(フルサイズ)を小さくして、画像を添付する際には再び貼り付けたいサイズに指定して投稿・・・という形です。

画像のサイズを小さくすることで、画像自体は以前より粗くなってしまいますが、ページの表示速度も速くなるので、そこまで粗くならなければいいかなーという感じでした。

表示されないよりは絶対表示されていた方が良いからね。
画像が粗くなるといっても、以前ほどではないし。

スマホで画像を表示するためにどこまでサイズを落とすのか

画像のサイズを小さくするといっても、どこまで小さくするのか悩みどころです。

現状ではスマホでもPCと同じように表示できればいいというだけなので、スマホでも表示できるギリギリのサイズとかにした方が画像自体は綺麗に表示できそうです。

サイズを大きくすればするほど、ページの表示に時間がかかるようになると思いますし、サーバーの負担も大きくなるはずです。

ですので、ページの表示速度、サーバーの残り容量などいろいろ考えてサイズを決めるのが良さそうです。

実際にやってみた画像のファイルサイズとサイズ

本当はファイルサイズを50KBとかにしてみたかったのですが、iPhoneのカメラで撮った画像をそこまで落とすと画像がかなり粗くなってしまいそうだったので断念。

iPhone 5sのスクショ画像(パズドラとかの画像)で200kBぐらい、ものによっては300kB以上あるので、それぐらいならいいかなーと思い込むことにしました。

ちなみに、iPhone 5sのカメラアプリのデフォルトサイズである2448 × 3264だと、どれも1MB以上あります。

※このブログはEWWW Image Optimizerというワードプレス用のプラグインを入れており、アップロードの際に自動で画像が圧縮されるので、iPhone 5sのカメラで撮った元画像はさらにファイルサイズが大きいはずです。

実際に画像をどれぐらいのサイズにするかは悩みましたが、縦を1024にしてみました。
縦が1024なので、iPhone 5sだと、横は768とかになります。

縦を1024にしてみた理由は、iPhoneのカメラで写真を撮って、その画像をリサイズする際にSimpleResizeというiPhoneアプリで縦を1024に合わせられるから・・・です。

※参考:ブログ等投稿用にiPhoneアプリSimpleResizeで画像をリサイズする

スマホでも画像を表示させるためにやってみた修正方法

先に言っておくと、少々面倒です。

僕の場合は、ブログに載せている画像の多くがパズドラなどのスクショ画像だったので、それほどでもなかったですが、普段からスマホやデジカメなどで撮った画像をアップしている場合は、この方法だと非常に面倒だと思います。

※iPhone4時代も含めた、iPhoneのスクショをアップした画像はきちんと表示されているので、手を加えるのはカメラで撮った画像だけです。

1.ワードプレスのメディア→ライブラリを開く

2.iPhoneのカメラで撮った画像の「編集」をクリック

3.画像の編集画面に行ったら、「画像を編集」をクリック

4.画像縮尺の変更でサイズを変更する

WS000006

※画像ではすでに変更を加えているため、元のサイズが768 × 1024になっています。
変更前の元のサイズは2448 × 3264。

5.画像を載せたい記事の編集画面に行って、「メディアを追加」から載せたい画像を「フルサイズ」で添付→添付後、自分の載せたいサイズに変更する

この辺は「WordPressで画像を綺麗に表示する(貼り付ける)方法」で書いたものと同じです。
同じ内容を書くのもあれなので省略します。

詳しくは過去記事をご覧ください。
WordPressで画像を綺麗に表示する(貼り付ける)方法

あとがき

今回、スマホでブログを見た時の画像が粗い!から始まって、綺麗に表示するにはどうすればいいのか、どうしたら画像がスマホでも表示されるようになるのか、画像をどのサイズにすればいいのかと、思ってもみないほどいろいろと調べることになりました。

プラグインを入れたり停止したりといろいろしてみたしね。
WordPressでPhotonを有効化したら画像が表示されない・・・を解消しました

何か1つブログに大きな変更を加えるのは非常に大変なんだなと痛感しました。
本当に。