テクニカル

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

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

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

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

 

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

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. テクニカル

    ワードプレス有料テーマのインストール方法。スクショ付けて説明。|WordPress

    ブログの初心者の僕が初めてこのサイトをセッティングした時の経験に基づい…

  2. テクニカル

    WordPress|ブログ記事ページ内ジャンプのhtmlタグソースコード|ワードプレス

    今日はブログの記事でよく見られる『ページ内ジャンプ』についてレポートし…

  3. ノウハウ

    記事を予約投稿することのメリット。

    今日はブログ更新を休みがちな方の参考にしてほしい記事です。サボり癖…

  4. レポート

    ブログ半年間のアクセス数・PVの推移など公開。6ヶ月目の運営レポート。

    ブログ運営6ヶ月目の運営レポートです。半年間のアクセス数などをまと…

  5. ノウハウ

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

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

  6. テクニカル

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

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

読まれている記事

最近の記事

  1. B.LEAGUE

    Bリーグ・チャンピオンシップファイナル観戦して来ました。
  2. レポート

    ブログのアクセス数5万PV達成とその実情。思い通りにはいかない。ブログの夏。※ブ…
  3. コラム

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

    進学校で落ちこぼれた時の話。部活への逃避と転校の危機、不合格と嫉妬。
  5. 勉強効率化

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