僕はデジタル的なことは苦手です。
今日はブログで使っている写真の画質とサイズについて素人の僕が最近考えて悩んでいたことについて書きます。
出来事順に時系列になっています。
まず、ブログを始めた当初は
iPhoneで撮った画像をそのままアップロードしていました。直貼りです。
他のブロガーがどうしているのかは知りませんが、それってあまり良くないような気がするんですよね。
なぜなら、スマホで撮った画像って画質は良いんですがそれだけ容量も大きいからです。
サーバーに負担がかかるかな？ページの読み込み速度は落ちるよな。とか。
PCだと問題ないのかな？でも、スマホだときつかったりする？って。
閲覧者からすると遅いページのロード時間はストレスですもんね。
したがって、画像の容量(画質)を下げようと考えました。
そして、僕は少し悩みました
PC周辺知識に詳しくないために、どうやったら容量を落とすことができるのかわからない。
検索してみるとどうやらアプリでできるらしい。
ちなみに僕がメインで使っているのはMacBookです。
そして、色々調べて良さそうなアプリをいくつか試した結果、最終的に今は『Th-MakerX』というアプリを使っています。
そのアプリ『Th-MakerX』自体も最初はよくわかりませんでしたよ。
もちろんその都度検索しながら色々試していくんですが難しい！
パソコンってyesかnoしか言わないから話がスムーズに進まへん。
しかしながら、辛抱強くしばらく使っているうちにやっと慣れることができました。
次に、考えたことは
画質を落とすのはいいけれど、それでサイトの質(美しさ)まで落としてしまっては本末転倒ですよね。
読者にとって画質の荒い画像は見にくいし、サイトへの評価を落とします。
一方でやはりページの読み込み速度のことを考慮すると、サーバーへかかる負荷も軽減したい。
今はブログ内に記事が約140本あって画像もそのぶんだけ増えているので。
つまり、サイズを下げたいのだけれど、画質を下げ過ぎることもできない、ですよね。
だから、高画質と容量低減のちょうどいいバランスのとれるサイズはどこなんだろって考えました。
結果的に現状は
下記の表の一番下ようにサイズ変換することで落ち着いています。
iPhone5はブログの初期に使っていた機種。
iPhoneSEは現在使っている機種です。
SEの標準画素数は4000×3000=1200万画素で2.8MBでした。
この数字自体が大きいのか小さいのかはわかりません。
そして、1200万画素を1600×1200=190万画素にリサイズすると容量は200KB前後になっています。
絶対的なサイズ感はわかりませんが、2.8MB→200KBですから1/14以下に下げられたということは確かです。
| 画素数 | サイズ | |
| iPhone5 | 3200×2400 | 1.6MB |
| iPhoneSE | 4000×3000 | 2.8MB |
| リサイズ | 1600×1200 | 200KB |
でもワードプレスの仕様をよく見てみると
確かに写真はアプリで1200万画素から190万画素にリサイズしています。
そして、ワードプレス上にアップするときも190万画素のファイルです。
マックブック側でリサイズしてからその画像を読み込ませていますからね。
しかし、よく考えてみるとワードプレスのアップした画像をブログに貼り出す時にはさらにサイズ調整を施しているんですよね。
ワードプレス上でリサイズする際の名称と変換後の画素数は以下の４種類です。
| 名称 | 画質 |
| サムネイル | 150×150 |
| 中 | 300×225 |
| 大サイズ | 1024×768 |
| フルサイズ | 1600×1200 |
実際に画像を貼ると小さい順にこんな感じ。
PCで見てる方はだんだんと画像の面積自体が大きくなって行ってるのがわかると思います。
スマホだとサムネイル以外の３つはどれも変わりがないように見えます。
そうなんですよね。
PCだと写真の大きさ・見えやすさが異なってくるんですが、スマホだと下3つはどれも同じ。
だから、スマホのことだけを考えれば、画像の見た目が同じになるならより容量の小さいものを選択した方がいいですよね。
それでじゃあ僕のブログはスマホかPCのどちらからより多く閲覧させれているのか。
これはgoogleアナリティクスを使えば調べられます。
アナリティクスでは該当のサイトを閲覧しているデバイスのうちPC・タブレット・スマホの割合がわかります。
これでもしスマホが90%なら低いサイズの画像を使えば良いじゃないですか。
今後の方針
結果は mobile76%・desktop19%・tablet5% 。
mobileがスマホだからアクセスの4分の3がスマホからということです。
んー。
これだと読者はスマホばかりとは言えないですよね。
結果的に今後の方針としては基本的には中サイズを使用してPCから閲覧されていそうな記事には大サイズを利用することにします。
実際にカフェの記事なんかはスマホからの閲覧が95%です。ほとんどの方が出先でググっているということです。
一方で『ブログカード』と呼ばれるブログを構築するパーツに関する記事は85%がdesktopでした。
また、特にPCで綺麗に観て欲しい写真も大サイズにしようと思います。
もちろん他にもいい方法があれば適宜取り入れていきます。
ワードプレス上にアップする際の元々の画像サイズについてももっと考えた方が良さそうですし。
以上。
◼️追記(2017年6月15日)
アイキャッチ画像用のファイルを1600×1200にリサイズして、そのまま使用。
記事内の画像用のファイルを1200×900に変換後、WPにアップ。
記事に張り出す時には『中サイズ』にしています。
現在の記事数は176ですが、これからどんどん増えて画像もアップロードして行くことを考えると、ワードプレスが重くならないように心がけて行く必要があると考えています。
僕は真剣にブログをしています。
よかったらブクマ・フォローをお願いします。
haigaki reports. をブックマーク
Follow @haigakiseita
