レスポンシブ画像への取り組み – パート 2

<!–

–>

前回の投稿では、レスポンシブ画像と Stitcher を統合する背後にあるアイデアについて書きました。 かなり堅牢なライブラリが登場しました。 任意の画像を投げると、その画像の一連のバリエーションが生成され、複数のデバイス用に縮小されます。 返されたオブジェクトは、Stitcher によってテンプレート変数に解析されました。 テンプレートでは、次のことが可能になりました。

<img src="$image.src" srcset="$image.srcset" sizes="$image.sizes" />

この投稿の代わりにソース コードを読みたい場合は、こちらをご覧ください。

前に書いたように、縮小アルゴリズムの最初のバージョンは画像の幅に基づいていました。 それは機能しましたが、帯域幅の使用を最適化するという実際の問題を解決していませんでした。 本当の解決策は、ファイルサイズに基づいて画像を縮小することでした。 問題は、目的のファイルサイズがわかっている場合に、画像のサイズをどのように知ることができるかということです。 ここで高校数学の出番です。 この「式」を理解するのがどれほど楽しかったか、実際には驚きました。 私は数年間学校に行っていませんでしたが、基本的な数学のスキルを再び使うことができてとてもうれしかったです!

これは私がしたことです：

filesize = 1.000.000
width = 1920
ratio = 9 / 16
height = ratio * width

area = width * height
 <=> area = width * width * ratio

pixelprice = filesize / area
 <=> filesize = pixelprice * area
 <=> filesize = pixelprice * (width * width * ratio)
 <=> width * width * ratio = filesize / pixelprice
 <=> width ^ 2 = (filesize / pixelprice) / ratio
 <=> width = sqrt((filesize / pixelprice) / ratio)

与えられた定数 pixelprice、指定されたファイルサイズを持つために必要な画像の幅を計算できます。 しかし、これが問題です： pixelprice は、この画像の 1 ピクセルのコストの概算です。 これは、すべてのピクセルが同じバイト数に相当するわけではないためです。 どの画像コーデックが使用されているかによって大きく異なります。 しかし、これは現時点で私ができる最善の方法であり、将来さらにロジックを追加する可能性がありますが、しばらくこのアルゴリズムを試してみたいと思います.

そのため、Responsive Factory は幅ではなくファイルサイズで画像を縮小します。 帯域幅の使用量を削減しようとしている場合は、はるかに優れた指標です。 これは、Stitcher でのライブラリの使用方法です。

use Brendt\Image\Config\DefaultConfigurator;
use Brendt\Image\ResponsiveFactory;

$config = new DefaultConfigurator([
    'driver'      => Config::get('engines.image'),
    'publicPath'  => Config::get('directories.public'),
    'sourcePath'  => Config::get('directories.src'),
    'enableCache' => Config::get('caches.image'),
]);

$responsiveFactory = new ResponsiveFactory($config);

Stitcher のすべての画像はこのファクトリを通過し、ファクトリは画像の x 量のバリエーションを生成し、ブラウザはダウンロードするものを決定します。 これはかなりクールで、開発者がプロ​​ジェクトの最も重要な部分に集中できる一方で、ウェブサイトがより最適化された画像を提供するのに役立つことを願っています.