Bạn có thể chia mã đánh dấu Hình ảnh thích ứng thành 2 trường hợp: trường hợp mục tiêu là hình ảnh hiệu quả nhất có thể và trường hợp bạn cần kiểm soát rõ ràng nguồn hình ảnh mà trình duyệt chọn. Bạn có thể coi những cú pháp này lần lượt là cú pháp mô tả và quy tắc.
Trong học phần này, bạn sẽ tìm hiểu cả hai phương pháp. Trước tiên, chúng tôi sẽ đề cập đến srcset và sizes, cũng như cách giúp trình duyệt đưa ra lựa chọn tốt nhất dựa trên những gì trình duyệt biết về người dùng, thiết bị và tình trạng duyệt web của họ. Sau đó, bạn sẽ khám phá phần tử <picture> cho phép kiểm soát rõ ràng việc lựa chọn nguồn dựa trên các yếu tố như kích thước khung nhìn và khả năng trình duyệt hỗ trợ các định dạng hình ảnh.
Cú pháp mô tả
Cú pháp mô tả cung cấp cho trình duyệt thông tin về nguồn hình ảnh và cách sử dụng các nguồn hình ảnh đó, nhưng cuối cùng, trình duyệt vẫn là người đưa ra quyết định. Đây là trường hợp phổ biến hơn; đối với phần lớn hình ảnh, bạn không muốn kiểm soát chi tiết hành vi của trình duyệt. Các trình duyệt có nhiều thông tin hơn nhiều so với nhà phát triển web và có thể đưa ra các quyết định phức tạp dựa trên thông tin này. Bạn không thể dự đoán chính xác ngữ cảnh duyệt web của người dùng – có quá nhiều thông tin về phần cứng, lựa chọn ưu tiên và tốc độ kết nối của họ mà bạn không thể biết được. Tốt nhất là bạn có thể đưa ra phán đoán có cơ sở, nhưng không thể biết được cách mỗi người dùng trải nghiệm web để biết một số. Từ góc độ của nhà phát triển, trường hợp sử dụng tập trung cho hình ảnh thích ứng hoàn toàn tập trung vào mục tiêu: cho phép các trình duyệt thực hiện các yêu cầu hình ảnh hiệu quả nhất có thể, dựa trên thông tin mà trình duyệt có sẵn.
Để cho phép các trình duyệt thực hiện các lựa chọn này, srcset cho phép bạn cung cấp cho trình duyệt danh sách các nguồn tiềm năng để điền một <img>, còn sizes cho phép bạn cung cấp cho trình duyệt thông tin về cách hiển thị <img> đó. Bạn sẽ tìm hiểu cách sử dụng các giá trị này trong mô-đun tiếp theo.
Cú pháp quy tắc
Với cú pháp quy định, bạn sẽ cho trình duyệt biết phải làm gì—cần chọn nguồn gì, dựa trên tiêu chí cụ thể mà bạn đã xác định. Mặc dù trường hợp sử dụng này không phổ biến đến mức "chỉ tải tài sản hiệu quả nhất để hiển thị hình ảnh này", nhưng trường hợp sử dụng này cho phép chúng tôi cung cấp hướng dẫn sử dụng cho trình duyệt để tính đến thông tin không có trước khi chuyển tài sản, chẳng hạn như nội dung của nguồn hoặc định dạng của chúng.
Mặc dù srcset và sizes cung cấp cho bạn cú pháp để chuyển thông tin đến trình duyệt của người dùng và cho phép trình duyệt đưa ra quyết định về nguồn hình ảnh, nhưng đôi khi bạn sẽ cần kiểm soát rõ ràng tệp nguồn nào sẽ xuất hiện và thời điểm xuất hiện. Ví dụ: bạn có thể muốn hiển thị các phiên bản của cùng một nội dung hình ảnh với nhiều tỷ lệ khung hình, dựa trên các phương thức thiết kế khác nhau trên các điểm ngắt bố cục, hoặc đảm bảo chỉ những trình duyệt hỗ trợ một phương thức mã hoá cụ thể mới nhận được các nguồn cụ thể.
Trong những trường hợp này, bạn muốn có quyền kiểm soát rõ ràng đối với nguồn và thời điểm xuất hiện. Đây là những thông tin đảm bảo mà srcset và sizes không thể cung cấp cho chúng tôi,
theo thiết kế. Để có được quyền điều khiển đó, chúng ta cần sử dụng phần tử <picture>.