Một trong những mục tiêu chính khi tôi bắt đầu với Stitcher là hình ảnh được tối ưu hóa mạnh mẽ. Nhìn vào số liệu thống kê của Lưu trữ HTTP, rõ ràng là chúng tôi đang làm sai điều gì đó. May mắn thay, thông số hình ảnh Responsive đã được rất nhiều người thông minh tạo ra để giải quyết vấn đề về hình ảnh. Mục tiêu của tôi là triển khai thông số kỹ thuật này trong Stitcher theo cách đủ dễ dàng để các nhà phát triển sử dụng nó ở mức tối đa. Chúng tôi chưa hoàn toàn ở đó, nhưng chúng tôi đã gần đến đích. Trong bài đăng trên blog này, tôi muốn nói về những thách thức tôi gặp phải khi tạo thư viện này. Và nếu bạn thích viết mã hơn là đọc một bài đăng trên blog, bạn hãy bắt đầu.
Nói rõ hơn: mục tiêu của thông số hình ảnh phản hồi là giảm băng thông được sử dụng khi tải xuống hình ảnh. Hình ảnh ngày nay đòi hỏi rất nhiều băng thông. Khi bạn nghĩ về điều đó, thật điên rồ khi tải một hình ảnh rộng 2000 pixel, khi hình ảnh trên màn hình chỉ rộng 500 pixel. Đó là vấn đề về địa chỉ thông số kỹ thuật và đó là vấn đề tôi muốn giải quyết trong Stitcher.
Vì vậy, tôi muốn đưa một hình ảnh vào, số lượng x của cùng một hình ảnh với các kích cỡ khác nhau xuất hiện và để trình duyệt quyết định hình ảnh nào là tốt nhất để tải. Làm cách nào tôi có thể thu nhỏ hình ảnh nguồn đó? Đó là câu hỏi quan trọng nhất tôi muốn được trả lời. Tất cả các vấn đề khác như khả năng truy cập trong các mẫu và cách hiển thị các tệp hình ảnh được tạo ra đều là mối lo ngại của chính Stitcher.
Lần đầu tiên tôi thực hiện thu nhỏ hình ảnh như sau:
Lấy ảnh nguồn và tập hợp các thông số cấu hình. Các tham số này sẽ quyết định số lượng biến thể hình ảnh tối đa và chiều rộng tối thiểu của hình ảnh. Ví dụ. Tôi muốn tối đa mười hình ảnh, với hình ảnh nhỏ nhất có chiều rộng 300 pixel. Bây giờ thuật toán sẽ lặp tối đa 10 lần, luôn tạo ra một hình ảnh có chiều rộng nhỏ hơn 10% so với hình ảnh trước đó.
Bạn có thể đã thấy đây không phải là cách tiếp cận tối ưu. Suy cho cùng: chúng tôi đang cố gắng giảm băng thông được sử dụng khi tải hình ảnh. Không có gì đảm bảo rằng một hình ảnh được thu nhỏ lại 10% cũng sẽ bị giảm kích thước. Phần lớn phụ thuộc vào loại codec hình ảnh nào được sử dụng và nội dung trong hình ảnh. Nhưng bằng cách sớm sử dụng phương pháp này, tôi đã có thể triển khai “nhà máy hình ảnh” này với Stitcher. Tiếp theo, tôi sẽ tối ưu hóa thuật toán, nhưng hiện tại tôi có thể giải quyết vấn đề tích hợp Stitcher.
# Liên kết với Stitcher
Việc cho Stitcher biết về hình ảnh phản hồi vừa dễ vừa khó. Khung cơ bản đã có sẵn. Vì vậy, tôi có thể dễ dàng tạo một nhà cung cấp hình ảnh sử dụng nhà máy đáp ứng và trả về một biểu diễn mảng của hình ảnh. Cú pháp mẫu trông như thế này:
<img src="{$image.src}" srcset="{$image.srcset}" sizes="{$image.sizes}" />Thật không may, không có cách nào để tự động hóa phần kích thước, trừ khi bạn bắt đầu thu thập tất cả CSS và triển khai cơ bản một công cụ trình duyệt bằng PHP. Giải pháp của tôi cho phần này là các bộ kích thước được xác định trước. Tuy nhiên, đó vẫn là một công việc đang được tiến hành, tôi chưa chắc chắn làm thế nào để làm cho nó đủ dễ sử dụng. Hiện tại, tôi chỉ xác định kích thước theo cách thủ công khi viết mã mẫu.
Nhưng phần khó khăn không phải là kích thước, cũng không phải là srcset. Nó đang xử lý các đường dẫn và URL. Tôi đã nhận thấy điều này trong toàn bộ khung công tác Stitcher: việc tạo đường dẫn và URL phù hợp (số lượng dấu gạch chéo chính xác, thư mục gốc chính xác, v.v.) thực sự khá khó khăn để quản lý. Bây giờ tôi tin rằng tôi cần một số loại trợ giúp luôn hiển thị đường dẫn và URL chính xác. Nó nằm trong danh sách việc cần làm của tôi.
Bài viết này thế là xong, tiếp theo tôi sẽ viết về việc tối ưu hóa thuật toán hình ảnh.