Blog

Xử lý hình ảnh phản hồi – phần 2

  • Post category:lập trình


Trong bài viết trước, tôi đã viết về ý tưởng đằng sau việc tích hợp hình ảnh phản hồi và Stitcher. Một thư viện khá mạnh mẽ đã ra đời. Bạn có thể ném vào bất kỳ hình ảnh nào và nó sẽ tạo ra một tập hợp các biến thể của hình ảnh đó, được thu nhỏ lại cho nhiều thiết bị. Nó trả về một đối tượng mà Stitcher đã phân tích cú pháp thành một biến mẫu. Trong các mẫu, bây giờ có thể thực hiện được những điều sau đây.

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

Nếu bạn muốn đọc mã nguồn thay vì bài đăng này, bạn hãy vào đây.

Giống như tôi đã viết trước đó, phiên bản đầu tiên của thuật toán thu nhỏ tỷ lệ dựa trên chiều rộng của hình ảnh. Nó hoạt động nhưng không giải quyết được vấn đề thực tế: tối ưu hóa việc sử dụng băng thông. Giải pháp thực sự là thu nhỏ hình ảnh dựa trên kích thước tệp của chúng. Vấn đề ở đó: làm sao bạn có thể biết kích thước của hình ảnh khi bạn biết kích thước tệp mong muốn. Đây là nơi toán học trung học phát huy tác dụng. Tôi thực sự ngạc nhiên rằng tôi đã thấy thú vị biết bao khi tìm ra “công thức” này. Tôi đã không đến trường được vài năm và tôi khá vui vì có thể sử dụng lại một số kỹ năng toán cơ bản!

Đây là những gì tôi đã làm:

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)

Vì vậy, đưa ra một hằng số pixelprice, Tôi có thể tính chiều rộng cần thiết mà hình ảnh cần có để có kích thước tệp được chỉ định. Đây là điều mặc dù: pixelprice là giá trị gần đúng của một pixel trong hình ảnh này. Đó là bởi vì không phải tất cả các pixel đều có cùng giá trị byte. Nó phụ thuộc rất nhiều vào codec hình ảnh nào được sử dụng. Tuy nhiên, đó là điều tốt nhất tôi có thể làm bây giờ và mặc dù tôi có thể bổ sung thêm một số logic trong tương lai, nhưng tôi muốn thử thuật toán này một thời gian.

Vì vậy, bây giờ Responsive Factory thu nhỏ hình ảnh theo kích thước tệp thay vì chiều rộng. Một thước đo tốt hơn nhiều khi bạn đang cố gắng giảm mức sử dụng băng thông. Đây là cách thư viện được sử dụng trong 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);

Tất cả hình ảnh trong Stitcher đều đi qua nhà máy này, nhà máy sẽ tạo ra số lượng biến thể x của hình ảnh và trình duyệt sẽ quyết định hình ảnh nào sẽ tải xuống. Nó khá thú vị và tôi hy vọng nó sẽ giúp các trang web cung cấp hình ảnh được tối ưu hóa hơn, đồng thời nhà phát triển vẫn có thể tập trung vào những phần quan trọng nhất trong dự án của mình.



Trả lời