Cách tải hình ảnh trình duyệt nhanh nhất

Việc sử dụng Phần tử hình ảnh cho phép trình duyệt chọn một hình ảnh tối ưu duy nhất để tải xuống và hiển thị trong danh sách có thể bao gồm các loại tệp và kích cỡ khác nhau. Sự hỗ trợ rộng rãi có sẵn cho phần tử hình ảnh cho phép chúng tôi dễ dàng xây dựng các trang hiển thị hình ảnh phản hồi bất khả tri của trình duyệt

Ví dụ cụ thể được trình bày ở đây là một trang web truyện tranh khá chuyên sâu về hình ảnh. Ví dụ sử dụng phần tử ảnh để cung cấp lựa chọn trong số ba loại tệp phổ biến, đó là các định dạng hình ảnh AVIF , WEBP và JPG . Mỗi loại tệp này được trình bày trong một phạm vi năm chiều, do đó cung cấp cho trình duyệt một sự lựa chọn trong số mười lăm hình ảnh riêng biệt. Trình duyệt sẽ chọn mục đầu tiên trong danh sách hình ảnh thỏa mãn các quyết định về khả năng chấp nhận của nó.

Màn hình này hiển thị mã Phần tử hình ảnh <picture> cho một trong các hình ảnh mẫu minh họa. Trong bản trình diễn của chúng tôi, mỗi thành phần hình ảnh được theo sau bởi một dấu phân cách dòng trống như được hiển thị ở đây.

Bên trong phần tử hình ảnh là một danh sách các phần tử nguồn , mỗi phần tử phản ánh một lựa chọn có thể có của một hình ảnh để trình duyệt chọn. Phần tử nguồn là phần tử void , tức là nó không có thẻ đóng, không có thẻ </source>. Thay vào đó, phần tử nguồn hoạt động nhiều hơn để cung cấp liên kết đến tài nguyên được xác định bởi nội dung của thuộc tính srcset , tên tệp hình ảnh.

Trong ví dụ của chúng tôi, mỗi phần tử nguồn cũng có hai thuộc tính bổ sung. Một thuộc tính được gắn nhãn phương tiện và nội dung của nó biểu thị một truy vấn phương tiện cho kích thước khung nhìn phù hợp nhất với hình ảnh được chỉ định srcset . Thuộc tính thứ hai được gắn nhãn loại và nội dung của nó đại diện cho loại MIME của hình ảnh srcset . Nếu một trình duyệt không hỗ trợ một loại MIME cụ thể, mục nguồn đó sẽ bị bỏ qua. Ví dụ: tại thời điểm này, trình duyệt Microsoft Edge không hỗ trợ loại AVIF MIME và trình duyệt đó chỉ cần bỏ qua các lựa chọn tệp AVIF.

Mục cuối cùng trong nội dung của phần tử ảnh là phần tử img được chỉ định trên danh nghĩa là phần tử dự phòng nếu không có hình ảnh nguồn nào được liệt kê là chấp nhận được. Bên cạnh con trỏ thuộc tính src tới tệp hình ảnh, phần tử img này có thuộc tính alt cho văn bản thay thế cho hình ảnh và thuộc tính tabindex cho phép người dùng dễ dàng điều hướng giữa các hình ảnh bằng cách sử dụng phím TAB .

Đối với các số ma thuật được chọn cho kích thước, ban đầu tôi tạo 3 kích thước hình ảnh cho các điểm dừng chiều rộng. Điều đó hoạt động đủ tốt để thúc đẩy việc bổ sung thêm hai kích thước srcset và điều chỉnh lại các điểm dừng và kích thước để có được độ chi tiết cao hơn. Các giá trị này dựa trên các lựa chọn điểm ngắt Bootstrap.

• tên điểm dừng X- Nhỏ Nhỏ Trung bình Lớn X- Lớn XX- Lớn
• điểm ngắt <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
• vùng chứa 100% 540px 720px 960px 1140px 1320px
• kích thước hình ảnh 576px 768px 992px 1200px 1400px

Tuy nhiên, màn hình Gỡ lỗi Chrome của HTML đã tải hiển thị một số khác biệt giữa mã nguồn cho phần tử img được hiển thị ở trên và những gì trình duyệt nhận được được hiển thị ở đây.

Khi trình duyệt quét danh sách các nguồn và chọn một nguồn mà nó cho là tốt nhất, nó sẽ gán giá trị srcset đó cho biến this.currentSrc như được hiển thị trong bản chụp Gỡ lỗi này.

Lưu ý rằng hình ảnh này là hình ảnh mà trình duyệt đã chọn từ danh sách được cung cấp, nó là hình ảnh mà trình duyệt cho là tốt nhất. Cho rằng hình ảnh có kích thước cố định để bao phủ một loạt kích thước khung nhìn, có khả năng hình ảnh có thể không vừa vặn hoàn hảo và một số điều chỉnh có thể hữu ích. Bản trình diễn ví dụ sử dụng JavaScript để chia tỷ lệ hình ảnh do trình duyệt chọn theo kích thước khung nhìn và các giá trị này, tức là kích thước hình ảnh được chia tỷ lệ theo kích thước khung nhìn, được lưu như được hiển thị ở đây. Có một số cách sử dụng khác mà chúng tôi nhận được từ JavaScript

Trên máy tính để bàn này, Trình gỡ lỗi Chrome cho biết truyện tranh minh họa, 42 hình ảnh, sử dụng 2,5 MB tài nguyên với 56 yêu cầu và 2,1 MB được truyền và hoàn thành sau 1,22 giây. Bạn có thể xem demo truyện tranh tại Hyenas2 . Hãy theo dõi kho lưu trữ GitHub của tôi để biết cơ sở mã cho ứng dụng đã tạo ra truyện tranh. Và bạn có thể tìm thêm truyện tranh trên trang truyện tranh của tôi .

Như mọi khi nhận xét, phê bình và đề xuất đều được chào đón