Phần 1

Giới thiệu về một số thẻ hình ảnh

Câu chuyện về thẻ hình ảnh bắt đầu với các lập trình viên làm việc trên “Boston Globe”, gồm Mat Marquis- đồng tác giả về tài liệu kỹ thuật HTML.

Lúc bắt đầu, không ai trong nhóm làm việc trên dự án nghĩ là sẽ tạo ra những thẻ HTML mới. Marquis và các lập trình viên khác chỉ muốn xây dựng một trang web mà nó có thể tải về nhanh hơn trên các thiết bị di động.

Marquis giải thích rằng họ nghĩ họ đã có một giải pháp. “Chúng tôi đã bắt đầu với một hình ảnh trên thiết bị di động và sau đó nâng cao sự chọn lọc lên từ đó. Đó là một hack sử dụng cookie và JavaScript. Nó sẽ làm việc cho đến khoảng một tuần trước khi trang web ra mắt”.

Khoảng thời gian đó, cả Firefox và Chrome đang cập nhật các khả  năng prefetching và các công cụ prefetching hình ảnh đã phá vỡ phương pháp được dùng trên mẫu đầu tiên Globe. Prefetching trình duyệt tạo ra nhiều hơn một vấn đề cho giải pháp Globe chính thức; nó thực sự là vấn đề nan giải của những gì khó khăn vè các hình ảnh đáp ứng.

Khi máy chủ gởi một trang đến trình duyệt của bạn, đầu tiên trình duyệt sẽ tải về tất cả các thẻ HTML trên trang và sau đó phân tích cú pháp của nó. Hoặc là ít nhất đó là những gì đã từng xảy ra. Các trình duyệt Web hiện đại cố gắng tăng tốc độ tải trang web lên bằng cách tải về hình ảnh trước khi phân tích toàn bộ nội dung của trang. Các trình duyệt bắt đầu tải về hình ảnh trước khi biết hình ảnh đó sẽ nằm trong layout của trang hoặc là hình ảnh đó cần có độ lớn bao nhiêu cho phù hợp.

Điều đó vừa là một việc làm vô cùng hữu ích vừa là một việc làm khó khăn giúp cho hình ảnh tải về nhanh chóng hơn. Cũng đồng nghĩa với việc sử dụng JavaScript để điều khiển các hình ảnh có thể thật sự làm chậm trang web của bạn xuống, thậm chí ngay cả khi các đoạn mã JavaScript của bạn đang cố gắng để tải lên các hình ảnh có kích thước nhỏ hơn (bởi vì bạn phải tranh đấu với prefetcher khi tải về 2 hình ảnh ).

Marquis và một bộ phận còn lại các lập trình viên làm việc trên các trang phải bỏ kế hoạch ban đầu để quay lại bản vẽ. “Chúng tôi bắt đầu cố gắng phân tích một số giải pháp mà chúng tôi có thể sử dụng để đi thẳng về phía trước … nhưng không phải điều gì cũng thật sự trở thành hiện thực”. Tuy nhiên, họ bắt đầu đề cập tới vấn đề đó và các lập trình viên khác cũng tham gia vào cuộc hội thoại đó. Họ nhanh chóng biết được rằng không phải một mình họ đấu tranh với các hình ảnh đáp ứng.

Marquis nói rằng “Cho đến thời điểm này, chúng tôi có từ 10 đến 15 lập trình viên nhưng chưa ai nêu ra vấn đề gì để thảo luận.”

Cuối cùng trang Globe đã ra mắt mà không có giải pháp nào để giải quyết. Các thiết bị di động khi đang tải về các hình ảnh vẫn chưa mượt mà.

Giao diện website “Boston Globe” trên các kích thước màn hình điện thoại, tablet và máy tính bàn

Các lập trình viên xuất chúng khác bên ngoài dự án Globe đã bắt đầu cân nhắc các giải pháp gồm có  Paul Irish của Google và Bruce Lawson của Opera. Nhưng không ai có thể đưa ra giải pháp nào có thể giải quyết được tất cả các trường hợp có thể  sử dụng mà các lập trình viên đã xác định.

Marquis nói rằng “Chúng tôi đã sớm nhận ra điều đó, thậm chí nếu chúng tôi có thể giải quyết nó bằng các đoạn JavaScript khéo léo, chúng tôi đã làm việc với các trình duyệt đã được tối ưu hơn”. Hay có thể nói là, sử dụng JavaScript đồng nghĩa với việc đấu tranh với prefetching các hình ảnh xây dựng của trình duyệt.

Sớm chuyển đến các giải pháp mức thấp gồm cả thẻ HTML mới có thể lấy được các hình ảnh xung quanh các vấn đề prefetching bằng cách không sử dụng JavaScript. Bruce Lawson của Opera là người đầu tiên đề nghị thẻ <picture> mới có thể trong thứ tự. Mặc dù tại thời điểm đó họ không nhận ra, thẻ hình ảnh đã đề xuất một lần trước đó, nhưng nó không bao giờ được sử dụng.

Phần 3

Nguồn bài viết : arstechnica.com