Phân phát hình ảnh thích ứng

Katie Hempenius
Katie Hempenius

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. Thay vì phương pháp "một kích thước phù hợp cho tất cả" đối với hình ảnh, hãy phân phát nhiều kích thước hình ảnh cho 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 phân phát hình ảnh thích ứng, bạn đang đá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í đó. Kết quả – như đã nêu trước đó – thay vì phân phối quá nhiều dữ liệu hình ảnh cho các thiết bị không được hưởng lợi từ việc này, bạn sẽ phân phát một hình ảnh có kích thước phù hợp cho thiết bị. Đối với các thiết bị nhỏ hơn như điện thoại và máy tính bảng, điều này tương đương với việc giảm mức sử dụng dữ liệu so với các thiết bị có màn hình lớn hơn, chẳng hạn như máy tính xách tay.

Ả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ì bạn đang giảm thời gian tải tài nguyên cho đề xuất LCP đó.

Thời gian tải tài nguyên thấp hơn sẽ làm giảm thời gian tải cho hình ảnh LCP, qua đó cải thiện điểm LCP của trang. LCP thấp hơn nghĩa là người dùng sẽ cảm thấy rằng trang web của bạn tải nhanh hơn, đặc biệt là phần nội dung lớn nhất hiển thị trong khung nhìn trong khi tải trang. Việc phân phát hình ảnh thích ứng cũng có thể làm giảm tranh chấp về 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étcô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 được tích hợp nhanh chóng và dễ dàng với các công cụ và tập lệnh bản dựng. Mặt khác, ImageMagick rất thuận tiện cho việc đổi kích thước hình ảnh một lần vì được sử dụng 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, rồi 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 chiều rộng 300 px x 200 px chiều 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 tăng hiệu suất tốt hơn, nhưng sẽ chiếm nhiều dung lượng hơn trên máy chủ và yêu cầu phải viết thêm một chút HTML.

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ác dịch vụ hình ảnh cung cấp hình ảnh thích ứng (và thao tác với hình ảnh) theo yêu cầu. Thumbor được thiết lập bằng cách cài đặt trên một máy chủ; Cloudinary sẽ xử lý các thông tin chi tiết này cho bạn và bạn không cần phải thiết lập máy chủ. Cả hai đều là những cách dễ dàng để tạo hình ảnh thích ứng.

Phân phát nhiều phiên bản hình ảnh

Chỉ định nhiều phiên bản hình ảnh và 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, srcsetsizes 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 srcsetsizes. Nếu trình duyệt không hỗ trợ các thuộc tính này thì trình duyệt sẽ quay lại tải tài nguyên do thuộc tính src chỉ định.

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. 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.

"Mô tả chiều rộng" nghe có vẻ lạ mắt nhưng chỉ là một cách để trình duyệt biết chiều rộng của hình ảnh. Điều này sẽ giúp trình duyệt không phải tải hình ảnh xuống để xác định kích thước của hình ảnh.

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 các kích thước hình ảnh khác nhau. 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 cho trình duyệt biết chiều rộng của hình ảnh khi hiển thị. Tuy nhiên, thuộc tính kích thước không ảnh hưởng đến kích thước hiển thị. Bạn vẫn cần có CSS để làm đ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 (tức là 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ẽ tải hình ảnh do thuộc tính "src" chỉ định. (Trình duyệt đã gửi hỗ trợ cho thuộc tính "sizes" và "srcset" cùng một lúc, do đó, trình duyệt sẽ hỗ trợ cả hai thuộc tính hoặc không hỗ trợ cả hai thuộc tính này.)

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.

(Nhiều tín dụng hơn nữa)

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 trông hoàn toàn khác nhau (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ề 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ỡ 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. Các kết quả này sẽ liệt kê những hình ảnh cần được đổi kích thước.