最速資産運用をWebPに対応してみた（たぶん表示が早くなった）｜さくらインターネット

公開日:2020/11/18

[本ページはプロモーションが含まれています]

「最速資産運用」更新状況：

「最速資産運用」運営者より：

　格安マネージドサーバ比較ランキングを更新中、「最速資産運用」で契約中のレンタルサーバ会社がWebPに対応したことを知りました。
www.sakura.ad.jp/information/ann...
【さくらのレンタルサーバ/マネージドサーバ】WebP対応のお知らせ

　WebPについては、Googleが推奨する非常に軽い画像フォーマットという認識はあったのですが、実装するのはまだまだ先かなと考えていました。ただ、最近になって多くのブラウザがWebPに対応したことを受け、すぐに移行できるような心構えだけは持っていました。

　契約中のレンタルサーバ会社がWebPに全面対応したという事実を知った以上、速やかに対応するしかありません。

　以下、備忘メモです。

　下記は、「img」フォルダにある全てのJPEGやPNG等の画像ファイルから、一括してWebPの画像ファイルを作成するPHPスクリプトです。

$dir='./img/';
$f1=array('gif','jpg','jpeg','png');//GIF・JPEG・PNG
foreach($f1 as $extension){
$arys=glob($dir.'*.'.$extension);
if(is_array($arys)){
  foreach($arys as $file){
   $file_webp=$file.'.webp';
   if(!file_exists($file_webp)){
    list($w,$h)=getimagesize($file); //画像の幅と高さを取得
    $img_webp=imagecreatetruecolor($w,$h);
    $img_type=exif_imagetype($file); //
    if($img_type==1){ //GIF
     $img=imagecreatefromgif($file);
    }else if($img_type==2){ //JPEG
     $img=imagecreatefromjpeg($file);
    }else{ //PNG
     $img=imagecreatefrompng($file);
    }
    imagecopyresampled($img_webp,$img,0,0,0,0,$w,$h,$w,$h);
    imagewebp($img_webp,$file_webp,80);
    imagedestroy($img_webp);
    imagedestroy($img);
   }
  }
}
}

　下記ページを参考にしました。

PHP | GDでjpegやPNGファイルをWebPに変換する方法
1-notes.com/php-gd-image-to-webp/

　また、標準ではWebPの画像フォーマットを開くことができなかったので、下記ページを参考にして、Windowsフォトビューワーで開けるようにしました。

WebPをWindows10で普通に見られるようにする
vertys.net/webp-view-on-windows/

　仕上げとして「.htaccess」に下記コードを付加しました。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$
RewriteCond %{DOCUMENT_ROOT}%1%2.webp -f
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1$2\.webp [L,T=image/webp,R]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>

　下記ページを参考にしました。

次世代フォーマット WebP を使ってみよう！
www.ones-quest.co.jp/labo/webp02...

　自分が確認した主要ブラウザでは、うまく表示されていますが、果たして全ての人も同じように表示されているか、結構不安だったりします。とは言え、これで画像の読込速度が速くなるはずなので、「最速資産運用」の表示も快適になるかと思われます（まだ不十分ですが…）。

　なお、WebPへの対応と同時に、画像の遅延表示処理については、JavaScript利用からChrome独自機能へと切り替えました。