
今回は画像のCDN化に特化した「ResizeCDN」というWebサイト支援ツールのレビューだ!
正直CDN(コンテンツ・デリバリーネットワーク)とかよく分からない。
コンテンツを?オリジンサーバー以外の?ネットワーク上(キャッシュサーバ)から配信する?、、、みたいないイメージ。
ようするに画像の表示って大仕事だから、誰か(ResizeCDN)に手伝って貰おうって話だよね。
最強無料ブログサービス”Google Blogger”のサーバーはとても安定しているが、画像が増えるほどページの表示速度は遅くなっていく。
多くのブロガーにとって周知の事実だが、改善が難しい部分でもある。
解決策はざっくり2つ。
画像の品質を落とさない範囲で圧縮する、次世代画像フォーマット”WebP(ウェッピー)”などに乗り換える。
ブログは画像の扱い次第で新世界に突入できる、、、ぴよ。
無料ブログでも綺麗な画像を高速表示したい理由
僕はブログでイラスト素材の配布をしているが、画像の綺麗さやサイズには制約を感じている。それはページ表示にかかる負荷とトレードオフの関係。
画像のデータサイズは、テキスト等とは比べものにならないくらい大きい。これをいかに速く読み込んでページに表示させるか?
ブログで収益化を目指す場合、コンテンツ内でユーザーにアクションを起こして貰うことが最終目的となるが。
この段階で、広告やLP(ランディングページ)画像の読み込みに時間を取られてしまうと大きな機会損失となる。
たった2秒待たせただけで大半のユーザーはページから離脱する、、、というデータが存在する。
訪問したユーザーに対してより多くのページを見てもらえれば、必然的に収益は増えていくのである。
PVの増加に対して収益のUPが望めるアドセンスがいい例だ。
現状、セツナワールドのページ表示速度は安定しているが画像の表示速度に関しては、「PageSpeed Insights」にて減点となるページが多い。
今後もイラスト素材の配布を続けていくなら、この問題の解決策を知っておく必要はある。
ResizeCDNを導入してPNG画像をWebP変換した結果

※こちらの検証ページは諸事情により現在存在しません。
こちらのページの画像容量は合計約1.3MBだったが、「ResizeCDN」を導入した結果、PNG画像がWebP画像に変換され以下のように改善された。
導入前

導入後

・次世代フォーマットでの画像の配信が、3.6s→0.15sに短縮。
・適切なサイズの画像が、1.95s→0.3sに短縮。
この2つの項目の合計で、5s程度も速度(レンダリング)が改善されたことになる。
光回線ではその恩恵をあまり感じないかもしれないが、これが3Gや4G回線となれば体感速度で大きな差が出てくるのは間違いない。
(※追記:ブログ画像の大半をCDN化した結果、低速回線でも劇的にページの表示速度が改善した;;)
CDN側が正常に機能している前提では、ページの表示速度が低下する事は考えにくい。
※ページの画像容量は、1.3MB→約920KBに圧縮された。
ダウンロード利用する画像にWebPを適用しない方法
画像をWebP変換すると確かにページの表示速度は向上する。ただしWebPは画質ではPNGの綺麗さには勝てない。
そこまで都合が良いフォーマットではない。
イラスト素材の場合、WebPで表示しおいてダウンロードはPNG(またはJPEG)ってのが望ましい。
Bloggerで「ResizeCDN」を利用する場合、次のような方法が考えられるので紹介する。
CDN自動変換ツールの使い方(Blogger編)

Bloggerの場合、画像のHTMLは以下のような形式で出力される。なおURLの部分は長すぎるので省略している。

このソースをコピペして、CDN自動変換ツールに貼り付ければ画像がCDN化される。

変換された<picture>タグ内のURLが、Bloggerから”resizecdn.com”に置き換えられているのが分かる。
この場合ページ上ではWebP画像で表示されるが、画像のリンクを開いて保存などする場合はPNG画像となる。
ようするに一般的な方法でCDN化すれば、ダウンロードで保存する画像フォーマットはオリジナルのモノになる。
(※オリジンサーバーの画像が取得される。)
ただし、<div>タグや、<a>タグを含めず<img>タグのみを変換した場合は、ダウンロードした画像もWebPに置き換えられる。
※PHP製のライブラリを組み込んで、一括でCDN化することも可能とのこと。詳しくは公式サイトを確認して欲しい。

ResizeCDN - 画像特化型CDN
日本国内最安最速CDNサービス🐯画像をお手軽に自動変換してサイトを編集する際にリアルタイムでサイズ変更可能💫スゴい💯自動でwebP・AVIF変換を行い🦁自動生成されたHTMLをコピペするだけ🤣1分以内で完結🐝一括も可能
ResizeCDNは有料サービスなんだが、、、
スペースナビ株式会社が提供する「ResizeCDN」は有料サービスである。
固定費なし完全従量課金制(前払いチャージ)で転送量(通信量)に応じて月々の料金が決まる。
公式サイトでオンライン見積もりが出来るのは地味に便利。
例えば、月間10,000pvで1ページ平均の画像容量が1MBだった場合、月々の費用は約72円。
当ブログであれば、月間3,000pv(直近3ヶ月平均)、1ページ平均の画像容量が500KB~1MB程度。この条件では約16円となる。
それは想像していたより遥かに安かった。
アカウント作成で1,000円分の通信料金!?

2021年4月現在、「ResizeCDN 」にアカウント登録することで1,000円分の通信料金がゲット(チャージ)出来る。
僕のブログの規模なら、1,000円あれば余裕で1年位は賄えそうだ。
現在アクセス数や画像が多い記事を選んでCDN化しているが、4日ほど経過しても通信量は1円のまま。

それもそのはず、ResizeCDNのデータ転送料金は8円/1GBとなっている。
1円あたりでは125MBの画像データを転送出来る計算になる。仮に毎日1GB使ったとしても、、、月額240円!?
僕がブログで良く利用する画像(サイズ:800x500px / 容量:100KB前後)だと、ざっくり1万枚ほど転送すれば1GBに到達する計算になる。
それはもう「西遊記」でいうところの天竺への道のりを思わせる。
今後は徐々に画像のCDN化を拡大しながら、コスト(料金)の推移などチェックしてみようと思う。
※通信量のチャージにはクレジットカードが必要。(※デビットカードも可能)
ブログの収益化を目指すなら?
WEBサイトの表示速度は、ユーザーの利便性と直結している事からもSEOにおける重要な要素だと言われている。
_速いに越したことはない。
ページ速度は離脱率や成約率に大きな影響を与える。
画像のCDN化技術は、アクセス数に依存しないマネタイズを実践している場合でも、最小のコストで最大限の利益を生み出す可能性があると言える。