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 điển hình có trọng lượng hơn 2, 6 MB và hơn 2/3 trong số đó trọng lượng là hình ảnh. Đó là 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
srcsetđể cho phép trình duyệt chọn đoạn mã nhỏ nhất. Giá trịwcho 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="…">
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 bớt mức độ đói dữ liệu bằng cách sử dụng hình ảnh có phù hợp với kích thước màn hình. Nói cách khác, hãy cung cấp cho hình ảnh chiều rộng và chiều cao khi lưu.
Hãy xem các hình ảnh dưới đây.
Hai tệp này có vẻ gần giống hệt nhau, nhưng kích thước tệp lớn hơn 10 lần lớn hơn đơn vị quảng cáo khác.
Hình ảnh đầu tiên có kích thước tệp lớn hơn nhiều vì được lưu theo kích thước lớn hơn nhiều so với kích thước màn hình. Cả hai hình ảnh được hiển thị với chiều rộng là 300 pixel, vì vậy, sẽ hợp lý để sử dụng hình ảnh được lưu cùng lúc 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.
Các phần tử hình ảnh có thể có chiều rộng phần trăm hoặc là một phần của bố cục thích ứng trong đó kích thước hiển thị hình ảnh thay đổi cho phù hợp với kích thước màn hình.
...còn các thiết bị thiế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 ở nhiều kích thước, sau đó cho phép trình duyệt chọn kích thước phù hợp nhất với thiết bị và kích thước hiển thị? Rất tiếc, có một catch-22 khi nói đến tìm ra hình ảnh nào là tốt nhất. Trình duyệt nên sử dụng mã nhưng không thể biết chiều rộng của hình ảnh mà không tải 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 là 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
tải hình ảnh xuống để kiểm tra kích thước.
Bạn có thể xem cách hoạt động của srcset trong hình ảnh dưới đây. Nếu bạn đang sử 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 của bạn và mở lại trang này.
Sau đó, sử dụng bảng điều khiển Mạng của các công cụ trình duyệt để kiểm tra xem hình ảnh nào đã được sử dụng.
(Bạn cần thực hiện việc đó 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 cần phải cung cấp nhiều kích thước cho mọi hình ảnh mà bạn muốn sử dụng
cùng với srcset.
Đối với những hình ảnh dùng một lần như hình ảnh chính, bạn có thể lưu nhiều kích thước theo cách thủ công. Nếu bạn có nhiều hình ảnh, chẳng hạn như ảnh sản phẩm thì bạn sẽ cần tự động hoá. Để làm được điều đó, có 2 phương pháp.
Kết 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 kích thước khác nhau các phiên bản hình ảnh khác nhau. Xem phần "Sử dụng Imagemin để nén hình ảnh" để tìm hiểu thêm.
Sử dụng dịch vụ hình ảnh
Việc tạo và phân phối hình ảnh có thể được tự động hoá bằng dịch vụ thương mại như Cloudinary hoặc một nguồn mở tương đương, chẳng hạn 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 tự động
tạo và phân phối các định dạng cũng như kích thước hình ảnh khác nhau tuỳ thuộc vào URL
tham số. Ví dụ: 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ư khả năng tự động hoá "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 này, thay vì JPEG—mà không cần thay đổi tệp tiện ích.
Nếu hình ảnh hiển thị không chính xác ở các kích thước khác nhau thì sao?
Trong trường hợp đó, bạn cần sử dụng phần tử <picture> cho "hướng nghệ thuật":
cung cấp hình ảnh hoặc ảnh cắt khác nhau ở các kích thước khác nhau. Để 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 (dày đặc hơn). Ví dụ: một điện thoại cao cấp có thể có số pixel trong mỗi hàng của pixel là 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 không đi vào nội dung đẫm máu chi tiết tại đây, nhưng bạn có thể tìm hiểu thêm từ Lớp học lập trình "Sử dụng mã mô tả mật độ".
Còn kích thước hiển thị của hình ảnh này thì sao?
Bạn có thể sử dụng sizes để giúp srcset hoạt động hiệu quả hơn nữa.
Nếu không có đường dẫn này, trình duyệt sẽ sử dụng toàn bộ chiều rộng của khung nhìn khi chọn
hình ảnh qua srcset. Thuộc tính sizes cho trình duyệt biết chiều rộng mà một
sẽ hiển thị, để trình duyệt có thể chọn phần tử nhỏ nhất có thể
tệp hình ảnh – trước khi thực hiện bất kỳ phép tính 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ẽ
được hiển thị ở 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 simpl.info/sizes và lớp học lập trình "Chỉ định nhiều chiều rộng vùng quảng cáo".
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 giúp srcset và sizes cải tiến tiến bộ tuyệt vời!
Tìm hiểu thêm
Hãy xem phần "Tối ưu hóa hình ảnh của bạn" của web.dev để tìm hiểu sâu hơn về việc tối ưu hoá hình ảnh. Để được hướng dẫn thêm hãy cân nhắc thử trải nghiệm "Ứng dụng Khoá học "Hình ảnh" do Udacity.