Bây giờ bạn có thể nhận ra rằng sử dụng hình ảnh trên trang web của bạn là một cách tuyệt vời để phá vỡ các bức tường văn bản dài và tất nhiên, hình ảnh giúp thu hút khách truy cập của bạn. Như người ta nói, một bức tranh có giá trị bằng một ngàn lời nói.
Nhưng sự tham gia đó phải trả giá đắt – kích thước tệp. Bạn càng sử dụng nhiều hình ảnh trên một trang, kích thước tệp của trang đó sẽ càng lớn. Và kích thước tệp lớn hơn có nghĩa là thời gian tải chậm hơn. Bạn có biết rằng WordPress.com được xếp hạng là máy chủ lưu trữ WordPress nhanh nhất trong bài kiểm tra năm 2021 của Review Signal? Đó là một chiến thắng lớn, nhưng ngay cả máy chủ lưu trữ nhanh nhất cũng sẽ gặp phải tốc độ trang chậm hơn nếu trang đó bao gồm các tệp hình ảnh lớn.
Bây giờ điều đó chắc chắn không có nghĩa là bạn không nên sử dụng hình ảnh trên trang web của mình, nhưng nó có nghĩa là bạn cần chú ý thêm một chút đến hình ảnh của mình để đảm bảo rằng bạn đang tối ưu hóa chúng để tránh các vấn đề về hiệu suất .
Có một số chiến lược phổ biến để tối ưu hóa hình ảnh cho hiệu suất, chẳng hạn như thay đổi kích thước và nén chúng. Nhưng một chi tiết quan trọng khác là định dạng tệp của chính hình ảnh – ví dụ: JPEG, PNG hoặc trọng tâm của bài đăng này – WebP.
WebP là gì?
WebP là một định dạng tệp hình ảnh hiện đại có thể giảm kích thước tệp hình ảnh của bạn mà không làm thay đổi chất lượng hoặc độ phân giải của chúng. Kích thước tệp nhỏ hơn có nghĩa là thời gian tải trang web nhanh hơn. Kích thước tệp hình ảnh của WebP nhỏ hơn đáng kể so với các định dạng hình ảnh khác như JPEG, PNG và GIF và việc giảm kích thước này không gây hại cho trải nghiệm của khách truy cập.
Sử dụng hình ảnh WebP cũng giúp tạo ra một trang web xanh hơn vì mỗi byte dữ liệu đều cần năng lượng để truyền và lưu trữ. Nếu thế giới có thể giảm kích thước của các tệp hình ảnh trên các trang web, thì việc tải các trang web sẽ yêu cầu sử dụng ít năng lượng hơn.
WordPress gần đây đã thêm hỗ trợ cho định dạng hình ảnh WebP, có nghĩa là trang web của bạn bây giờ có thể bắt đầu hưởng lợi từ nó. Ví dụ: giả sử bạn muốn đưa hình ảnh về kỳ nghỉ gần đây nhất của mình trong bài đăng blog mà bạn đang viết. Thay vì thêm hình ảnh đó dưới dạng tệp JPEG, bạn có thể tải nó lên dưới dạng tệp WebP. Điều này sẽ giúp khách truy cập trang web vui vẻ hơn, vì trang web của bạn sẽ tải nhanh hơn đối với họ.
Trong bài đăng này, bạn sẽ tìm hiểu mọi thứ bạn cần biết về WebP, bao gồm cả cách bạn có thể bắt đầu sử dụng hình ảnh WebP trên trang WordPress của riêng mình.
Lịch sử của Hình ảnh WebP
Định dạng WebP được phát triển bởi Google và ban đầu ra mắt vào tháng 9 năm 2010.
Google đã thêm các tính năng mới cho nó kể từ bản phát hành đầu tiên đó và phát hành nó dưới dạng định dạng mở, có nghĩa là bất kỳ ai cũng có thể tự do sử dụng định dạng WebP mà không bị hạn chế. Đó là một ý tưởng tương tự với phần mềm mã nguồn mở, đó là WordPress.
Theo thời gian, sự hỗ trợ cho định dạng hình ảnh WebP đã phát triển và tất cả các trình duyệt chính hiện nay đều cung cấp hỗ trợ cho hình ảnh WebP – nhiều hơn về điều đó trong phần sau.
Điều gì làm cho hình ảnh WebP khác với các định dạng hình ảnh khác?
Kỹ thuật nén cụ thể mà WebP sử dụng mang tính kỹ thuật cao, vì vậy chúng tôi sẽ chỉ tóm tắt những điều cơ bản bên dưới. Bạn có thể đi sâu vào chi tiết của định dạng tại đây nếu bạn muốn.
Về cơ bản, WebP sử dụng một thứ gọi là “mã hóa dự đoán” để giảm lượng thông tin cần lưu trữ cho một hình ảnh. Thay vì lưu trữ dữ liệu cho từng pixel trong hình ảnh, WebP có thể sử dụng các giá trị trong các khối pixel lân cận để “dự đoán” các giá trị trong các khối pixel khác và chỉ mã hóa sự khác biệt.
Bởi vì có ít thông tin hơn để lưu trữ, WebP có thể cung cấp kích thước tệp nhỏ hơn mà không thay đổi hình ảnh.
Giống như ảnh JPEG, PNG và GIF, WebP hỗ trợ cả nén không mất dữ liệu và mất dữ liệu:
- Nén không mất dữ liệu – cho phép bạn thu nhỏ hơn nữa kích thước tệp của hình ảnh mà không làm thay đổi chất lượng của hình ảnh.
- Nén mất dữ liệu – cho phép bạn giảm đáng kể kích thước tệp nhưng phải trả giá bằng một số chất lượng hình ảnh ( có thể nhìn thấy hoặc có thể không nhìn thấy bằng mắt người ).
WebP cũng hỗ trợ tính trong suốt, có nghĩa là bạn có thể sử dụng WebP cho các hình ảnh cần nền trong suốt (chẳng hạn như biểu trưng và biểu tượng).
Kích thước hình ảnh WebP so với JPG và PNG
Tại thời điểm này, bạn có thể tự hỏi làm thế nào kích thước tệp của hình ảnh WebP so với một hình ảnh giống hệt ở định dạng JPEG hoặc PNG .
Trở lại năm 2011, Google đã chạy một số nghiên cứu so sánh chi tiết để đánh giá điều này:
- Đối với hình ảnh WebP so với PNG, Google nhận thấy rằng hình ảnh WebP nhỏ hơn 26% so với hình ảnh PNG tương đương.
- Đối với hình ảnh WebP so với JPEG, Google nhận thấy rằng hình ảnh WebP nhỏ hơn khoảng 25-34% so với hình ảnh JPEG tương đương.
Về cơ bản, trung bình , bạn có thể mong đợi rằng hình ảnh WebP sẽ nhỏ hơn khoảng 25% so với tệp JPEG hoặc PNG tương đương.
Những trình duyệt nào hỗ trợ WebP?
Trước đây, một vấn đề với WebP là nó không được tất cả các trình duyệt web hỗ trợ. Chrome, Firefox, Edge và các trình duyệt dựa trên Chromium khác (như Opera) từ lâu đã hỗ trợ hình ảnh WebP.
Tuy nhiên, trình duyệt Safari của Apple đã là người duy nhất trước khi bổ sung hỗ trợ WebP trong Safari 14, được phát hành vào tháng 9 năm 2020.
Theo Caniuse , kể từ tháng 7 năm 2021, tất cả các trình duyệt web chính đều hỗ trợ hình ảnh WebP . Nhìn chung, Caniuse ước tính rằng 95% tất cả khách truy cập trên toàn cầu đang sử dụng trình duyệt web hỗ trợ định dạng hình ảnh WebP:
Nguồn
Có một lưu ý nhỏ với hỗ trợ mới được bổ sung của trình duyệt Safari cho hình ảnh WebP – nó chỉ áp dụng cho Safari phiên bản 14.0 trở lên. Ban đầu, chỉ những người dùng trên macOS 11 Big Sur trở lên mới có thể cài đặt Safari 14. Tuy nhiên, vấn đề này đã giảm bớt khi Apple đã phát hành Safari 14 trên các phiên bản macOS cũ hơn như Catalina và Mojave.
Tuy nhiên, bất kỳ người dùng macOS cũ nào chưa cập nhật lên Safari 14 sẽ không được hỗ trợ WebP trong trình duyệt Safari của họ.
Ngoài trục trặc nhỏ đó, những điểm khác duy nhất trong hỗ trợ gần như toàn cầu của WebP là Internet Explorer, mà Microsoft sẽ chính thức ngừng hỗ trợ kể từ tháng 8 năm 2021 và trình duyệt KaiOS, một hệ điều hành di động ít được biết đến hơn được sử dụng bởi một số điện thoại thông minh giá rẻ.
Về cơ bản, loại trừ một số trường hợp cạnh, WebP hiện được hỗ trợ trình duyệt web toàn cầu.
Cách sử dụng hình ảnh WebP trên trang web WordPress của bạn
Nhờ bản cập nhật gần đây cho WordPress, giờ đây bạn có thể tải trực tiếp hình ảnh WebP lên Thư viện phương tiện WordPress và chèn chúng vào nội dung của mình giống như cách bạn làm với các định dạng hình ảnh khác, chẳng hạn như sử dụng khối Hình ảnh hoặc một trong các khối thư viện.
Tuy nhiên, trước khi bạn có thể tải chúng lên, trước tiên bạn cần tạo một hình ảnh ở định dạng WebP. Vì vậy, chúng ta hãy bao gồm cả hai phần của câu đố!
Cách tạo hình ảnh WebP
Phần mềm chỉnh sửa ảnh của bạn có thể chưa lưu ảnh ở định dạng WebP, nhưng một số thì có. PixlrE chẳng hạn, cho phép bạn lưu hình ảnh dưới dạng WebP giống như cách bạn lưu chúng dưới dạng JPEG. Nếu trình chỉnh sửa hình ảnh yêu thích của bạn chưa có tính năng này, bạn có thể muốn tìm kiếm các tiện ích bổ sung hoặc tiện ích mở rộng cung cấp tính năng này, chẳng hạn như plugin WebPShop Photoshop miễn phí này của Google. Nếu không có tùy chọn nào trong số đó tồn tại cho trình chỉnh sửa hình ảnh của bạn, bạn không cần phải lo lắng. Thay vì tạo hình ảnh WebP từ đầu, bạn chỉ cần lấy một hình ảnh hiện có ở định dạng khác và chuyển đổi nó thành WebP.
Chuyển đổi hình ảnh sang định dạng WebP
Cách dễ nhất để chuyển đổi một hình ảnh (hoặc các hình ảnh) sang WebP là sử dụng một trong nhiều công cụ chuyển đổi đám mây. Với những trang web này, tất cả những gì bạn làm là tải lên hình ảnh ở định dạng ban đầu của chúng, nhấp vào nút và công cụ sẽ cho phép bạn tải xuống hình ảnh của mình ở định dạng WebP.
Một lựa chọn phổ biến là Convertio . Để sử dụng nó, bạn cần phải:
- Tải lên hình ảnh của bạn – bạn có thể tải lên tới 100 MB hình ảnh trong một lần.
- Chọn định dạng ban đầu của hình ảnh của bạn (ví dụ: JPG).
- Chọn định dạng đích (WebP).
Sau đó, công cụ sẽ nhắc bạn tải xuống phiên bản WebP của hình ảnh của bạn.
Cách tải hình ảnh WebP lên WordPress
Khi bạn có một hình ảnh ở định dạng WebP, bạn có thể tải nó lên trang web WordPress của mình giống như cách bạn làm với các định dạng hình ảnh khác như JPEG hoặc PNG.
Nếu bạn đang tạo nội dung trong trình chỉnh sửa WordPress, bạn có thể thêm một trong các khối hình ảnh và tải hình ảnh WebP lên khối đó.
Hoặc, bạn cũng có thể tải trực tiếp hình ảnh WebP lên Thư viện phương tiện WordPress. Để biết thêm về cách hoạt động, hãy xem hướng dẫn đầy đủ của chúng tôi về Thư viện phương tiện WordPress .
Cách Tự động hóa Hình ảnh WebP bằng Plugin Tối ưu hóa Hình ảnh
Nếu bạn đã tạo trang web của mình bằng các gói hỗ trợ plugin WordPress.com, bạn cũng có thể cài đặt một plugin WordPress để giúp bạn tự động hóa việc sử dụng hình ảnh WebP trên trang web của mình.
Có hai cách mà một plugin có thể giúp bạn với hình ảnh WebP:
Đầu tiên, plugin có thể đơn giản hóa quá trình chuyển đổi hình ảnh sang WebP bằng cách tự động chuyển đổi chúng khi bạn tải chúng lên trang web của mình.
Điều này rất tiện lợi vì nó có nghĩa là bạn vẫn có thể tìm hoặc tạo hình ảnh bằng các định dạng mà bạn quen thuộc hơn (như JPEG hoặc PNG). Khi bạn tải các tệp lên trang WordPress của mình, plugin sẽ tự động chuyển đổi chúng thành WebP.
Dựa trên sự tiện lợi đó, một plugin cũng có thể chuyển đổi hàng loạt tất cả các hình ảnh hiện có trên trang web của bạn sang định dạng WebP.
Thứ hai, một plugin tối ưu hóa hình ảnh có thể giúp xử lý <5% người dùng có thể không sử dụng trình duyệt hỗ trợ hình ảnh WebP. Về cơ bản, plugin cho phép bạn tự động cung cấp hình ảnh WebP cho khách truy cập có trình duyệt hỗ trợ WebP, đồng thời cung cấp định dạng hình ảnh gốc cho khách truy cập có trình duyệt không hỗ trợ WebP.
Lợi ích thứ hai này giờ đây ít quan trọng hơn khi WebP nhận được sự hỗ trợ rộng rãi như vậy, nhưng nó vẫn hữu ích để xử lý các trường hợp cạnh và đảm bảo rằng mọi khách truy cập đều nhìn thấy một hình ảnh đang hoạt động.
Các plugin tối ưu hóa hình ảnh WordPress hỗ trợ WebP
Có rất nhiều plugin tối ưu hóa hình ảnh WordPress khác nhau đi kèm với hỗ trợ WebP. Thông thường, các plugin này miễn phí cho một lượng sử dụng nhất định mỗi tháng ( giả sử tối ưu hóa tối đa 200 hình ảnh ). Nếu bạn cần tối ưu hóa nhiều hình ảnh hơn mức cho phép trong gói hỗ trợ plugin, bạn sẽ cần mua gói tín dụng một lần hoặc đăng ký gói hàng tháng.
Nhiều trang web sẽ ổn với các gói hỗ trợ plugin. Nếu bạn thực sự cần các gói hỗ trợ plugin, thông thường bạn sẽ chỉ nhìn vào ~ $ 5 mỗi tháng hoặc lâu hơn.
Dưới đây là một số tùy chọn phổ biến:
- ShortPixel
- Tưởng tượng
- Trình tối ưu hóa hình ảnh EWWW
- Công cụ chuyển đổi WebP cho Phương tiện
Bạn không chắc chắn về cách bắt đầu sử dụng các plugin này? Đây là hướng dẫn chỉ cho bạn cách cài đặt plugin trên WordPress.com .
Sự kết luận
Định dạng hình ảnh WebP là một cách tuyệt vời để giảm kích thước hình ảnh trên trang WordPress của bạn mà không làm thay đổi chất lượng của chúng. Bằng cách thu nhỏ kích thước hình ảnh, bạn có thể làm cho trang web của mình tải nhanh hơn và tạo trải nghiệm tốt hơn cho khách truy cập trang web của bạn.
Kể từ tháng 7 năm 2021, WordPress hiện cung cấp hỗ trợ hình ảnh WebP tích hợp để bạn có thể tải hình ảnh WebP trực tiếp lên trang web của mình và chèn chúng vào nội dung của bạn giống như các định dạng hình ảnh khác.
Nếu hình ảnh hiện có của bạn sử dụng định dạng tệp như JPEG hoặc PNG, bạn có thể sử dụng công cụ chuyển đổi trực tuyến để chuyển đổi nó sang WebP trước khi tải nó lên WordPress.
Hoặc, nếu bạn đã tạo trang web của mình bằng các gói hỗ trợ plugin WordPress.com, bạn cũng có thể sử dụng một plugin sẽ tự động chuyển đổi hình ảnh sang WebP khi bạn tải chúng lên trang web của mình.
Nếu bạn đã sẵn sàng bắt đầu với WordPress và WebP, hãy tạo trang web tải nhanh của bạn với WordPress.com ngay hôm nay !
