Tối ưu hóa hình ảnh trong Front-end

Hình ảnh là một trong những loại tài nguyên chiếm tỷ trọng lớn trong trang web hiện đại, và là một trong những yếu tố then chốt ảnh hưởng đến tốc độ tải trang, trải nghiệm người dùng. Lập trình viên front-end cần phải cân bằng cả hiệu suất lẫn độ phân giải, do đó việc xử lý hình ảnh thường tốn nhiều công sức hơn. Nếu bỏ qua nhu cầu hiển thị thực tế của những hình ảnh này trên các thiết bị khác nhau, sẽ dẫn đến việc thiết bị của người dùng phải tải xuống những tài nguyên hình ảnh có kích thước vượt xa mức cần thiết.

Tài nguyên hình ảnh của nhiều website tồn tại các vấn đề như kích thước không hợp lý, định dạng không phù hợp, nén không triệt để..., dẫn đến việc lưu lượng của người dùng bị tiêu hao vô ích và hiệu năng trang web bị ảnh hưởng nghiêm trọng.

Bài viết này sẽ giúp bạn hiểu rõ hơn về các kỹ thuật triển khai hình ảnh, logic tối ưu hóa hình ảnh, có thể giúp bạn áp dụng vào trang web của mình để có thể cân bằng giữ chất lượng hình ảnh và hiệu năng.

I. Vấn đề với ảnh responsive

1. Kích thước ảnh quá lớn

Trong các website hiện đại, việc kích thước ảnh quá lớn là một vấn đề tồn tại phổ biến. Chúng ta thường sử dụng trực tiếp các hình ảnh gốc được chụp từ máy ảnh độ phân giải cao, hoặc các tài nguyên ảnh xuất ra từ các công cụ thiết kế mà chưa được tối ưu hóa. Kích thước của những hình ảnh này thường vượt xa nhu cầu hiển thị thực tế.

Ví dụ, một hình ảnh trên web chỉ cần hiển thị với kích thước 800x600 pixel, nhưng kích thước thực tế của nó có thể lên tới 4000x3000 pixel. Trong trường hợp này, trình duyệt cần tải xuống lượng dữ liệu pixel gấp 4 lần so với nhu cầu hiển thị thực tế, gây lãng phí tài nguyên nghiêm trọng. Tệ hơn nữa, nhiều website thậm chí còn tải cùng một kích thước ảnh cho phiên bản di động như trên desktop, khiến người dùng di động tiêu tốn một lượng lớn lưu lượng không cần thiết.

2. Sai lầm trong việc sử dụng framework

Các front-end framework hiện đại như NextJS, Nuxt... cung cấp các component Image tiên tiến, nhưng điều này không có nghĩa là chúng ta có thể hoàn toàn bỏ qua tầm quan trọng của việc tối ưu hóa hình ảnh. Các tính năng tối ưu hóa tự động của framework cần được cấu hình đúng cách mới phát huy tác dụng.

Component Image của NextJS thực sự cung cấp tính năng tối ưu hóa tự động, nhưng khi thiếu các tham số quan trọng thì không thể phát huy đầy đủ tác dụng. Không có thuộc tính sizes, bộ tối ưu hóa không thể xác định kích thước hiển thị của ảnh trong các bố cục khác nhau, và do đó không thể tạo ra các biến thể ảnh phù hợp nhất.

Nhiều lập trình viên nghĩ rằng framework sẽ tự động xử lý mọi chi tiết tối ưu hóa, nhưng thực tế cần phải chỉ định rõ quy tắc hiển thị của ảnh. Việc thiếu sizes sẽ dẫn đến không thể chọn được phiên bản ảnh tối ưu dựa trên độ rộng viewport.

II. Cơ chế cốt lõi của ảnh responsive

1. Bản chất giữa pixel và thiết bị hiện thị

Để hiểu tầm quan trọng của ảnh responsive, trước hết cần nắm được mối quan hệ cơ bản giữa pixel và thiết bị hiển thị. Mỗi thiết bị hiển thị có số lượng pixel vật lý cố định, trong khi pixel CSS là một đơn vị tương đối, được chuyển đổi với pixel thiết bị thông qua tỷ lệ điểm ảnh thiết bị (DPR). DPR càng cao, số lượng pixel hình ảnh cần thiết càng tăng theo cấp số nhân.

2. Sự phối hợp của thuộc tính srcset và sizes

HTML5 giới thiệu các thuộc tính srcset và sizes, cung cấp hỗ trợ gốc cho ảnh responsive. Hai thuộc tính này cần được sử dụng phối hợp để phát huy hiệu quả tối đa.

Phân tích kiến trúc: Giải pháp này thông qua nhiều nguồn ảnh và điều kiện media query, cung cấp tài nguyên ảnh phù hợp chính xác cho các thiết bị và bố cục khác nhau.

Tư duy thiết kế: Dựa trên đặc điểm thiết bị và yêu cầu bố cục, cung cấp chính xác tài nguyên ảnh phù hợp, tránh thiếu hoặc thừa.

Logic trọng tâm: Trình duyệt dựa trên kích thước hiển thị xác định bởi thuộc tính sizes và DPR của thiết bị, sẽ chọn nguồn ảnh phù hợp nhất từ srcset.

Phân tích tham số:

• srcset: Cung cấp các biến thể ảnh với độ rộng khác nhau, giá trị w biểu thị chiều rộng gốc của ảnh
• sizes: Định nghĩa độ rộng hiển thị của ảnh trong các điều kiện media khác nhau
• Media query: Khớp các quy tắc hiển thị khác nhau dựa trên độ rộng viewport

3. Phân tích sâu về tỷ lệ điểm ảnh thiết bị (DPR)

Tác động thực tế DPR

Tỷ lệ điểm ảnh thiết bị (Device Pixel Ratio) là yếu tố then chốt quyết định độ phân giải cần thiết của hình ảnh. Nó biểu thị 1 pixel CSS tương ứng với bao nhiêu pixel vật lý của thiết bị.

Tư duy thiết kế: Dựa trên DPR cụ thể của thiết bị để tính toán động độ phân giải ảnh cần thiết, đảm bảo độ rõ nét của ảnh đồng thời tránh lãng phí tài nguyên.

Logic trọng tâm: Độ rộng pixel cần thiết của ảnh bằng độ rộng hiển thị CSS nhân với tỷ lệ pixel thiết bị.

Phân tích tham số:

• cssWidth: Độ rộng hiển thị của ảnh trong trang (pixel CSS)
• pixelDensity: Tỷ lệ pixel thiết bị, được lấy thông qua window.devicePixelRatio

III. Tác động của các phương pháp tải đến hiệu suất

1. Lựa chọn Eager Loading hay Lazy Loading

Phương pháp tải ảnh có ảnh hưởng đáng kể đến hiệu suất trang, đặc biệt đối với các chỉ số hiệu suất then chốt trên màn hình đầu tiên như LCP (Largest Contentful Paint).

Phân tích kiến trúc: Dựa trên vị trí và mức độ quan trọng của ảnh trong trang, áp dụng các phương pháp tải khác nhau.

Tư duy thiết kế: Ưu tiên tải ảnh quan trọng trên màn hình đầu tiên, trì hoãn tải ảnh không thuộc màn hình đầu tiên để cải thiện hiệu suất tải ban đầu.

Logic then chốt: Trình duyệt dựa vào giá trị thuộc tính loading để quyết định mức độ ưu tiên và thời điểm tải.

Giải thích tham số:

• loading="eager": Chỉ thị trình duyệt ưu tiên tải tài nguyên này
• loading="lazy": Chỉ thị trình duyệt chỉ tải khi tài nguyên gần với viewport

2. Phương pháp xử lý tính tương thích của trình duyệt

Do sizes="auto" không được hỗ trợ bởi tất cả trình duyệt, cần áp dụng phương pháp tăng cường tiến bộ (progressive enhancement).

Tư duy thiết kế: Thông qua kiểm tra tính năng để xác định mức độ hỗ trợ của trình duyệt, cung cấp giải pháp triển khai phù hợp nhất cho các trình duyệt khác nhau.

Logic trọng tâm: Kiểm tra động khả năng của trình duyệt và áp dụng chiến lược tối ưu hóa tương ứng.

Giải thích tham số:

• applyImageOptimization: Hàm chính để tối ưu hóa hình ảnh
• testElement: Phần tử thử nghiệm để kiểm tra hỗ trợ tính năng
• isAutoSupported: Kiểm tra hỗ trợ trình duyệt thông qua thuộc tính sizes của phần tử img
• targetImages: Danh sách các hình ảnh cần được tối ưu hóa
• imageElement: Phần tử hình ảnh trong vòng lặp
• data-fallback-sizes: Giá trị sizes được đặt trước cho các trình duyệt không hỗ trợ auto

Tổng kết

Trong bài viết này, chúng ta đã tìm hiểu sâu về tầm quan trọng của tối ưu hóa hình ảnh responsive và các phương pháp triển khai. Trong các trang web hiện đại, tài nguyên hình ảnh thường là nguyên nhân chính gây ra điểm nghẽn hiệu suất, nhưng thông qua việc sử dụng đúng cách các thuộc tính srcset và sizes, kết hợp với phương pháp tải phù hợp, chúng ta có thể cải thiện đáng kể hiệu suất trang.

Điểm cốt lõi:

• Hình ảnh responsive không chỉ là việc thích ứng hiển thị, mà còn là yếu tố quan trọng trong tối ưu hóa hiệu suất
• Các thuộc tính srcset và sizes cần được sử dụng kết hợp để phát huy hiệu quả tối đa
• Tỷ lệ điểm ảnh thiết bị (DPR) là yếu tố then chốt xác định độ phân giải hình ảnh
• Phương pháp tải nên được phân biệt dựa trên vị trí và tầm quan trọng của hình ảnh trong trang
• Các tính năng tự động như sizes="auto" cần xử lý tương thích

Chúng ta nên coi tối ưu hóa hình ảnh responsive như một quy trình tiêu chuẩn trong tối ưu hóa hiệu suất front-end, thông qua việc kiểm soát chính xác tài nguyên hình ảnh, vừa đảm bảo chất lượng hình ảnh vừa giảm đáng kể mức tiêu thụ băng thông, cuối cùng nâng cao trải nghiệm người dùng.

Bằng cách triển khai các phương pháp và kỹ thuật được giới thiệu trong bài viết này, các bạn có thể đảm bảo người dùng trên mọi thiết bị đều có thể tải nhanh và xem hình ảnh rõ ràng, đồng thời giảm lãng phí băng thông không cần thiết, đạt được sự cải thiện kép về hiệu suất và trải nghiệm người dùng.