Việc phân phát hình ảnh có kích thước trên máy tính tới thiết bị di động có thể dùng dữ liệu nhiều hơn gấp 2 đến 4 lần so với mức cần thiết. Hãy làm theo các nguyên tắc trên trang này để cải thiện trải nghiệm người dùng bằng cách phân phát nhiều kích thước hình ảnh cho nhiều thiết bị.
Hình ảnh thích ứng và Các chỉ số quan trọng về trang web
Khi bạn phân phát hình ảnh thích ứng, trang của bạn sẽ đánh giá khả năng hiển thị trên thiết bị của người dùng và chọn một trong tập hợp các đề xuất hình ảnh tối ưu để hiển thị dựa trên các tiêu chí đó. Điều này giúp tiết kiệm dữ liệu cho người dùng, chủ yếu bằng cách phân phát các hình ảnh nhỏ hơn đến các thiết bị có màn hình nhỏ hơn.
Ảnh hưởng của việc tải hình ảnh nhanh hơn cũng có thể mở rộng đến Thời gian hiển thị nội dung lớn nhất (LCP) trên trang của bạn. Ví dụ: nếu phần tử LCP của trang là một hình ảnh, thì việc phân phát phần tử đó một cách thích ứng có thể làm giảm thời gian tải tài nguyên.
Việc giảm thời gian tải tài nguyên sẽ làm giảm thời gian tải cho hình ảnh LCP, nhờ đó cải thiện điểm LCP của trang. LCP thấp hơn nghĩa là người dùng sẽ thấy trang web của bạn tải nhanh hơn, đặc biệt là khi tải nội dung quan trọng nhất trên trang web (phần tử LCP) nhanh hơn. Việc phân phát hình ảnh thích ứng cũng có thể giảm tranh chấp băng thông cho các tài nguyên khác trên trang, nhờ đó có thể cải thiện tốc độ tải trang nói chung.
Đổi kích thước hình ảnh
Hai trong số các công cụ đổi kích thước hình ảnh phổ biến nhất là gói npm sắc nét và công cụ ImageMagick CLI.
Gói sắc nét là một lựa chọn tốt để tự động đổi kích thước hình ảnh (ví dụ: tạo nhiều kích thước hình thu nhỏ cho tất cả video trên trang web của bạn). Công cụ này hoạt động nhanh và tích hợp tốt với các công cụ cũng như tập lệnh bản dựng. ImageMagick thuận tiện hơn khi bạn đổi kích thước hình ảnh một lần vì công cụ này chạy hoàn toàn qua dòng lệnh.
sắc nét
Để sử dụng Sharp như một tập lệnh Nút, hãy lưu mã này dưới dạng một tập lệnh riêng trong dự án, sau đó chạy mã này để chuyển đổi hình ảnh của bạn:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
Để đổi kích thước hình ảnh thành 33% kích thước ban đầu, hãy chạy lệnh sau trong dòng lệnh của bạn:
convert -resize 33% flower.jpg flower-small.jpg
Để đổi kích thước hình ảnh cho vừa với không gian rộng 300px x 200px cao, hãy chạy lệnh sau:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
Bạn nên tạo bao nhiêu phiên bản hình ảnh?
Không có một câu trả lời "chính xác" nào cho câu hỏi này. Tuy nhiên, thông thường, bạn sẽ phân phát từ 3 đến 5 kích thước khác nhau của một hình ảnh. Việc phân phát nhiều kích thước hình ảnh hơn sẽ giúp cải thiện hiệu suất, nhưng chiếm nhiều không gian hơn trên máy chủ và yêu cầu bạn phải viết nhiều HTML hơn một chút.
Tuỳ chọn khác
Bạn cũng nên thử các dịch vụ hình ảnh như Thumbor (nguồn mở) và Cloudinary. Cả hai đều là những cách đơn giản để tạo hình ảnh thích ứng cũng cung cấp các thao tác chỉnh sửa hình ảnh theo yêu cầu. Để thiết lập Thumbor, hãy cài đặt Thumbor trên máy chủ của bạn. Cloudinary sẽ xử lý thông tin chi tiết cho bạn và bạn không cần phải thiết lập máy chủ.
Phân phát nhiều phiên bản hình ảnh
Khi bạn chỉ định nhiều phiên bản hình ảnh, trình duyệt sẽ chọn phiên bản phù hợp nhất để sử dụng:
| Trước | Sau |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, hoa-large.jpg 1080w" kích thước="50vw"> |
Các thuộc tính src, srcset và sizes của thẻ <img> đều tương tác để đạt được kết quả cuối cùng này.
Thuộc tính “src”
Thuộc tính src giúp mã này hoạt động được cho các trình duyệt không hỗ trợ các thuộc tính srcset và sizes. Các trình duyệt đó sẽ quay lại tải tài nguyên được chỉ định trong thuộc tính src.
Thuộc tính "srcset"
Thuộc tính srcset là một danh sách tên tệp hình ảnh được phân tách bằng dấu phẩy và mã mô tả chiều rộng hoặc mật độ.
Ví dụ này sử dụng bộ mô tả chiều rộng, cho trình duyệt biết chiều rộng của hình ảnh để trình duyệt không phải tải hình ảnh xuống để tìm hiểu. 480w là chỉ số mô tả chiều rộng cho trình duyệt biết rằng flower-small.jpg rộng 480px. 1080w là chỉ số mô tả chiều rộng cho trình duyệt biết rằng flower-large.jpg rộng 1080px.
Tín dụng bổ sung: Bạn không cần phải biết về bộ mô tả mật độ để phân phát nhiều kích thước hình ảnh. Tuy nhiên, nếu bạn muốn biết cách hoạt động của các chỉ số mô tả mật độ, hãy tham khảo Lớp học lập trình về cách chuyển đổi độ phân giải. Mã mô tả mật độ dùng để phân phát nhiều hình ảnh dựa trên mật độ pixel của thiết bị.
Thuộc tính "kích thước"
Thuộc tính kích thước sẽ cho trình duyệt biết chiều rộng của hình ảnh khi hiển thị, mặc dù thuộc tính này không ảnh hưởng đến kích thước hiển thị của hình ảnh, vì vậy, bạn vẫn cần có CSS để thực hiện điều đó.
Trình duyệt sẽ sử dụng thông tin này cùng với những gì đã biết về thiết bị của người dùng (bao gồm cả kích thước và mật độ pixel) để xác định hình ảnh nào cần tải.
Nếu không nhận ra thuộc tính "sizes", trình duyệt sẽ quay lại tải hình ảnh do thuộc tính "src" chỉ định. (sizes và srcset được ra mắt cùng lúc, vì vậy mọi trình duyệt đều hỗ trợ cả hai thuộc tính hoặc không hỗ trợ thuộc tính nào.)
Tín dụng bổ sung: Nếu muốn quảng cáo đẹp hơn, bạn cũng có thể sử dụng thuộc tính kích thước để chỉ định nhiều kích thước vùng quảng cáo. Điều này phù hợp với các trang web sử dụng bố cục khác nhau cho các kích thước khung nhìn khác nhau. Hãy xem nhiều mã vị trí mẫu này để tìm hiểu cách thực hiện việc này.
(Hơn nữa) Điểm cộng
Ngoài tất cả giá trị đóng góp bổ sung đã được liệt kê (hình ảnh rất phức tạp!), bạn cũng có thể sử dụng các khái niệm tương tự này cho hướng dẫn về hình ảnh. Hướng nghệ thuật là việc phân phát những hình ảnh hoàn toàn khác nhau (thay vì các phiên bản khác nhau của cùng một hình ảnh) cho nhiều khung nhìn. Bạn có thể tìm hiểu thêm trong Lớp học lập trình về chỉ đạo nghệ thuật.
Xác minh
Sau khi triển khai hình ảnh thích ứng, bạn có thể sử dụng Lighthouse để đảm bảo không bỏ lỡ bất kỳ hình ảnh nào. Chạy Bài kiểm tra hiệu suất Lighthouse (Lighthouse > Tuỳ chọn > Hiệu suất) và tìm kết quả của bài kiểm tra Hình ảnh có kích thước phù hợp. Những kết quả này liệt kê những hình ảnh bạn vẫn cần đổi kích thước.