03-5211-7750 平日|09:30~18:00

CDN x 自動画像変換=最速!DuraSite-Edge ImageBoostがWebサイトにもたらす恩恵

           

サービス資料や
ホワイトペーパーはこちら

           資料を【無料】ダウンロードFREE

DuraSite-Edgeに自動画像変換機能[ImageBoost]が追加

アクセリアのCDNサービスであるDuraSite-Edgeにて、[ImageBoost機能]がリリースされました。

ImageBoostは、画像コンテンツを自動でwebp形式に変換するサービスです。

変換対象は、jpg、png、gif(gitアニメーションは除く)となっております。

オリジンサーバ側で画像のwebp化対応を行いたいが方法がわからない、または手軽にwebp化したいといったご要望にお応えできる機能になっております。

設定方法は非常にシンプルで、DuraSite-Edgeの管理画面からImageBoost機能のスイッチをONにするだけで利用ができます。

【相談無料】CDNの導入やWebサイトのお悩みについて、こちらからご相談いただけます ✉️

ImageBoostの動作検証

構成


アクセリアのDuraSite-Edgeを経由する構成であればImageBoostが利用可能です。


設定画面


DuraSite-Edgeの管理画面にログインし、ImageBoostを有効化したいFQDNに移動します。

FQDN設定項目に移動するとImageBoostのOFF/ONの切り替えスイッチがあります。

この項目をONにして登録するだけで設定は完了です。


オリジンサーバ用意


オリジンサーバに下記のHTMLを用意してjpg、png、gifの画像を表示できるようにします。

※画像は各々でご用意ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>test image boot</title>
<style>
ul {
display: flex;
}
li {
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>
<h3>png</h3>
<img src="image.png" width="300" height="300">
</li>
<li>
<h3>jpg</h3>
<img src="image.jpg" width="300" height="300">
</li>
<li>
<h3>gif</h3>
<img src="image.gif" width="300" height="300">
</li>
</ul>
</body>
</html>

ブラウザから確認すると下記のように見えます。

開発者ツールで確認すると、それぞれの形式で読み込まれていることが確認できます。


動作検証


それではImageBoostを有効にして確認をします。
※システムに反映されるまで時間がかかる場合があります。

ブラウザから確認すると下記のように見えます。特に見え方に差異はありません。

開発者ツールで確認すると下記のようになっていました。

jpg、png、gifがwebpになったことが確認できました。
ファイルサイズも小さくなり、画像の表示速度が向上していることがわかります。


またcurlコマンドで複数回アクセスした際のレスポンスタイム結果を下記にまとめてみました。
※全てキャッシュが存在する状態で計測を行っています。
curl -vk -s -w "Total Time: %{time_total}n"
https://xxx.xxxxx.xxx/image.jpg --http2 -o /dev/null




webpがとても優秀なことはもちろんなのですが、ボタン一つでサイト全体にこの機能が使用できるのは非常に便利な機能だと感じています。

ImageBoost除外設定


ImageBoostは基本的にすべての対象ファイルを変換しますが、特定の画像ファイルには変換を実施したくない場合もあるかもしれません。

その場合、レスポンスヘッダに「Cache-Control: no-transform」を設定することでImageBoostによる変換を回避できます。

nginxをお使いの場合は、以下のように指定します。
※*.jpgに該当するファイル名に対して、レスポンスヘッダに「Cache-Control: no-transform」を設定しています。
        location ~* .*.jpg {
add_header Cache-Control "no-transform";
}

ブラウザからアクセスして開発者ツールで確認していきます。


jpgのみImageBoostが効いてないことが確認できました。

すでにCache-Controlに値が含まれている場合もあると思いますが、その場合にはno-transformを追加していただければ問題ありません。
        location ~* .*.jpg {
add_header Cache-Control "max-age=30, no-transform";
}



これにより対象のコンテンツにはImageBoostが実施されなかったことが確認できました。

CDNとの組み合わせ


ImageBoostは、CDN(キャッシュ)との組み合わせとなり、画像変換機能だけでなく下記のような利点も合わせて受けることができます。

これにより安定したコンテンツ配信+高速な画像コンテンツの配信が実現できます。

制限


ImageBoostにはファイルサイズ制限があり、1つの画像ファイルにつき5MBが上限となりますのでご注意ください。

5MBを超える画像ファイルは変換が行われませんので、そのようなファイルがある場合は5MB未満に変換をお願いいたします。

最後に

簡単ではありますがImageBoostの検証をしました。

シンプルな機能のため多くは書けませんでしたが、設定が簡単で導入しやすい機能になっています。
画像変換は運用に手間がかかる作業ですので、こちらの機能を活用していただくことで、以下のメリットがあります。

運用の手間を削減
ユーザへのコンテンツ提供を迅速化

アクセリア自社CDNの開発と運用は、20年以上にわたります。
DuraSite-Edgeはそれらの経験とノウハウを駆使したプロフェッショナルサポートをパッケージしたサービスとなっております。
移行支援によるスムーズな導入とともに、お客様の運用負担を最小限に​とどめながら、WEBサイトのパフォーマンスを最大限に高めます。運用サポートはフルアウトソーシングからミニマムサポートまで、ご要望に合わせてご提供します。

DuraSite-Edgeの導入や運用について、またそれ以外のことでもなにか気になることがございましたらお気軽にご相談下さい。

【ご相談は無料です】お気軽にご相談ください✉️

杉木 俊文

アクセリア株式会社 サービス事業本部プラットフォーム部
Contact usお問い合わせ

サービスにご興味をお持ちの方は
お気軽にお問い合わせください。

Webからお問い合わせ

お問い合わせ

お電話からお問い合わせ

03-5211-7750

平日09:30 〜 18:00

Download資料ダウンロード

製品紹介やお役立ち資料を無料でご活用いただけます。

Magazineメルマガ登録

最新の製品情報などタイムリーな情報を配信しています。

Free Service

PageSpeed Insights シミュレータ

CDNによるコンテンツの最適化を行った場合のPageSpeed Insightsのスコアをシミュレートしてレポートします。