Bài viết
Tối ưu media website cho tốc độ và Core Web Vitals
Hình ảnh và video thường chiếm 60 đến 80 phần trăm tổng dung lượng một trang web. Làm đúng phần này là việc có đòn bẩy lớn nhất bạn có thể làm cho tốc độ tải, điểm Core Web Vitals và thứ hạng tìm kiếm. Tin vui: không phần nào trong đó đòi hỏi phần mềm chuyên dụng hay máy chủ, và tệp của bạn không bao giờ cần rời khỏi thiết bị.
Chọn đúng định dạng trước mọi thứ khác
Chọn định dạng quan trọng hơn bất kỳ thanh trượt chất lượng nào. Với ảnh chụp trên trang web, WebP là mặc định đúng đắn: nó nhỏ hơn JPEG từ 25 đến 35 phần trăm ở cùng chất lượng hiển thị và mọi trình duyệt hiện đại đều hỗ trợ. AVIF nén còn tốt hơn nữa, hơn JPEG tới 50 phần trăm, đổi lại là mã hóa chậm hơn. Dùng AVIF cho ảnh tiêu đề và ảnh sản phẩm mà bạn nén một lần; dùng WebP cho mọi thứ bạn xử lý hàng loạt hoặc cần gấp. PNG chỉ thuộc về nơi bạn cần độ chính xác không mất dữ liệu hoặc nền trong suốt. SVG là lựa chọn hợp lý duy nhất cho logo, biểu tượng và minh họa: nó co giãn tới bất kỳ kích thước nào và thường chỉ nặng vài kilobyte so với hàng trăm kilobyte cho một bản raster tương đương.
Nén ảnh mà không làm giảm chất lượng nhìn thấy được
Hãy bắt đầu bằng cách thay đổi kích thước về đúng kích thước hiển thị thực tế: một ảnh tiêu đề hiển thị ở chiều rộng 1280 pixel không cần đến 4000 pixel dữ liệu. Thay đổi kích thước trước, rồi mới nén. Với ảnh chụp, chất lượng 80 ở WebP hoặc JPEG là ngưỡng thực dụng mà dưới đó người xem bình thường bắt đầu nhận ra, nên hãy nhắm tới khoảng 75 đến 85 và xem kết quả ở mức phóng to tối đa trước khi đăng. Với đồ họa có chữ và vùng màu phẳng, PNG không mất dữ liệu hoặc SVG giữ được độ sắc nét mà định dạng mất dữ liệu sẽ làm nhòe. Trình nén ảnh trên trang này xử lý tất cả các định dạng đó, chạy hoàn toàn trong trình duyệt của bạn, và áp dụng cùng các thuật toán như những công cụ máy tính để bàn chuyên dụng.
Chuyển đổi video cho web mà không tải nó lên
Vòng lặp nền và video nhúng là nơi việc tối ưu media web thường còn thiếu sót. Một tệp MP4 với H.264 chạy được ở mọi nơi, nhưng một tệp WebM với VP9 nhỏ hơn từ 20 đến 40 phần trăm ở cùng chất lượng, điều này quan trọng với người dùng di động trên các kết nối hạn chế. Cách thực dụng là chuyển đổi một lần sang WebM, phục vụ nó như nguồn ưu tiên trong một phần tử video, và giữ MP4 làm phương án dự phòng. Trình chuyển đổi video ở đây dùng FFmpeg được biên dịch sang WebAssembly: việc chuyển đổi chạy ngay trong trình duyệt của bạn, không có gì được tải lên, và tệp ở mọi kích thước đều xử lý được miễn là thiết bị của bạn có đủ bộ nhớ. Với video nền nội tuyến, hãy cân nhắc thêm công cụ cắt video để loại bỏ những giây thừa trước khi mã hóa: thời lượng là yếu tố lớn nhất quyết định dung lượng tệp.
Tài nguyên nội tuyến: base64 và SVG
Những ảnh rất nhỏ, biểu tượng và favicon được nhúng trực tiếp vào HTML hoặc CSS dưới dạng chuỗi base64 sẽ loại bỏ một lượt đi về mạng cho mỗi tài nguyên. Điều này hợp lý với những tài nguyên dưới khoảng 2 KB xuất hiện trên mọi trang, chẳng hạn một sprite logo hoặc một biểu tượng đang tải. Các tài nguyên lớn hơn nên giữ ở dạng tệp riêng vì base64 mã hóa nặng hơn 33 phần trăm so với dạng nhị phân, và trình duyệt lưu cache các tham chiếu tệp chứ không lưu cache dữ liệu nội tuyến một cách độc lập. Trình tối ưu SVG loại bỏ phần dư thừa của trình chỉnh sửa khỏi các tệp SVG xuất ra mà không đụng đến phần hiển thị. Trình chuyển ảnh sang base64 tạo ra URI data sẵn sàng để dán ngay trong trình duyệt của bạn.
Công cụ trong bài viết này
- Nén hình ảnh Giảm dung lượng tệp ảnh mà không cần tải lên. Thanh chất lượng hoặc kích thước mục tiêu theo KB. Hỗ trợ hàng loạt.
- Đổi kích thước ảnh Đổi kích thước và chuyển đổi ảnh (JPEG, PNG, WebP) mà không cần tải lên.
- Trình tối ưu SVG Tối ưu và rút gọn tệp SVG bằng SVGO ngay trong trình duyệt. Không tải lên.
- Bộ chuyển đổi video Chuyển đổi video giữa MP4, WebM, MKV và MOV (H.264/H.265/VP9) trong trình duyệt. Không tải lên.
- Hình ảnh sang Base64 Chuyển hình ảnh sang URI dữ liệu Base64 (và ngược lại) ngay trong trình duyệt. Sao chép, đoạn CSS, không tải lên.
Câu hỏi thường gặp
Nén ảnh có ảnh hưởng đến thứ hạng tìm kiếm của tôi không?
Google dùng Core Web Vitals như một tín hiệu xếp hạng, và Largest Contentful Paint gần như luôn là một hình ảnh hoặc khung hình đại diện video. Một trang có ảnh tiêu đề tải trong chưa đầy một giây sẽ được chấm điểm tốt hơn trang mất ba giây. Việc nén và chọn đúng định dạng ảnh hưởng trực tiếp đến chỉ số này, vậy nên đúng vậy, tối ưu ảnh có tác động SEO đo lường được. Tác động mạnh nhất trên di động, nơi kết nối chậm hơn và cái giá phải trả cho ảnh nặng lớn hơn.
Vì sao nên xử lý media tại máy thay vì dùng dịch vụ web?
Hầu hết công cụ media trực tuyến đòi hỏi tải tệp của bạn lên một máy chủ từ xa, việc này tốn thời gian, ngốn băng thông, và đồng nghĩa với một bản sao tệp của bạn tồn tại trên hạ tầng bạn không kiểm soát. Các công cụ trên trang này chạy hoàn toàn trong trình duyệt của bạn: hình ảnh và video của bạn được xử lý trên thiết bị và kết quả được tải về trực tiếp. Không cần tài khoản, không phải chờ tải lên, và không một thông tin nào về tệp của bạn từng được gửi tới máy chủ.