テクニカル

ブログの写真の画像サイズ・画質について考えていること。変換アプリやリサイズなど。

僕はデジタル的なことは苦手です。

今日はブログで使っている写真の画質とサイズについて素人の僕が最近考えて悩んでいたことについて書きます。

出来事順に時系列になっています。

 

まず、ブログを始めた当初は

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万画素のファイルです。

マックブック側でリサイズしてからその画像を読み込ませていますからね。

しかし、よく考えてみるとワードプレスのアップした画像をブログに貼り出す時にはさらにサイズ調整を施しているんですよね。

ワードプレス上でリサイズする際の名称と変換後の画素数は以下の4種類です。

 名称  画質
 サムネイル  150×150
 中  300×225
 大サイズ  1024×768
 フルサイズ  1600×1200

 
実際に画像を貼ると小さい順にこんな感じ。



PCで見てる方はだんだんと画像の面積自体が大きくなって行ってるのがわかると思います。
スマホだとサムネイル以外の3つはどれも変わりがないように見えます。

そうなんですよね。
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. をブックマーク

関連記事

  1. テクニカル

    ワードプレス|引用符htmlタグの付け方・使い方と著作権ルール|WordPress

    今日はワードプレスで引用符を使う場合のhtmlコードについてレポートし…

  2. ノウハウ

    ブログ超初心者がブログ開設前にやるべきこと

    ブログ初心者がブログを始める前にやるべきことをレポートします。…

  3. ノウハウ

    初めてブログを開設するために必要な初期費用

    ブログを初めて開設する時にかかる費用についてレポートします。・…

  4. レポート

    6月毎日ブログ更新中!経過報告。

    毎日更新している今の心境を、ログとして残しておくためにもツラツラと書き…

  5. ノウハウ

    ブログを書くコツ。自然と記事が書ける3つのシチュエーション。

    僕はここまで約5ヶ月間ブログを運営してきました。たったの5ヶ月…

読まれている記事

最近の記事

ご注文はブログですか?

  1. レポート

    京大卒のニートが1ヶ月間ブログを書いてみた結果。初心者ブロガーの最初のアクセス数…
  2. ノウハウ

    ブロガー歴3ヶ月、僕の記事作成手順。ブログの書き方をくどくどと紹介します。
  3. 勉強効率化

    京大受験の合格体験記と感想。ブログで初めて話します。苦しかった。
  4. コラム

    落ちこぼれから挽回して大学受験で逆転するために。生徒・保護者への提案。
  5. ノウハウ

    コネなしツテなしフォロワー0。新規ドメインからブログを始めて半年間。コツコツ検索…
PAGE TOP