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

Katie Hempenius

Việc phân phát hình ảnh có kích thước dành cho máy tính cho thiết bị di động có thể sử dụng nhiều dữ liệu hơn gấp 2 đến 4 lần mức cần thiết. Hãy tuân thủ 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 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 là bằng cách phân phát hình ảnh nhỏ hơn cho các thiết bị có màn hình nhỏ hơn.

Tác động của việc tải hình ảnh nhanh hơn cũng có thể mở rộng tới Thời gian hiển thị nội dung lớn nhất (LCP) của trang. Ví dụ: nếu phần tử LCP của trang là một hình ảnh, thì việc phân phát hình ảnh đó một cách thích ứng có thể làm giảm thời lượng tải tài nguyên.

Thời lượng tải tài nguyên thấp hơn sẽ làm giảm thời gian tải hình ảnh LCP, nhờ đó cải thiện điểm số 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, đặc biệt là tải nội dung quan trọng nhất (thành phần LCP) nhanh hơn. Việc phân phát hình ảnh thích ứng cũng có thể làm giảm tình trạng 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ụ CLI ImageMagick.

Gói sharp là một lựa chọn phù hợp để 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 nhanh chóng và tích hợp tốt với các tập lệnh và công cụ xây dựng. ImageMagick thuận tiện hơn cho việc đổi kích thước hình ảnh một lần vì công cụ này chạy hoàn toàn từ dòng lệnh.

sắc nét

Để sử dụng sharp làm tập lệnh Node, hãy lưu mã này dưới dạng một tập lệnh riêng biệt trong dự án, sau đó chạy tập lệnh đó để chuyển đổi hình ảnh:

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 thiết bị đầu cuối:

convert -resize 33% flower.jpg flower-small.jpg

Để đổi kích thước hình ảnh sao cho vừa với không gian rộng 300px x 200px, 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 đáp án "chính xác" duy nhất cho câu hỏi này. Tuy nhiên, thông thường, bạn nên phân phát 3 đến 5 kích thước hình ảnh khác nhau. Việc phân phát nhiều kích thước hình ảnh hơn sẽ tốt hơn cho hiệu suất, nhưng sẽ chiếm nhiều dung lượng hơn trên máy chủ và yêu cầu bạn phải viết thêm một chút HTML.

Tuỳ chọn khác

Các dịch vụ hình ảnh như Thumbor (nguồn mở) và Cloudinary cũng đáng để thử. Cả hai đều là những cách đơn giản để tạo hình ảnh thích ứng, đồng thời cung cấp tính năng thao tác hình ảnh theo yêu cầu. Để thiết lập Thumbor, hãy cài đặt ứng dụng này trên máy chủ của bạn. Cloudinary sẽ xử lý các chi tiết cho bạn và bạn không cần 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:

Các thuộc tính src, srcset và sizes của thẻ <img> đều tương tác với nhau để đạ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 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à các chỉ số mô tả chiều rộng hoặc mật độ của hình ảnh.

Ví dụ này sử dụng phần 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 cần phải tải hình ảnh xuống để tìm hiểu. 480w là một chỉ số mô tả chiều rộng cho trình duyệt biết rằng flower-small.jpg có chiều rộng 480px. 1080w là một chỉ số mô tả chiều rộng cho trình duyệt biết rằng flower-large.jpg có chiều rộng 1080px.

Điểm thưởng: Bạn không cần phải biết về chỉ số mô tả mật độ để phân phát nhiều kích thước hình ảnh. Tuy nhiên, nếu bạn tò mò về cách hoạt động của chỉ số mô tả mật độ, hãy xem Lớp học lập trình về tính năng Chuyển đổi độ phân giải. Nội dung mô tả mật độ được 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 hình ảnh đó 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 CSS cho thuộc tính này.

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ị của người dùng (bao gồm kích thước và mật độ pixel) để xác định hình ảnh cần tải.

Nếu không nhận dạng được 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 giới thiệu cùng một 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ợ cả hai.)

Điểm thưởng: Nếu muố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 khe. Điều này phù hợp với các trang web sử dụng nhiều bố cục cho nhiều kích thước khung nhìn. Hãy xem mẫu mã nhiều vị trí này để tìm hiểu cách thực hiện việc này.

(Nhiều hơn nữa) Điểm cộng

Ngoài tất cả các điểm thưởng đã nêu (hình ảnh phức tạp!), bạn cũng có thể sử dụng các khái niệm này cho hướng dẫn nghệ thuật. Hướng dẫn nghệ thuật là phương pháp phân phát hình ảnh có giao diện 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 các khung nhìn khác nhau. 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 rằng mình không bỏ lỡ bất kỳ hình ảnh nào. Chạy quy trình Kiểm tra hiệu suất Lighthouse (Lighthouse > Options > Performance (Lighthouse > Tuỳ chọn > Hiệu suất)) và tìm kết quả của quy trình kiểm tra Properly size images (Định cỡ hình ảnh đúng cách). 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.