指定サイズの画像に対応するシステム

Question

面白い機能を見つけまして、仕組みがどうなってるのか皆目見当がつかず質問させて頂きます。

###画像生成機能を知りたいです
以下はApplemusicのsrcですが、最後のサイズの部分を如何様にしましても正しくそのサイズの画像を表示することができるのです。

☟100x100
https://is5-ssl.mzstatic.com/image/thumb/Music7/v4/d8/fd/1e/d8fd1e71-ee8d-526b-52a3-bcf215228975/886445328530.jpg/100x100bb.jpeg

☟200x200
https://is5-ssl.mzstatic.com/image/thumb/Music7/v4/d8/fd/1e/d8fd1e71-ee8d-526b-52a3-bcf215228975/886445328530.jpg/200x200bb.jpeg

上記のように100や200だけでなく1でも904でも2020でもいけます。
このような機能にお目にかかったことがないのですが、どうやっていると思いますか？

###この機能について想像した流れ
自分で想像できるのは

データベースには大きなサイズの画像があり
↓
指定サイズにアクセスされたら
↓
PHPのimagecopyresampledなどでリサイズし
（またはJavaScriptでCANVASに描画し）
↓
HTMLに出力

という流れです。

ところがこの流れでは常に大きなサイズの画像の読み込み速度が必要です。
上記srcについて100と5000で試すと読み込み速度が異なりますので、別の流れでやっているのかと思いますが、でもどうやって？？という感じです。

まさかすべてのサイズをあらかじめデータベースに保存しているとは思えませんし。

こういう流れだと思うよー、といった何か思い当たるフシありますでしょうか？

Answer 1

m.ts10806 さんの回答に補足します。

HTTP通信ボディ部分は、サーバーサイドでバイナリファイルをリサイズしたものを応答しています。

---

現在は、サーバー側言語で画像処理するライブラリ等が充実していますが、Perl時代にはImageMagick というコマンドを活用する方法が流行りました。

当時はナローバンドでしたので、画像サイズやファイルサイズを知らない一般利用者のために、画像アップロード直後にリサイズして保存するなどの方法で通信の遅延につながる画像サイズの圧縮を行っていました（レンタルサーバーのクォータで割り当てられるスペースの都合もあり、小さいサイズで保存した）。

ブロードバンドでも 4G/5G が注目される現在、同種の画像処理を、リクエスト毎に行っているのだと思います（大きめの画像を保存しておき、必要サイズに圧縮したものを応答する）。

面白い機能

実装方法は「古典」ですし、実用上の問題解決のために誕生したものですが、別の目的（指定サイズの画像を得る）で応用されているようですね。

追記）

自分で想像できるのは

そんな感じです。

「リクエストごとにリサイズして応答」が基本でしょうが、キャッシュ制御を行い、同じブラウザから要求された「同じサイズ指定の同じ画像」はブラウザのキャッシュから読ませるケースも思いつきます。
（キャッシュについては、開発者コンソールのNetworkタブで disabled cache のチェックを外して確認してみてください）。

Comments

[Panasonic]

キャッシュなど実用面でのご指導参考になりましたためベストアンサーにさせて頂きました。ありがとうございました。

Answer 2

hoge.jpg
という大きい画像ファイルを用意しておきます。

最初にhoge_100x100.jpg
というurlにアクセスがあったら100x100に加工して保存し、レスポンスで返します。
レスポンスで返さずリダイレクトしてもよいです。

次にhoge_100x100.jpg
にアクセスが来たら先ほど保存しているのでそのままレスポンスで返されます。

加工して保存したファイルが溜まるのが嫌だなーという場合はcron等で定期的に削除します。

Comments

[Panasonic]

cronでの削除も一案ですね。ありがとうございます。

Answer 3

URLパラメータをリクエストとして受け取り表示サイズとして利用しているだけかと思います。
画像を「出力」するだけならHTMLは必要ありません。

レスポンスヘッダーのContent-Typeをそのファイルにあわせるだけです。

ファイルダウンロードの仕組みも同じです。
出力をどう扱うかをレスポンスヘッダーで決めます。
なので、出力内容自体は文字列でHTML文字列であってもレスポンスヘッダー変えれば別のものとしてブラウザに認識させられます(正しく出力できるかは別)

Comments

[Panasonic]

ありがとうございます。レスポンスヘッダーについてググってみましたがいまいち本件への応用を考えられません。もう少し教えていただけないでしょうか。

まず以下HTMLをcodepenやjsfiddleに書くとそれぞれ別のサイズが出力されますが、Applemusic側でレスポンスヘッダーを指定することでそのような出力ができるということですよね。

<img src="https://is4-ssl.mzstatic.com/image/thumb/Features113/v4/f3/b6/08/f3b60846-68ac-8437-b92c-c87ebac3fb3c/source/20x20cc.jpg">

<img src="https://is4-ssl.mzstatic.com/image/thumb/Features113/v4/f3/b6/08/f3b60846-68ac-8437-b92c-c87ebac3fb3c/source/200x200cc.jpg">

さてそのレスポンスヘッダーのうち適切そうなものは「image/jpeg」かと思い、実際のPHPファイルを想定してみたのですが、

<?php
header('Content-type: image/jpeg');
echo 'ここに何を書けば、上記のimgタグが各サイズで出力できることになるのでしょうか？';

ということついて、お手数ですが今一度教えていただけないでしょうか。

仮に以下ならば、結局データベースにはすべてのサイズが保存されているということになるかと思いますが、あまりに不自然に思うのです。

<?php
header('Content-type: image/jpeg');
$path = $_SERVER['REQUEST_URI'];
echo "<img src='http://is4-ssl.mzstatic.com...{$path}'>";

[m.ts10806]

echoはファイルそのものを出力できませんし、imgはHTMLです。
「PHP　画像　出力」で調べたら幾らでも出てきます。
https://qiita.com/tokutoku393/items/66c9916e47cab2a01167

初めは image.php?name=hoge.jpg&width=100&height=100
くらいから試してみては如何でしょう。

[Panasonic]

ありがとうございます。よく調べてみます。

[m.ts10806]

調べた結果どうだったかフィードバック欲しかったですが、ないまま終わり(解決済み)ですか。。。

[Panasonic]

今回の質問は変換方法ですが、あなたのご回答は出力方法ですよね。出力方法はまた時間があるときに調べてみようとは思いますが。。