Việc phân phát hình ảnh có kích thước máy tính đến thiết bị di động có thể tốn nhiều dữ liệu gấp 2–4 lần so với 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 các kích thước hình ảnh khác nhau đến các thiết bị khác nhau.
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ị thiết bị của người dùng và chọn một trong số các đề xuất hình ảnh tối ưu để hiển thị dựa trên những tiêu chí đó. Thao tác này sẽ lưu dữ liệu cho người dùng của bạn, chủ yếu bằng cách phân phối hình ảnh nhỏ hơn đến các thiết bị có màn hình nhỏ hơn.
Hiệu ứng tải hình ảnh nhanh hơn cũng có thể mở rộng sang Nội dung lớn nhất hiển thị (LCP). Ví dụ: nếu trang của bạn Phần tử LCP là một hình ảnh, phân phát nó có thể làm giảm thời lượng tải tài nguyên.
Việc giảm thời lượng tải tài nguyên sẽ làm giảm thời gian tải cho hình ảnh LCP, từ đó cải thiện điểm LCP của trang. LCP thấp hơn có nghĩa là người dùng sẽ thấy trang web của bạn tải nhanh hơn, và đặc biệt là khi tải nội dung quan trọng nhất (phần tử LCP) nhanh hơn. Việc phân phát hình ảnh thích ứng cũng có thể làm giảm tranh chấp băng thông cho trên trang, có thể cải thiện tốc độ tải nói chung của trang.
Đổi kích thước hình ảnh
Hai trong số những 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 hay để tự động đổi kích thước hình ảnh (ví dụ: tạo nhiều hình thu nhỏ có kích thước khác nhau cho tất cả video trên trang web của bạn). Nó nhanh và tích hợp tốt với tập lệnh và công cụ bản dựng. ImageMagick khác thuận tiện cho việc đổi kích thước hình ảnh một lần vì nó chạy hoàn toàn từ lệnh .
sắc nét
Để dùng sắc nét làm 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 tệp đó để 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
Để thay đổ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 thiết bị đầu cuối của bạn:
convert -resize 33% flower.jpg flower-small.jpg
Để thay đổi kích thước hình ảnh sao cho vừa với không gian rộng 300px x 200px cao, hãy chạy lệnh sau đây:
# 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 giá trị nào "chính xác" hãy trả lời câu hỏi này. Tuy nhiên, thông thường, phân phát 3-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ẽ phù hợp hơn cho nhưng chiếm nhiều dung lượng hơn trên máy chủ và đòi hỏi bạn phải viết HTML nhiều hơn một chút.
Tuỳ chọn khác
Các dịch vụ hình ảnh như Thumbor (nguồn mở) và Cloudinary cũng rất đáng để thử. Cả hai đều nhiều cách đơn giản để tạo hình ảnh thích ứng, đồng thời cung cấp cả hình ảnh thao túng 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. Mây xử lý chi tiết cho bạn và không yêu cầu 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 tốt nhất để sử dụng:
| Trước | Sau |
|---|---|
| <img src="hoa-large.jpg"> | <img src="flowers-large.jpg" srcset="flowers-small.jpg 480w, hoa-lớn.jpg 1080w" kích thước="50vw"> |
của thẻ <img>
src,
srcset,
và sizes
đều tương tác để đạt được kết quả cuối cùng này.
"src" phân bổ
Thuộc tính src giúp mã này hoạt động trên các trình duyệt không
hỗ trợ srcset và sizes
. Những trình duyệt đó quay lại tải tài nguyên được chỉ định trong
Thuộc tính src.
"srcset" phân bổ
Thuộc tính srcset là danh sách tên tệp hình ảnh được phân tách bằng dấu phẩy và
phần mô tả chiều rộng hoặc mật độ.
Ví dụ này sử dụng
mã mô tả chiều rộng,
cho trình duyệt biết kích thước của hình ảnh để trình duyệt không phải tải
hình ảnh để tìm hiểu. 480w là phần mô tả chiều rộng cho trình duyệt biết
flower-small.jpg rộng 480px. 1080w là chỉ số mô tả chiều rộng cho biết
trình duyệt cho thấy flower-large.jpg rộng 1080px.
Tín dụng bổ sung: Bạn không cần phải biết về mã 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 mã mô tả mật độ, hãy xem Lớp học lập trình về chuyển đổi giải pháp. Mã mô tả mật độ được dùng để phân phát các hình ảnh khác nhau dựa trên mật độ pixel.
"Kích thước" phân bổ
Thuộc tính kích thước cho trình duyệt biết chiều rộng của hình ảnh khi được hiển thị, mặc dù 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 CSS cho việc đó.
Trình duyệt sử dụng thông tin này cùng với những gì biết về thiết bị (bao gồm kích thước và mật độ pixel) để xác định hình ảnh nào cần tải.
Nếu trình duyệt không nhận ra "sizes" sẽ quay lại dùng
đang tải hình ảnh được chỉ định bởi "src" . (sizes và srcset)
được ra mắt cùng một lúc, vì vậy mọi trình duyệt đều hỗ trợ cả
hoặc không thuộc tính nào.)
Tín dụng bổ sung: Nếu muốn đẹ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ị trí. Điều này phù hợp với các trang web sử dụng các bố cục khác nhau cho kích thước khung nhìn khác nhau. Hãy xem mẫu mã gồm nhiều vị trí này để tìm hiểu cách làm việc này.
(Nhiều hơn nữa) Điểm cộng
Ngoài tất cả tín dụng bổ sung đã được liệt kê (hình ảnh 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 nghệ thuật. Hướng nghệ thuật là hoạt động phân phát những hình ảnh có hình thức hoàn toàn khác (thay vì nhiều phiên bản 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ề Hướng dẫn 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 bạn không bỏ lỡ bất kỳ hình ảnh nào. Chạy Kiểm tra hiệu suất Lighthouse (Lighthouse > Tuỳ chọn > Hiệu suất) và tìm kết quả của Kiểm tra Thay đổi kích thước hình ảnh cho phù hợp. Những kết quả này liệt kê những hình ảnh mà bạn vẫn cần đổi kích thước.