ちょうど去年の今頃に「ブログの画像サイズについて」1記事書いたのですが、当時の僕はライブドアブログ。
ライブドアブログは容量実質無制限ですが、読者さんの読み込み速度の改善という意味で軽量化を施していました。
今はWordPressを使用しているので自分の容量状況が変わったためここ最近見直す事にしました。
画像容量を削減するためには「リサイズ」「トリミング」「圧縮」なのですが、特に「圧縮」に関しては今までかけていませんでした。
なんか嫌じゃないですか？圧縮。めちゃくちゃ画質落ちそうじゃないですか。
というわけで私がこのブログに貼り付ける場合は「トリミング」→「リサイズ」をかけて上手く削減していたのですが、最近限界を感じるように。
限界といいますか、今までのイメージだと「長辺が1200ピクセル」「容量は～500KB目安」だったのですが、高画素・画質カメラを使用していると「1MB」を超えていく状態が増えてきたんですよね。
せっかく高画質カメラを使っているわけだし、更にリサイズやトリミング…する？？
それとも諦めて容量大きくても無視する・・・？？
と色々考えたのですがしっかり実験をして圧縮をかけていこうかと実験を始めました。
そもそも画像容量を削減のメリットとは？？
なんでこんなに画像サイズを小さくしようとするのかここで説明をしたいと思います。
画像容量を小さくすることのメリットは3つ。
- 読み込み速度の速さ
高画素！高画質！綺麗で大きい写真！は当然ながら容量が大きいです
私の場合ですがiPhone12Proで撮影した写真は5MB、一眼レフ(EOS90D)は10MBが平均サイズです
私のブログでは平均10枚程度の画像を使用しているのですが、容量を削減しないでそのまま使用した場合一眼レフなら100MBを超えるわけですね
100MBをこのブログで記事を開いたら結構な時間待つことになります
正確に言えばサムネイル表示されるはずなのでもう少し小さくはなりますが、それだとしてもページを閲覧する人の待ち時間が増えるのは必至です
容量を小さく軽くすればそのままダウンロード速度が速くなるので、超高画質より読みやすさを優先するのはブログやサイトとしては大事な一つだと思います
記事を一つ読むのに読み込み速度が長い＝離脱率の増加につながるので - サーバー容量の削減
私みたいにレンタルサーバーを使用してサイト作成している場合容量は有限です。レンタルブログサービスでもここは同じ
もちろん更に課金したり有料プランを契約すれば実質無限！ですが現実的では無いですよね。画像サイズを減らすことによって容量を即使い切るという事が無くなります
例えばリサイズだけでも10分の1程度までサイズを落とすことができるので使い切る速度は10倍レベルで違うとも言い換える事ができます - SEO対策などの最適化
先ほどの「画像読み込み速度」は「SEO」という「検索エンジン最適化」に繋がります
すっごい雑に言えば「Googleにオススメされる確率が上がる」という物です
この検索エンジン最適化がされていない場合は「Google検索にかけても自分のページが出て来ない」わけですね
このSEO対策に重要な指標の一つが「ページの読み込み速度」先ほどの大型の画像がいっぱいあるサイトは当然読み込み速度が遅くSEO的に不利な場合が多いです
しかし絶対に大きい画像を使うとSEOが不利なのではなく、内容によって適切な画像が使われている場合SEO対策としてはマイナスにはならないようです
このSEO対策部分は画像容量低下のオマケ部分程度に考えると良いと思います
さてメリットはこんな感じですが、当然小さくするわけですのでデメリットは「画質の劣化」です。
ここ本当に難しいですし、拒否反応が出てしまう人が多いと思うんですよね…。
でも画質の劣化に関してはそこまで物凄く神経質に考えるものでは無かったりします。
どうです？？この写真汚く見えますかね？？
多分「汚い！！低画質！」なんて思う人は少ないと思うんですよね。
ちなみにこの画像はリサイズして「約200KB」
元の画像は「約3MB(3000KB)」あります。低画質には一応なっているのですが、さほど感じないと思います。
ちなみに大きさは先ほどの画像の4分の1サイズ、画像の容量は「72KB」です
流石にここまで縮小すると画質の劣化は否めませんが、ギリギリのポイントを見つける事で
「少しの画質の劣化で大きく容量を削減する事ができる」わけですね。
ひと手間ありますが画像の削減化はメリット部分が大きいです。
このリサイズ(縮小化)について細かい比較等は先ほど紹介した過去記事をご覧ください
今回お話したいのは「圧縮・品質」について
さて、要するに大きい画像は「縮小」したら大分容量が小さくなるよ！
という事なんですが、「高画質すぎるデータは縮小しても思った以上に小さくならなくなってきた」
という事が私の最近の悩みでした。
画質は大きく劣化させず、更に圧縮させる方法を模索し始めた…と言うのが今日の本題です。
「Photoshop/illustrator」や「GIMP」など色々画像編集ソフト等がありますが、大体のソフトは「編集後」→「エクスポート」をするのが基本になります。
この「エクスポート(保存)」時には大体のソフトに「圧縮・品質」等があるんですね。
今までは「100~98」等の高品質で保存していたのですが、ここを上手く調整すれば良いのではないか…？と考え始めたわけです。
まずは先ほどの「縮小」の状況を振り返りながら圧縮を試してみましょう！
画像サイズは6960×4640 解像度は72dpi この時点での容量は9.85MB
サイズは1200×800まで。それ以外の編集は無しです。これによって容量は1.04MBにまで軽量化できました
さて、この画像は9MB→1MBとかなり軽量化ができました。
しかし、1MBの画像を10枚使えば10MB。50枚使えば50MB。
こんなに使うかは別ですがw
速度制限がかかっているスマートフォンなんかで閲覧する場合は画像表示までに少し時間がかかるレベルの容量ですね。
と、いうわけでここからは「圧縮」をかけていきましょう。
条件は単純です。
先ほどのリサイズした画像をエクスポートするときに品質を変えて保存していくだけです。
ここからは比較しやすいように「1200×800」サイズでの品質毎に。
横にはその画像を「400×400サイズ」にトリミング(切り取り)した写真も並べていきます。
さて、どうです？？画質の違いが分かった人がいるでしょうか？？
流石に品質70では少し粗が目立ちますが、85品質程度までは許容範囲のような気がします。
少し枚数が多いので表で見てみましょう。
| 保存時の画像品質 | 100 | 95 | 90 | 85 | 70 |
| データ容量 | 1.04MB | 444KB | 318KB | 259KB | 181KB |
どうです？？品質85での保存をすれば「約1MB」が「約250KB」にまで軽量化する事ができます。
大体約4分の1、品質100の写真1枚と品質85の写真4枚と同じですね。
最初の未編集状態「約9MB」から「約250KB」で考えるなら9MBの3％の容量にまで落とすことができました。
250KBの画像なら「超軽量」というわけでは無いにしろ、軽い画像の部類になると思います。
10枚画像を使用しても2.5MBですから。私のように画像を多く使う人にとっては大分大きいです。
圧縮の数値を下げていけば下げていくほどデータ容量は下がっていくのですが、一定以下の品質ではあまり費用対効果が高くありません。
※画像の色や条件にもよります
画像品質100の「1.04MB(約1065KB)」を100％としたときの％比率を考えると…
画像品質95：42％まで圧縮(58％の削減)
画像品質90：30％まで圧縮(70％の削減)
画像品質85：25％まで圧縮(75％の削減)
画像品質70：17％まで圧縮(83％の削減)
圧縮をかければかけるほど一応容量は下がりますが、削減効果は減っていきます。
大まかに考えるならとりあえず
「高画質を極力維持したい」なら「100～95」
「ある程度画質を維持した上で軽量化」なら「85～80」あたりのバランスがよさそうです。
画像のデータ品質や色数、精細さによっては多少上下しますが、とりあえずこれらが基本と考えても問題がなさそうです。
圧縮効果は状況をみながら選択！効果的に使えばかなり有用！
リサイズ画像の時と同じく状況次第ではかなりの軽量化を施すことができます。
何でもかんでも軽量化！！というわけでは無く、しっかりと見せたい場合はある程度の容量増加を犠牲にすべきだと思います。
例えばですが…「これが今回購入した商品です！！」みたいなレビュー記事なのに、こんな写真だと微妙です。
小さな文字に至っては潰れて読むのが厳しいです。しかし容量は50KB！軽い！！
50KBというかなりの軽さを誇りますが、逆に言えば「250KB」使ってしっかり見せたい写真を魅せるほうが重要だったりします。
SEO対策面では確かに「軽量化」というのは大きな点ではあるのでしょうが、それは記事の内容によると思いますね。
当然ながら「なんとなくの写真」を魅せたい時はゴリゴリとサイズや品質を削っていき、軽量化をしていくなどの適材適所で使用していくのが良いですね。
さて、最後に私がWordPressなどの画像サイトでオススメする「軽量かつ画質」を共存させられる設定を書いて今日はお別れです(/・ω・)/
個人的にブログやサイトなどで「しっかり写真を見せたい場合」としての設定なのでここを中心に調整すると良いと思います。
高画質を目指さず、とにかく「表示の速さ」や「軽量化」を目指す場合はこの限りではありません。
私の場合は「GIMP」と呼ばれる画像編集ソフトを使用していますが、他の編集ソフトでも基本は変わらないはずです。
- 画像サイズ：長辺1200ピクセルまで
1000ピクセルを切ると画質が劣化していきます - エクスポート品質：jpeg画像は「85～80」
これ以下の圧縮は「画質と軽量化」のコストパフォーマンスが悪い場合が多いです。
コメント