Nếu bạn muốn tăng tốc trang web WordPress của mình, việc giảm kích thước tệp hình ảnh sẽ mang lại lợi tức đầu tư đáng kể. Trung bình, hình ảnh chiếm khoảng một nửa kích thước tệp của trang web, vì vậy ngay cả những cải tiến nhỏ cũng có thể mang lại kết quả đáng kinh ngạc. WebP có thể giúp bạn rất nhiều điều đó!
WebP là một định dạng hình ảnh hiện đại có thể giúp bạn giảm kích thước hình ảnh của mình mà không làm thay đổi giao diện của chúng. Trung bình, học cách chuyển đổi một hình ảnh sang WebP có thể thu nhỏ kích thước tệp của nó ~ 25-35% mà chất lượng không bị giảm sút rõ rệt.
Hầu hết các trình duyệt hiện đại và WordPress 5.8+ đều hỗ trợ WebP. Trong bài viết này, chúng tôi sẽ đi sâu vào định dạng hình ảnh mới thú vị này và chỉ cho bạn cách bạn có thể tận dụng sự tuyệt vời của nó.
Sẳn sàng? Bắt đầu nào!
WebP là gì?
Vậy, tệp WebP là gì? Tóm lại, WebP là định dạng ảnh do Google phát triển nhằm tối ưu hóa hình ảnh tốt hơn các định dạng ảnh phổ biến (lúc bấy giờ). Ví dụ: bạn có các định dạng hình ảnh như JPEG hoặc JPG và PNG.
Lưu ý: Kiểm tra xem các loại tệp hình ảnh khác nhau có thể ảnh hưởng như thế nào đến tốc độ trang web của bạn.
WebP tập trung vào việc phân phối cùng một tệp hình ảnh, chỉ với kích thước tệp nhỏ hơn. Bằng cách giảm kích thước tệp hình ảnh, bạn vẫn có thể mang lại trải nghiệm tương tự cho khách truy cập trang web của mình nhưng trang web của bạn sẽ tải nhanh hơn.
Ví dụ: trong nghiên cứu nén WebP của Google, Google nhận thấy rằng một tệp hình ảnh WebP ở mức trung bình:
- Nhỏ hơn 25-34% so với hình ảnh JPEG tương đương.
- Nhỏ hơn 26% so với hình ảnh PNG có thể so sánh.
Đó là lý do tại sao nếu bạn chạy trang web của mình thông qua PageSpeed Insights, một trong nhiều khuyến nghị là Cung cấp hình ảnh ở các định dạng thế hệ tiếp theo như WebP :
Vậy làm cách nào để định dạng WebP của Google đạt được những giảm kích thước tệp này?
Đầu tiên, nó hỗ trợ nén mất dữ liệu và không mất dữ liệu, vì vậy mức giảm chính xác sẽ phụ thuộc vào việc bạn đang sử dụng nén mất dữ liệu hay không mất dữ liệu.
Với tính năng nén mất dữ liệu, WebP sử dụng một thứ gọi là “mã hóa dự đoán” để giảm kích thước tệp. Mã hóa dự đoán sử dụng các giá trị của các pixel lân cận trong một hình ảnh để dự đoán các giá trị và sau đó chỉ mã hóa sự khác biệt. Nó dựa trên mã hóa khung khóa VP8.
Lossless WebP sử dụng một bộ phương pháp phức tạp hơn nhiều do nhóm WebP phát triển.
Nếu bạn muốn tìm hiểu chi tiết về các kỹ thuật nén WebP, bài viết này là một điểm khởi đầu tốt.
Những trình duyệt web nào hỗ trợ WebP?
Để hình ảnh WebP hoạt động, trình duyệt web của khách truy cập cần hỗ trợ chúng. Thật không may, trong khi hỗ trợ trình duyệt đã phát triển rất nhiều, khả năng tương thích với WebP vẫn chưa phổ biến .
Hình ảnh WebP được hỗ trợ bởi các trình duyệt phổ biến như:
- Chrome ( máy tính để bàn và thiết bị di động )
- Firefox ( máy tính để bàn và điện thoại di động )
- Microsoft Edge
- iOS và macOS Safari ( chỉ macOS 11 Big Sur trở lên )
- Opera ( máy tính để bàn và thiết bị di động )
Tại thời điểm chúng tôi viết bài này, Safari chỉ hỗ trợ một phần hình ảnh WebP.
Internet Explorer cũng không hỗ trợ WebP (nhưng Edge hỗ trợ WebP vì nó dựa trên Chromium). Tuy nhiên, việc sử dụng IE đã giảm xuống dưới 1% tổng số người dùng Internet. Đó là một lợi ích cho tất cả mọi người trên web!
Tổng cộng, khoảng 95% người dùng Internet sử dụng trình duyệt hỗ trợ WebP. Vì vậy, mặc dù nó chắc chắn có sự ủng hộ của đa số, nhưng 5% đó là một trở ngại nhỏ, đặc biệt khi đó là người dùng Safari trên các phiên bản macOS cũ hơn. Trong hướng dẫn WordPress WebP của chúng tôi bên dưới, chúng tôi sẽ chỉ cho bạn cách xử lý điều này để tất cả khách truy cập của bạn có trải nghiệm tuyệt vời.
So sánh kích thước WebP so với JPG và PNG
Theo các thử nghiệm của Google, hình ảnh WebP là:
- Nhỏ hơn 25-34% so với hình ảnh JPEG tương đương.
- Nhỏ hơn 26% so với các hình ảnh PNG tương tự.
Nếu bạn muốn tìm hiểu thêm về phương pháp của Google, bạn có thể tìm thấy các liên kết trực tiếp đến toàn bộ kết quả bên dưới:
- JPEG
- PNG
Cả hai bài kiểm tra đều dựa trên hơn 11.000 hình ảnh, bao gồm:
- Hình ảnh Lenna nổi tiếng
- 24 hình ảnh từ bộ hình ảnh màu trung thực Kodak
- 100 hình ảnh từ Tecnick.com
- Một mẫu ngẫu nhiên gồm hơn 11.000 hình ảnh từ Tìm kiếm Hình ảnh của Google
Cách sử dụng hình ảnh WebP trên WordPress
Bắt đầu với WordPress 5.8, bạn sẽ có thể sử dụng định dạng ảnh WebP giống như các định dạng JPEG, PNG và GIF. Chỉ cần tải hình ảnh của bạn lên Thư viện phương tiện và đưa chúng vào nội dung của bạn. Vì WordPress 5.8+ hỗ trợ định dạng WebP theo mặc định, bạn không phải cài đặt các plugin của bên thứ ba để tải lên hình ảnh WebP. Điều đó đủ cho hầu hết các trường hợp sử dụng phổ biến.
Để bắt đầu ngay lập tức, bạn có thể tham khảo sơ lược về cách sử dụng hình ảnh WebP trong WordPress 5.8+ của chúng tôi. Chúng tôi khuyên bạn nên xem qua những lưu ý về hỗ trợ WebP trong WordPress.
Tuy nhiên, khoảng 5% người (chủ yếu là người dùng Safari trên macOS cũ hơn) sử dụng trình duyệt web không hỗ trợ WebP. Nếu bạn chuyển đổi hình ảnh WebP và sử dụng chúng trực tiếp trong nội dung của mình, những khách truy cập đó sẽ không thể nhìn thấy hình ảnh của bạn, điều này sẽ làm hỏng trải nghiệm duyệt web của họ.
Ngoài ra, việc tạo hình ảnh WebP không đơn giản như tạo hình ảnh JPG / JPEG, đây là định dạng tệp hình ảnh mặc định trên hầu hết các máy ảnh, điện thoại thông minh và thư viện hình ảnh trực tuyến. WordPress chưa hỗ trợ chuyển đổi hình ảnh tự động sang định dạng WebP (chưa!).
Đừng băn khoăn! Có một giải pháp.
Bạn có thể sử dụng một plugin WordPress để chuyển đổi hình ảnh gốc của bạn sang định dạng WebP và cũng cung cấp hình ảnh gốc dưới dạng dự phòng nếu trình duyệt của khách truy cập không hỗ trợ WebP.
Ví dụ: nếu bạn tải tệp JPEG lên trang web của mình, plugin sẽ:
- Chuyển đổi tệp JPEG thành WebP và cung cấp phiên bản WebP cho Chrome, Firefox, Edge, v.v.
- Hiển thị tệp JPEG gốc cho khách duyệt bằng Safari (trên các phiên bản macOS cũ hơn) và các trình duyệt khác không hỗ trợ WebP.
Bằng cách đó, mọi người có thể nhìn thấy hình ảnh của bạn và mọi người đều có được trải nghiệm nhanh nhất có thể.
Dưới đây, chúng ta sẽ điểm qua một số plugin WebP WordPress tốt nhất , tất cả đều hoạt động với Kinsta và Kinsta CDN.
ShortPixel
ShortPixel là một plugin tối ưu hóa hình ảnh WordPress phổ biến có thể giúp bạn tự động thay đổi kích thước và nén các hình ảnh bạn tải lên trang web WordPress của mình.
Đăng kí để nhận thư mới
Là một phần trong danh sách tính năng của nó, ShortPixel cũng có thể giúp bạn tự động chuyển đổi hình ảnh sang WebP và cung cấp những hình ảnh đó cho các trình duyệt hỗ trợ nó.
ShortPixel có một gói miễn phí giới hạn cho phép bạn tối ưu hóa miễn phí ~ 100 hình ảnh mỗi tháng. Các gói trả phí bắt đầu từ 4,99 đô la mỗi tháng cho tối đa 5.000 hình ảnh / tín dụng hoặc 9,99 đô la một lần cho gói 10.000 tín dụng.
ShortPixel tính từng kích thước hình ảnh WordPress mà bạn tối ưu hóa dưới dạng tín dụng. Vì vậy, nếu bạn muốn tối ưu hóa nhiều kích thước hình ảnh thu nhỏ, một hình ảnh có thể sử dụng nhiều tín dụng. Không có giới hạn kích thước tệp cho hình ảnh.
Bạn có thể trải các khoản tín dụng ShortPixel của mình trên các trang web không giới hạn – không có giới hạn cho mỗi trang web ( và tất cả các trang web của bạn đều có thể sử dụng cùng một tài khoản ShortPixel ).
Để sử dụng ShortPixel để cung cấp hình ảnh WebP trên WordPress, bạn sẽ cần cài đặt plugin từ WordPress.org và thêm khóa API của mình ( bạn có thể nhận được khóa này bằng cách đăng ký tài khoản ShortPixel miễn phí ).
Trong tab Chung , bạn có thể thiết lập các cài đặt cơ bản về cách tối ưu hóa hình ảnh hoạt động. Ví dụ: sử dụng mức nén nào và có nên thay đổi kích thước hình ảnh hay không:
Để bật hình ảnh WebP, hãy chuyển đến tab Nâng cao và:
- Chọn hộp cho Hình ảnh WebP
- Chọn hộp để Cung cấp phiên bản WebP… (điều này xuất hiện sau khi bạn chọn hộp đầu tiên)
- Chọn nút radio để Sử dụng cú pháp thẻ <PICTURE> (nút này xuất hiện sau khi chọn hộp trước)
- Để mặc định Chỉ thông qua lựa chọn móc của WordPress
Sau đó, lưu các thay đổi của bạn.
Nếu bạn đang lưu trữ tại Kinsta, ShortPixel sẽ cung cấp cho bạn thông báo cảnh báo về việc định cấu hình tệp cấu hình máy chủ trên Nginx. Để định cấu hình các cài đặt này, bạn có thể liên hệ với bộ phận hỗ trợ của Kinsta và chúng tôi sẽ sẵn lòng thiết lập cấu hình máy chủ cho bạn.
Tưởng tượng
Imagify là một plugin tối ưu hóa hình ảnh phổ biến của cùng một nhà phát triển như WP Rocket (một trong số ít plugin bộ nhớ đệm hoạt động với Kinsta).
Bạn mệt mỏi với một máy chủ lưu trữ chậm cho trang web WordPress của mình? Chúng tôi cung cấp các máy chủ nhanh như chớp và hỗ trợ đẳng cấp thế giới 24/7 từ các chuyên gia WordPress. Kiểm tra các kế hoạch của chúng tôi
Nó có thể tự động nén và thay đổi kích thước hình ảnh mà bạn tải lên trang web WordPress của mình. Sau đó, nó cũng có thể giúp bạn chuyển đổi chúng sang WebP và cung cấp các phiên bản đó cho khách truy cập bằng các trình duyệt hỗ trợ nó.
Về tính năng, ShortPixel và Imagify có rất nhiều điểm tương đồng. Sự khác biệt đáng kể nhất đến khi bạn nhìn vào giá cả. Trong khi ShortPixel tính phí bạn dựa trên hình ảnh không có giới hạn kích thước cho mỗi hình ảnh, thì Imagify tính phí bạn dựa trên kích thước tệp tổng thể, không có giới hạn hình ảnh.
Vì vậy, nếu bạn cần tối ưu hóa nhiều hình ảnh lớn, phương pháp của ShortPixel có thể rẻ hơn. Nhưng nếu bạn cần tối ưu hóa nhiều hình ảnh nhỏ, cách tiếp cận của Imagify có thể hợp lý hơn.
Imagify có một cấp miễn phí giới hạn cho phép tối ưu hóa 25 MB mỗi tháng. Sau đó, các gói trả phí bắt đầu từ 4,99 đô la mỗi tháng cho tối đa 1 GB hoặc 9,99 đô la cho tín dụng một lần 1 GB.
Giống như ShortPixel, bạn có thể mở rộng giới hạn tài khoản của mình trên các trang web không giới hạn.
Để sử dụng Imagify để cung cấp hình ảnh WordPress WebP, bạn cần cài đặt plugin từ WordPress.org và thêm khóa API của bạn để bắt đầu.
Khi bạn đã kích hoạt plugin, bạn có thể sử dụng hộp Cài đặt chung để chọn cấp độ nén của mình.
Để bật hình ảnh WebP, hãy cuộn xuống phần Tối ưu hóa và tìm phần Định dạng WebP :
- Chọn hộp để Tạo phiên bản webp của hình ảnh
- Chọn hộp để Hiển thị hình ảnh ở định dạng webp…
- Chọn nút radio để sử dụng thẻ <picture>
Như với ShortPixel, nếu bạn đang lưu trữ tại Kinsta, bạn cần tạo quy tắc Nginx cho nhóm bộ đệm WebP (liên hệ với bộ phận hỗ trợ của Kinsta).
Optimole
Optimole là một plugin tối ưu hóa hình ảnh WordPress hoạt động hơi khác so với Imagify và ShortPixel. Optimole có thể tự động nén và thay đổi kích thước hình ảnh của bạn. Tuy nhiên, nó cũng có hai tính năng đáng chú ý khác:
- Nó có thể cung cấp hình ảnh của bạn thông qua CDN (được cung cấp bởi Amazon CloudFront).
- Nó cung cấp hình ảnh thích ứng theo thời gian thực, nhờ đó Optimole sẽ cung cấp hình ảnh có kích thước tối ưu cho từng khách truy cập. Ví dụ: ai đó duyệt trên màn hình nhỏ sẽ nhận được hình ảnh có độ phân giải thấp hơn so với ai đó duyệt trên màn hình Retina.
Cách tiếp cận này tương tự như các dịch vụ tối ưu hóa / thao tác thời gian thực khác như Cloudinary, imgix, Xử lý hình ảnh KeyCDN, v.v.
Optimole cũng có thể cung cấp hình ảnh WebP cho khách truy cập bằng các trình duyệt hỗ trợ nó như một phần của quá trình tối ưu hóa hình ảnh theo thời gian thực này.
Optimole có một gói miễn phí giới hạn có thể xử lý việc cung cấp hình ảnh cho khoảng ~ 5.000 khách truy cập mỗi tháng. Sau đó, các gói trả phí bắt đầu từ 19 đô la mỗi tháng cho ~ 25.000 khách truy cập.
Để bắt đầu, bạn cần cài đặt plugin từ WordPress.org và kích hoạt nó bằng khóa API ( bạn có thể nhận được bằng cách đăng ký tài khoản Optimole miễn phí ).
Khi bạn làm điều đó, Optimole sẽ bắt đầu tự động tối ưu hóa hình ảnh của bạn và phân phối chúng qua CDN của nó. Hỗ trợ WebP được bật theo mặc định, vì vậy không cần phải bật nó theo cách thủ công.
Để định cấu hình các cài đặt khác, chẳng hạn như mức độ nén và hành vi chia tỷ lệ, bạn có thể đi tới Phương tiện → Tối ưu hóa → Cài đặt :
Vì Optimole xử lý việc phân phối hình ảnh của bạn qua CDN, nên không cần thiết lập bất kỳ quy tắc Nginx nào nếu bạn đang lưu trữ tại Kinsta.
Bản tóm tắt
Hình ảnh trang web WordPress của bạn chiếm một phần lớn kích thước tệp của một trang trung bình. Nếu bạn có thể tìm cách giảm kích thước hình ảnh của mình, bạn có thể tăng tốc trang web của mình mà không làm ảnh hưởng đến trải nghiệm người dùng. WebP là một định dạng hình ảnh hiện đại thực hiện chính xác điều đó bằng cách giảm ~ 25% kích thước tệp so với các tệp JPEG hoặc PNG so sánh.
Khoảng 95% người dùng Internet đã sử dụng trình duyệt hỗ trợ WebP. Phiên bản WordPress 5.8+ cũng hỗ trợ WebP ngay bây giờ. Vì vậy, không có lý do gì bạn không nên sử dụng nó.
Tuy nhiên, một số ít trình duyệt, đặc biệt là Safari trên các phiên bản macOS cũ hơn, vẫn không hỗ trợ WebP. Do đó, bạn chưa thể cung cấp hình ảnh WebP cho tất cả khách truy cập. Để giải quyết vấn đề này, bạn có thể sử dụng plugin WordPress chuyển đổi hình ảnh sang WebP và cung cấp phiên bản WebP cho khách truy cập có trình duyệt hỗ trợ trong khi sử dụng hình ảnh gốc cho khách truy cập có trình duyệt không hỗ trợ.
Để biết thêm các chiến thuật tối ưu hóa hình ảnh, hãy xem hướng dẫn đầy đủ của chúng tôi để tối ưu hóa hình ảnh cho hiệu suất web.
Nếu bạn có bất kỳ câu hỏi nào về việc sử dụng WebP trên WordPress, vui lòng hỏi chúng tôi trong phần bình luận bên dưới!
Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với:
- Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7.
- Tích hợp Cloudflare Enterprise.
- Tiếp cận khán giả toàn cầu với 34 trung tâm dữ liệu trên toàn thế giới.
- Tối ưu hóa với Giám sát Hiệu suất Ứng dụng được tích hợp sẵn của chúng tôi.
Tất cả những điều đó và hơn thế nữa, trong một kế hoạch không có hợp đồng dài hạn, hỗ trợ di chuyển và đảm bảo hoàn tiền trong 30 ngày. Kiểm tra các kế hoạch của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm ra kế hoạch phù hợp với bạn.
