Sử dụng srcset để tự động chọn kích thước hình ảnh phù hợp.
Theo HTTP Archive, trang web dành cho thiết bị di động thông thường có dung lượng lớn hơn 2, 6 MB và hơn 2/3 trọng lượng đó là hình ảnh. Đó là một cơ hội tuyệt vời để tối ưu hoá!
Tóm tắt
- Không lưu hình ảnh lớn hơn kích thước hiển thị.
- Lưu nhiều kích thước cho mỗi hình ảnh và sử dụng thuộc tính
srcsetđể cho phép trình duyệt chọn kích thước nhỏ nhất. Giá trịwcho trình duyệt biết chiều rộng của mỗi phiên bản:
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
Lưu hình ảnh có kích thước phù hợp
Bạn có thể tăng tốc độ của trang web và giảm tình trạng đói dữ liệu bằng cách sử dụng hình ảnh có kích thước phù hợp với kích thước hiển thị. Nói cách khác, khi lưu hình ảnh, bạn cần cung cấp cho hình ảnh đúng chiều rộng và chiều cao.
Hãy xem hình ảnh dưới đây.
Các tệp này trông gần giống hệt nhau, nhưng kích thước tệp của một tệp lớn hơn gấp 10 lần so với tệp còn lại.
Hình ảnh đầu tiên có kích thước tệp lớn hơn nhiều vì được lưu với kích thước lớn hơn nhiều so với kích thước hiển thị. Cả hai hình ảnh đều hiển thị với chiều rộng cố định là 300 pixel. Vì vậy, bạn nên sử dụng hình ảnh được lưu có cùng kích thước.
Đối với chiều rộng cố định, hãy sử dụng hình ảnh được lưu có cùng kích thước với kích thước hiển thị.
Nhưng... nếu kích thước hiển thị thay đổi thì sao?
Trong thế giới đa thiết bị, hình ảnh không phải lúc nào cũng được hiển thị ở một kích thước cố định duy nhất.
Các phần tử hình ảnh có thể có chiều rộng theo tỷ lệ phần trăm hoặc thuộc bố cục thích ứng, trong đó kích thước hiển thị hình ảnh thay đổi cho vừa với kích thước màn hình.
...và các thiết bị tốn nhiều pixel như màn hình Retina thì sao?
Giúp trình duyệt chọn kích thước hình ảnh phù hợp
Sẽ không tuyệt vời sao nếu bạn có thể cung cấp mỗi hình ảnh ở các kích thước khác nhau, sau đó cho phép trình duyệt chọn kích thước phù hợp nhất cho thiết bị và kích thước hiển thị? Thật không may, có một catch-22 khi bạn cần xác định hình ảnh nào là tốt nhất. Trình duyệt nên sử dụng hình ảnh nhỏ nhất có thể, nhưng trình duyệt không thể biết chiều rộng của hình ảnh nếu không tải hình ảnh xuống để kiểm tra.
Đây là lúc srcset phát huy tác dụng. Bạn lưu hình ảnh ở nhiều kích thước, sau đó cho trình duyệt biết chiều rộng của từng phiên bản:
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
Giá trị w cho biết chiều rộng của mỗi hình ảnh tính bằng pixel. Ví dụ: small.jpg 500w cho trình duyệt biết rằng small.jpg có chiều rộng 500 pixel. Điều này cho phép trình duyệt chọn hình ảnh nhỏ nhất có thể, tuỳ thuộc vào loại màn hình và kích thước khung nhìn mà không cần phải tải hình ảnh xuống để kiểm tra kích thước của hình ảnh.
Bạn có thể xem srcset trong thực tế cho hình ảnh dưới đây. Nếu bạn đang dùng máy tính xách tay hoặc máy tính để bàn, hãy thay đổi kích thước cửa sổ trình duyệt rồi mở lại trang này.
Sau đó, hãy sử dụng bảng điều khiển Mạng của các công cụ của trình duyệt để kiểm tra xem hình ảnh nào đã được sử dụng.
(Bạn cần làm việc này trong cửa sổ Ẩn danh hoặc Riêng tư, nếu không tệp hình ảnh gốc sẽ được lưu vào bộ nhớ đệm.)
Làm cách nào để tạo nhiều kích thước hình ảnh?
Bạn sẽ cần cung cấp nhiều kích thước cho mọi hình ảnh mà bạn muốn sử dụng với srcset.
Đối với hình ảnh một lần như hình ảnh chính, bạn có thể lưu nhiều kích thước khác nhau theo cách thủ công. Nếu có nhiều hình ảnh, chẳng hạn như ảnh sản phẩm, bạn sẽ cần tự động hoá. Có 2 phương pháp để làm việc đó.
Tích hợp tính năng xử lý hình ảnh vào quy trình xây dựng
Trong quá trình xây dựng, bạn có thể thêm các bước để tạo các phiên bản hình ảnh có kích thước khác nhau. Hãy xem bài viết "Sử dụng Imagemin để nén hình ảnh" để tìm hiểu thêm.
Sử dụng dịch vụ hình ảnh
Bạn có thể tự động tạo và phân phối hình ảnh bằng dịch vụ thương mại như Cloudinary hoặc dịch vụ nguồn mở tương đương như Thumbor mà bạn tự cài đặt và chạy.
Bạn tải hình ảnh có độ phân giải cao lên và dịch vụ hình ảnh sẽ tự động tạo cũng như phân phối nhiều định dạng và kích thước hình ảnh tuỳ thuộc vào tham số URL. Ví dụ: hãy mở hình ảnh mẫu này trên Cloudinary rồi thử thay đổi giá trị w hoặc đuôi tệp trong thanh URL.
Dịch vụ hình ảnh cũng có nhiều tính năng nâng cao hơn như tự động hoá tính năng "cắt thông minh" cho nhiều kích thước hình ảnh và tự động phân phối hình ảnh WebP cho các trình duyệt hỗ trợ định dạng đó (thay vì JPEG) mà không cần thay đổi đuôi tệp.
Điều gì sẽ xảy ra nếu hình ảnh hiển thị không đúng ở nhiều kích thước?
Trong trường hợp đó, bạn cần sử dụng phần tử <picture> cho "hướng hình ảnh": cung cấp một hình ảnh hoặc hình ảnh cắt khác ở nhiều kích thước. Để tìm hiểu thêm, hãy tham khảo lớp học lập trình "Hướng nghệ thuật".
Còn mật độ pixel thì sao?
Các thiết bị cao cấp có pixel vật lý nhỏ hơn (mật độ cao hơn). Ví dụ: một điện thoại cao cấp có thể có số pixel trong mỗi hàng nhiều hơn gấp 2 hoặc 3 lần so với một thiết bị rẻ hơn.
Điều này có thể ảnh hưởng đến kích thước bạn cần lưu hình ảnh. Chúng tôi sẽ không đi sâu vào các chi tiết đẫm máu ở đây, nhưng bạn có thể tìm hiểu thêm trong lớp học lập trình "Sử dụng bộ mô tả mật độ".
Còn kích thước hiển thị của hình ảnh thì sao?
Bạn có thể dùng sizes để giúp srcset hoạt động hiệu quả hơn nữa.
Nếu không, trình duyệt sẽ sử dụng toàn bộ chiều rộng của khung nhìn khi chọn một hình ảnh từ srcset. Thuộc tính sizes cho trình duyệt biết chiều rộng mà một phần tử hình ảnh sẽ hiển thị, nhờ đó, trình duyệt có thể chọn tệp hình ảnh nhỏ nhất có thể trước khi thực hiện bất kỳ tính toán bố cục nào.
Trong ví dụ bên dưới, sizes="50vw" cho trình duyệt biết rằng hình ảnh này sẽ hiển thị trên 50% chiều rộng khung nhìn.
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
Bạn có thể xem ví dụ thực tế tại sext.info/sizes và lớp học lập trình "Chỉ định nhiều chiều rộng vùng".
Hỗ trợ trình duyệt thì sao?
srcset và sizes được hỗ trợ bởi hơn 90% trình duyệt trên toàn cầu.
Nếu trình duyệt không hỗ trợ srcset hoặc sizes thì trình duyệt đó sẽ quay lại chỉ sử dụng thuộc tính src.
Điều này tạo nên các tính năng nâng cao tuyệt vời cho srcset và sizes!
Tìm hiểu thêm
Hãy xem mục "Tối ưu hoá hình ảnh" trên web.dev để tìm hiểu kỹ hơn về tính năng tối ưu hoá hình ảnh. Để có trải nghiệm có hướng dẫn chi tiết hơn, hãy cân nhắc thử khoá học "Hình ảnh thích ứng" miễn phí do Udacity cung cấp.