Tối ưu ảnh cho web: chuyển sang WebP, giới hạn kích thước và ghi thông tin bản quyền
Công cụ có hai chế độ. Chế độ chuyển đổi nén ảnh sang định dạng WebP theo mức chất lượng bạn đặt, kèm tùy chọn giới hạn chiều rộng và chiều cao. Chế độ siêu dữ liệu ghi các trường mô tả, tác giả và bản quyền vào phần thông tin nhúng trong tệp ảnh, giữ nguyên định dạng gốc.
Tính năng nổi bật
- Chuyển ảnh sang WebP với thanh chất lượng từ 10 tới 100, mặc định đặt ở mức 80
- Giới hạn chiều rộng và chiều cao tối đa, ảnh nhỏ hơn ngưỡng sẽ không bị phóng to
- Hiện dung lượng trước và sau kèm tỷ lệ giảm tính theo phần trăm cho từng ảnh
- Ghi trường mô tả ảnh, tên tác giả và dòng bản quyền vào phần thông tin nhúng của tệp
- Chế độ siêu dữ liệu giữ nguyên định dạng gốc với ảnh JPEG, PNG và WebP
- Nhận nhiều tệp cùng lúc, xử lý lần lượt và có nút tải tất cả khi xong
- Nhận các định dạng đầu vào JPEG, PNG, WebP, GIF, BMP, TIFF và AVIF, mỗi tệp tối đa 50MB
- Xử lý bằng thư viện ảnh chạy phía máy chủ, kết quả trả về ngay dưới dạng dữ liệu nhúng để tải xuống
Vì sao ảnh vẫn là thứ làm chậm trang nhiều nhất
Trên phần lớn trang web thương mại, ảnh chiếm phần lớn số byte mà trình duyệt phải tải về, nhiều hơn hẳn mã giao diện và phông chữ cộng lại. Nguyên nhân thường không phải là có quá nhiều ảnh mà là mỗi ảnh nặng gấp nhiều lần mức cần thiết: ảnh chụp từ máy ảnh hoặc ảnh do bên thiết kế gửi có chiều rộng bốn nghìn điểm ảnh trong khi khung hiển thị chỉ tám trăm, và định dạng vẫn là JPEG xuất thẳng từ phần mềm đồ họa. Hai việc đơn giản là hạ kích thước về đúng nhu cầu hiển thị và chuyển sang định dạng nén hiệu quả hơn thường cắt được phần lớn dung lượng mà mắt thường không nhận ra khác biệt. Đây cũng là loại tối ưu có tác động rõ nhất tới chỉ số thời gian hiển thị khối nội dung lớn nhất, vì trên trang có ảnh bìa thì chính tấm ảnh đó là khối được đo.
Lợi ích khi sử dụng
- Cắt được phần lớn dung lượng ảnh chỉ bằng hai thao tác đổi định dạng và hạ kích thước
- Thấy ngay tỷ lệ giảm của từng tệp nên dễ chọn mức chất lượng phù hợp
- Xử lý theo lô, hợp với việc dọn cả thư mục ảnh trước khi đưa lên trang
- Ghi được dòng tác giả và bản quyền vào chính tệp ảnh, thông tin đi theo ảnh khi bị chia sẻ lại
- Không cần cài phần mềm đồ họa nặng chỉ để làm mấy việc lặp lại
Cách tối ưu một loạt ảnh
- 1Chọn chế độ chuyển đổi nếu bạn cần giảm dung lượng, hoặc chế độ siêu dữ liệu nếu cần ghi thông tin tác giả và bản quyền.
- 2Đặt mức chất lượng, thường 75 tới 85 là vùng cân bằng tốt giữa dung lượng và chất lượng nhìn thấy.
- 3Điền chiều rộng tối đa theo đúng khung hiển thị lớn nhất trên trang của bạn, để trống nghĩa là giữ nguyên kích thước.
- 4Kéo thả ảnh vào khung, các tệp được xử lý lần lượt và hiện tỷ lệ giảm dung lượng khi xong.
- 5Phóng to bản kết quả để kiểm tra vùng chuyển màu và vùng chữ trước khi tải về, nếu thấy nhiễu thì tăng mức chất lượng rồi làm lại.
Ảnh được xử lý phía máy chủ, không xử lý trong trình duyệt
Cần nói rõ vì điều này ảnh hưởng tới quyết định của bạn. Khi bạn thả ảnh vào, tệp được gửi lên máy chủ của trang, xử lý bằng thư viện xử lý ảnh chạy phía máy chủ rồi trả kết quả về dưới dạng dữ liệu nhúng để tải xuống. Chọn cách này vì việc nén WebP chất lượng cao và việc ghi siêu dữ liệu chuẩn đòi hỏi thư viện mà trình duyệt không có sẵn. Hệ quả thứ nhất là ảnh của bạn có rời khỏi máy, nên với ảnh riêng tư, ảnh chụp giấy tờ hay ảnh sản phẩm chưa công bố, hãy cân nhắc trước. Đoạn xử lý nhận dữ liệu vào bộ nhớ, biến đổi rồi trả về ngay, không có bước ghi tệp xuống ổ đĩa, nhưng nguyên tắc chung là đừng tải lên bất cứ đâu những thứ bạn không muốn rời khỏi máy mình. Hệ quả thứ hai là có giới hạn dung lượng 50MB cho mỗi tệp và tốc độ phụ thuộc vào đường truyền của bạn, nên với hàng trăm ảnh nặng thì công cụ chạy trên máy sẽ nhanh hơn.
Chọn mức chất lượng WebP thế nào cho đúng loại ảnh
WebP dùng thuật toán nén mất dữ liệu giống JPEG nhưng hiệu quả hơn, nên ở cùng mức chất lượng cảm nhận thì tệp thường nhỏ hơn đáng kể. Con số chất lượng không phải phần trăm chất lượng còn lại mà là một tham số điều khiển mức lượng tử hóa, nên đừng hiểu 80 là giữ được tám mươi phần trăm. Với ảnh chụp có nhiều chi tiết và chuyển màu tự nhiên, mức 75 tới 85 gần như không phân biệt được bằng mắt ở kích thước hiển thị thường. Với ảnh có chữ, biểu đồ, đường viền sắc nét hay vùng màu phẳng, nén mất dữ liệu sinh ra vết nhòe quanh cạnh chữ nên bạn cần đặt mức cao hơn, khoảng 90 trở lên, hoặc giữ nguyên định dạng PNG. Với ảnh sản phẩm trên nền trắng, hãy phóng to kiểm tra rìa sản phẩm vì đó là chỗ vết nén lộ rõ nhất. Một điểm nữa là nén lại một ảnh đã nén mất dữ liệu sẽ cộng dồn sai lệch, nên hãy luôn xuất từ bản gốc chất lượng cao chứ đừng nén chồng nhiều lần.
Kích thước hiển thị thật mới là con số quyết định
Đây là phần cho kết quả lớn nhất nhưng hay bị bỏ qua. Trước khi đặt chiều rộng tối đa, hãy mở trang thật, bấm chuột phải vào ảnh rồi kiểm tra bằng công cụ dành cho lập trình viên xem khung chứa ảnh rộng bao nhiêu điểm ảnh. Nếu khung rộng 800 thì tải lên ảnh rộng 4000 là lãng phí khoảng hai mươi lăm lần số điểm ảnh. Quy tắc thực dụng là đặt chiều rộng tối đa bằng khoảng hai lần bề rộng khung để ảnh vẫn sắc trên màn hình mật độ điểm ảnh cao. Chế độ thay đổi kích thước ở đây giữ nguyên tỷ lệ và không phóng to ảnh nhỏ hơn ngưỡng, nên bạn có thể chạy cả thư mục mà không sợ ảnh nhỏ bị kéo giãn vỡ hình. Ở phía mã nguồn, hãy khai báo nhiều bản kích thước khác nhau để trình duyệt tự chọn bản phù hợp với màn hình, và luôn đặt thuộc tính chiều rộng cùng chiều cao cho thẻ ảnh; thiếu hai thuộc tính này là nguyên nhân phổ biến nhất khiến bố cục nhảy khi ảnh tải xong.
Chế độ siêu dữ liệu ghi được gì và không ghi được gì
Chế độ này ghi các trường vào phần thông tin nhúng theo chuẩn EXIF trong tệp ảnh, cụ thể là trường mô tả ảnh lấy từ ô tiêu đề, trường nghệ sĩ lấy từ ô tác giả, và trường bản quyền lấy từ ô bản quyền. Có một điểm cần biết: ô mô tả trong giao diện hiện chưa được ghi vào tệp mà chỉ hiện lại trong kết quả trả về, nên đừng trông cậy vào trường này. Ảnh được xuất lại theo đúng định dạng gốc với ảnh JPEG, PNG và WebP; các định dạng khác được chuyển về JPEG. Vì ảnh phải được mã hóa lại nên dung lượng có thể thay đổi và với ảnh JPEG thì đây là một lần nén mất dữ liệu nữa, dù mức chất lượng đặt khá cao. Ngoài ra khi bạn nhập ít nhất một trường, phần thông tin EXIF được ghi lại theo nội dung mới, nên các trường sẵn có của máy ảnh không chắc được giữ nguyên. Hãy luôn giữ bản gốc và chỉ dùng chế độ này trên bản sao dành cho web.
Những yếu tố SEO ảnh mà công cụ này không đụng tới
Đừng nhầm rằng tối ưu tệp là xong phần SEO cho ảnh. Thông tin nhúng trong tệp không thay được văn bản thay thế; đây là thuộc tính viết trong mã trang, mô tả nội dung ảnh bằng một câu ngắn, phục vụ trước hết cho người dùng trình đọc màn hình và sau đó mới cho công cụ tìm kiếm. Tên tệp cũng nằm ngoài phạm vi công cụ: hãy đổi những cái tên vô nghĩa từ máy ảnh thành tên mô tả nội dung, viết thường, không dấu, nối bằng gạch nối. Văn bản quanh ảnh và chú thích ngay dưới ảnh là những tín hiệu quan trọng để hiểu ảnh nói về gì. Về mặt kỹ thuật còn ba việc nữa: khai báo ảnh trong sơ đồ trang để chúng được phát hiện, bật tải trễ cho ảnh nằm dưới màn hình đầu nhưng tuyệt đối không bật cho ảnh bìa, và cân nhắc thêm dữ liệu có cấu trúc kèm thông tin giấy phép nếu bạn muốn ảnh hiển thị kèm thông tin bản quyền trong kết quả tìm ảnh.
Câu hỏi thường gặp (FAQ)
Ảnh của tôi có được xử lý ngay trong trình duyệt không?
Không. Tệp được gửi lên máy chủ của trang, xử lý bằng thư viện ảnh chạy phía máy chủ rồi trả kết quả về để bạn tải xuống. Đoạn xử lý không ghi tệp xuống ổ đĩa, nhưng với ảnh riêng tư hoặc ảnh sản phẩm chưa công bố, bạn vẫn nên cân nhắc trước khi tải lên bất kỳ dịch vụ trực tuyến nào.
Nên đặt mức chất lượng bao nhiêu?
Với ảnh chụp có nhiều chi tiết và chuyển màu tự nhiên, mức 75 tới 85 gần như không phân biệt được bằng mắt ở kích thước hiển thị thường. Với ảnh có chữ, biểu đồ hoặc vùng màu phẳng, hãy đặt từ 90 trở lên vì nén mất dữ liệu sinh vết nhòe quanh cạnh chữ, hoặc giữ nguyên định dạng PNG.
Con số chất lượng 80 nghĩa là giữ lại tám mươi phần trăm ảnh gốc à?
Không. Đó là tham số điều khiển mức lượng tử hóa trong thuật toán nén chứ không phải phần trăm chất lượng còn lại. Quan hệ giữa con số này và dung lượng cũng không tuyến tính: hạ từ 90 xuống 80 thường cắt được nhiều dung lượng, còn hạ từ 60 xuống 50 thì cắt được ít mà hình xấu đi rõ.
Đặt chiều rộng tối đa bao nhiêu là hợp lý?
Hãy đo bề rộng thật của khung chứa ảnh trên trang bằng công cụ dành cho lập trình viên, rồi đặt chiều rộng tối đa bằng khoảng hai lần con số đó để ảnh vẫn sắc trên màn hình mật độ điểm ảnh cao. Tải lên ảnh rộng 4000 cho một khung rộng 800 là lãng phí khoảng hai mươi lăm lần số điểm ảnh.
Ảnh nhỏ hơn ngưỡng có bị phóng to không?
Không. Chế độ thay đổi kích thước giữ nguyên tỷ lệ, đặt ảnh vừa trong khung giới hạn và không phóng to ảnh vốn đã nhỏ hơn. Nhờ vậy bạn chạy được cả thư mục ảnh có kích thước lẫn lộn mà không lo ảnh nhỏ bị kéo giãn vỡ hình.
Vì sao ảnh của tôi sau khi chuyển lại nặng hơn ảnh gốc?
Thường gặp khi ảnh gốc đã là ảnh nén rất mạnh, hoặc là ảnh PNG nhiều vùng màu phẳng vốn được nén không mất dữ liệu rất hiệu quả. Trong trường hợp đó, chuyển sang định dạng nén mất dữ liệu không có lợi. Hãy giữ nguyên bản gốc, hoặc thử hạ kích thước trước khi tính tới chuyện đổi định dạng.
Chế độ siêu dữ liệu có ghi được ô mô tả không?
Hiện chưa. Ba trường được ghi vào tệp là mô tả ảnh lấy từ ô tiêu đề, tên tác giả và dòng bản quyền. Nội dung ô mô tả chỉ hiện lại trong phần kết quả trả về chứ không được ghi vào tệp, nên đừng trông cậy vào trường này khi cần thông tin đi kèm ảnh.
Thông tin nhúng trong tệp có thay được văn bản thay thế không?
Không. Văn bản thay thế là thuộc tính viết trong mã trang, mô tả nội dung ảnh bằng một câu ngắn, phục vụ trước hết cho người dùng trình đọc màn hình. Thông tin nhúng trong tệp phục vụ mục đích khác, chủ yếu là ghi nhận quyền tác giả và nguồn gốc, và nó không hiển thị cho người đọc trang.
Ghi bản quyền vào tệp ảnh có tác dụng gì thực tế?
Thông tin đó đi theo tệp khi ảnh được tải xuống và chia sẻ lại, nên nó là căn cứ để chứng minh nguồn gốc. Google cũng có thể hiển thị thông tin về người tạo và tín dụng ảnh trong giao diện tìm ảnh khi tệp có sẵn siêu dữ liệu chuẩn. Tuy nhiên nhiều mạng xã hội xóa sạch phần này khi ảnh được tải lên nền tảng của họ.
Chế độ siêu dữ liệu có làm giảm chất lượng ảnh không?
Có thể, vì ảnh phải được mã hóa lại để ghi thông tin vào tệp. Với ảnh JPEG thì đây là thêm một lần nén mất dữ liệu, dù mức chất lượng đặt khá cao. Ngoài ra các trường EXIF sẵn có của máy ảnh không chắc được giữ nguyên, nên hãy luôn giữ bản gốc và chỉ chạy chế độ này trên bản sao dành cho web.
Vì sao không xuất được định dạng AVIF?
Chế độ chuyển đổi hiện chỉ xuất ra WebP, dù đầu vào chấp nhận cả tệp AVIF. Định dạng AVIF thường cho tệp nhỏ hơn WebP ở cùng chất lượng nhưng thời gian mã hóa lâu hơn nhiều. Nếu bạn cần AVIF, hãy dùng công cụ chạy trên máy hoặc để tầng phân phối nội dung của bạn tự sinh bản AVIF theo trình duyệt.
Có nên bật tải trễ cho mọi ảnh không?
Không. Ảnh nằm dưới màn hình đầu thì nên bật để trình duyệt khỏi tải sớm, nhưng ảnh bìa nằm ngay đầu trang thì tuyệt đối không bật, vì làm vậy sẽ đẩy lùi thời điểm ảnh xuất hiện và làm xấu chỉ số thời gian hiển thị khối nội dung lớn nhất. Với ảnh bìa, cách đúng là báo cho trình duyệt ưu tiên tải sớm.
Từ khóa liên quan
- tối ưu ảnh cho website
- chuyển ảnh sang webp
- nén ảnh không giảm chất lượng
- image seo optimizer
- kích thước ảnh chuẩn web
- alt text cho ảnh
- đặt tên file ảnh chuẩn seo
- exif metadata là gì
- ghi bản quyền vào ảnh
- webp và avif khác nhau
- giảm dung lượng ảnh online
- lazy loading cho ảnh
- largest contentful paint ảnh
- srcset và sizes
- ảnh làm chậm website
- sitemap ảnh
- tối ưu ảnh sản phẩm
- nén ảnh hàng loạt
- chất lượng nén webp bao nhiêu
- seo hình ảnh google images
