Webサイトのパフォーマンス向上に不可欠なWebP画像。しかし、既存のJPGやPNG画像をまとめて変換するのは手間がかかりますよね？この記事では、PHPを使って、JPG/PNG画像をWebPに変換し、さらにドラッグ＆ドロップで手軽にアップロードできるツールを構築する方法を、コピペで使えるコードと共に徹底解説します。
画像最適化に悩むWebエンジニア、デザイナー、ブロガーの皆さん、必見です！
なぜ今、WebPなのか？
WebPはGoogleが開発した画像フォーマットで、従来のJPGやPNGに比べて、同等またはそれ以上の画質で圧倒的にファイルサイズを小さくできるという特徴があります。これにより、Webページの読み込み速度が大幅に向上し、ユーザーエクスペリエンスの改善、SEO評価の向上、サーバーの帯域幅削減といった多岐にわたるメリットが得られます。- ファイルサイズの削減: JPGに比べて約25-34%、PNGに比べて約26%のファイルサイズ削減が期待できます。
- 透過とアニメーション対応: PNGのような透過（アルファチャネル）やGIFのようなアニメーションにも対応しています。
- 主要ブラウザのサポート: 現在、主要なほとんどのモダンブラウザ（Chrome, Firefox, Edge, Safariなど）がWebPをサポートしています。
開発環境の準備
このツールを動作させるために必要なものは以下の通りです。- PHPが動作するWebサーバー: Apache, Nginxなど。
- PHP GDライブラリ: 特にWebPを扱うためには、PHPのGDライブラリがWebPサポート付きでコンパイルされている必要があります。
PHP GDライブラリの確認と有効化
GDライブラリが有効かどうか、WebPがサポートされているかを確認するには、簡単なPHPファイルでphpinfo()を実行するのが手っ取り早いです。info.php
<?php phpinfo(); ?>
このファイルをサーバーに置いてブラウザでアクセスし、「GD」セクションを探してください。「WebP Support」が「enabled」になっていればOKです。もし無効になっている場合は、php.iniファイルを編集してGD拡張を有効にし、WebPサポートを追加する必要があります。
php.iniの例
;extension=gd <-- セミコロンを外して有効化
extension=gd
;GDライブラリがWebPをサポートするように設定 (PHPのバージョンや環境により不要な場合もあり)
; 通常はgd有効化でWebPも自動で有効になります。
変更後、Webサーバーを再起動することを忘れないでください。
コピペでOK！オールインワンコード
それでは、早速メインのコードをご紹介します。このコードは単一の.phpファイルとして動作し、HTML、CSS、JavaScript、そしてPHPのバックエンド処理がすべて含まれています。-
index.phpファイルを作成
以下のリンク先のコードをコピーし、index.phpという名前で保存してください。