テクニカル

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

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

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

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

 

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

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で綺麗に観て欲しい写真も大サイズにしようと思います。

もちろん他にもいい方法があれば適宜取り入れていきます。
ワードプレス上にアップする際の元々の画像サイズについてももっと考えた方が良さそうですし。

 
以上。


僕は真剣にブログをしています。
よかったらブクマ・フォローをお願いします。

 

haigaki reports. をブックマーク

こんな記事も書いてます。

5ヶ月目のブログレポ。初心者ブロガー初めてのバズ。
5ヶ月目の運営レポートです。初心者ブロガーやブロガー以外の方にもできるだけ伝わるように書きます。(目次)・アクセス数など・バズについて①バズとは ②初めてのバズ③バズって思ったこと・さいごにアクセス数な...

初心者ブロガーの4ヶ月目。
今日は先月度4ヶ月目の運営状況についてレポートします。できるだけブロガー以外の読者にも伝わるように書きます。 (目次)・アクセス数などの成果・流入源について・今後の予定・さいごに 前回の報告記...

ブログを書くコツ。自然と記事が書ける3つのシチュエーション。
僕はここまで約5ヶ月間ブログを運営してきました。たったの5ヶ月なんですが、この間ほとんど毎日記事を書いています。毎日更新するわけではありませんが、自分が立てた予定通りに記事が投稿できるように毎日何...

ブロガー歴3ヶ月、僕の記事作成手順。ブログの書き方をくどくどと紹介します。
今日は僕の現在の記事作成手順についてレポートします。記事自体の中身をこんな言葉遣いや見出し使い、内部リンクの挿入で書いてるよ。というのではなく、こんな風な手順を踏んで1つの記事を完成させてるねんっ...

【ブログ運営】『PostEver2』をレビュー。ブロガーにオススメのメモ帳アプリ【口コミ評価】
今日はスマホアプリの『PostEver2』をレビューします。有名なクラウドを利用した高機能のメモサービスにEvernoteがあります。PostEver2とはこのEvernoteをより便利に利用するためのEvernoteの派生的なスマホアプ...

アニメ日常の一節『やるまでのやる気が出ない』について。やる気の出し方を元落ちこぼれが真剣に考えます。
アニメを観ていると時々登場人物のセリフや行動にハッとさせられることってありますよね。今日はそんなアニメ"日常"の1節『やるまでのやる気が出ない』について考えます。※"日常"は3人の女...

京大受験の合格体験記と感想。ブログで初めて話します。苦しかった。
2月25日から始まる国公立大学入試・二次試験まであと2週間になりました。僕は過去に浪人して京都大学を受験しています。その時の経験をもとに今日は「京大受験の感想」をレポートします。受験テクニック的な内容...

関連記事

  1. ノウハウ

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

    今日は僕の現在の記事作成手順についてレポートします。記事自体の…

  2. レポート

    ニートが書いてるブログ、3ヶ月目のアクセス数など。

    昨日でこのブログを公開してから3ヶ月が経過しました。今日はこの3ヶ…

  3. ノウハウ

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

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

  4. テクニカル

    簡単!ブログカードリンクを作るオススメの方法。ワードプレスプラグイン「Pz-LinkCard」の使い…

    ブログカードやカードリンクと呼ばれるカード形式の記事紹介リンクを作るこ…

読まれている記事

最近の記事

ご注文はブログですか?

  1. 落ちこぼれ人生

    落ちこぼれブログ記事まとめ。学年最下位↗︎京大↘︎ニートまで。
  2. コラム

    落ちこぼれから挽回して大学受験で逆転するために。生徒・保護者への提案。
  3. 勉強効率化

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

    ブロガー歴3ヶ月、僕の記事作成手順。ブログの書き方をくどくどと紹介します。
  5. 塾関係

    京大塾講師が教える個別指導塾の効果的な利用方法6つ
PAGE TOP