【PHP】Webp to Png 変換

Akito Kageyama Akito Kageyama

2020.07.22

こんにちわ!
めっきり暑くなりまして、梅雨明けたの?まだなの?
毎年この時期は「まだ暑くなる」という事実に、無事次の誕生日(11月)を迎えることができるかどうか不安になります。


さて、PHPの個人開発をしたので紹介してみます。


これは皆さんもよくあることだと思います

サンプルイメージとして使いたい画像をインターネットから持ってきていざ使おうと思ったらリンク?ファイルを保存しててパワポやイラレやフォトショに貼り付けられなくてまた画像集めする羽目になった経験。わかります。これの名前ないんですかね。


でももう大丈夫!

完全に解決したので僕もあなたも今週末は優勝です。(4連休)


さてこのリンク?ファイルは「Webp」というファイル形式で、こういうものらしいです。


概要

2010年9月30日に仕様が公表され、各種ツールと共に提供が開始された。

ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。

画像圧縮については動画規格WebMのベースであるVP8ビデオコーデックの技術を利用しており[5]、コンテナ形式としてRIFFを採用している[6]。コンテナの部分を除くと、非可逆のWebPは1フレームのWebMである。

WebPの最大ピクセル数は16383x16383ピクセル。非可逆のサンプリングファクタはYCbCr 4:2:0のみ。

ICCプロファイル、XMPメタデータ、アニメーションには対応したが、CMYKカラーモデルには今[いつ?]のところ対応していない。3D画像には将来対応する予定[7]。

評価

Googleの示した事例では、ファイルサイズは非可逆圧縮モードで(同一画像、同等画質の)JPEGと比較して25-34%小さくなり、可逆圧縮モードでPNGと比較して28%小さくなるとしている。また22%のファイルサイズ増加でアルファチャネルを追加できるとしている。可逆圧縮は、エンコードはPNGよりも時間がかかるが、デコードはPNGよりも高速であると主張している[8]。一方、非可逆圧縮では、2013年10月に行われたMozillaの比較調査で、旧来のJPEGと大して変わらないという結果となった[9]。


「Webp」『フリー百科事典 ウィキペディア日本語版』より。
2020年7月7日 (火) 21:19 UTC URL:https://ja.wikipedia.org/wiki/WebP


よくわかりませんでした。


なんとなくつまり、Googleが開発した新しい画像フォーマットで、画質そのままファイルサイズ小さくなるかもな感じでしょうか。最近多くのブラウザが対応してきたこともあり、目にする機会が増えてきましたよね!


そんなWebpですが、ちゃんと画像ファイルに変換することができるんです。そしてそういうサイトはいくつかあるようです。(英語サイトが多い)

試しにやってみましたが、ちゃんと変換できます。ただ、無料で使える枚数が少なかったり、UIが不便だったり時間がかかったり...ちょっとアレなので、作ってみようか? 大変かなー?どうやるのかなー??



作ってみた!

イメージはこれです。

画像アップロード

① ダウンロードした Webp画像をアップロード(哲学)
② 画像はレンタルサーバーに保存
③ 画像の情報はデータベースに保存
  元ファイル名、保存ファイル名、保存したディレクトリ(パス)、ファイルサイズなどです。


変換処理

あとは次の処理ページで
④ PNGに変換して
⑤ 1枚ならそのままダウンロード
⑥ 2枚以上なら ZIP 圧縮してダウンロード
やったー!


ここで問題が

開発時は Docker を立てていたので必要な機能はインストールしていました。
その時に追加インストールが必要だったので薄々予感はしていたのですが...


作ってみたサーバーが一般的な共用レンタルサーバーなのですが、画像処理ライブラリが Webp に対応していません!

よくあるよくある!


考えた結果

①〜③のアップロードはそのまま元サイトで、④〜⑥の変換処理だけ別のサーバーに実装することにしました。

処理サーバーは VPS に Docker を載せることにします。


さくらインターネットさんのVPSサーバーは初めから Docker Compose が入っている環境を選択できたりとても便利です。

必要なライブラリを書いた Dockerfile でイメージを作って、


$ docker-compose up -d

とか、このあたりは割愛しますね。
もし要望があれば詳しく書きます。


まもなく完成

元ファイル情報はデータベースに保存していました。
サーバーの仕様でデータベースには外部サーバーからアクセスできないので、元サーバーから処理サーバーへは json で情報を渡すことにします。



そうして完成したイメージがこれ!

③.5 もらった情報をもとに、元サーバーに画像ファイルを取りに行って
④ PNGに変換して
⑤ 1枚ならそのままダウンロード
⑥ 2枚以上なら ZIP 圧縮してダウンロード
やったー!




というわけで、Webp を PNG に変換するのを開発してみました!


※ インターネット上のコンテンツを『私的使用のための複製』以外の目的で保存したり使用したりすることは法令に反し刑事罰の対象となることがあります。Webp は法令・社則を守り、正しくお使いください。


この記事のタグ

この記事を書いたスタッフ

すべての記事一覧へ

WORKS

  • オフィシャルサイト リニューアル
  • コーポレートムービー
  • 観光案内冊子『Takasago connects』
  • 『Takasago 1day trip』特設ページ
制作実績一覧へ

ハリマニックス株式会社を知る