Hướng dẫn sử dụng ảnh định dạng WEBP trong hệ thống website Vtech CMS

File WEBP là một hình ảnh được lưu trong định dạng hình ảnh raster của WebP do Google phát triển cho đồ họa web. Nó được thiết kế để giảm kích thước tệp hình ảnh so với nén JPEG tiêu chuẩn trong khi vẫn duy trì chất lượng tương tự hoặc cao hơn. Các tệp WEBP cho phép hình ảnh được tải xuống nhanh hơn giúp website được tăng tỷ lệ load trang.

Hiện nay, WebP đang dẫn đầu trong cuộc chiến cạnh tranh định dạng hình ảnh thế hệ tiếp theo (sau thế hệ JPG, PNG, hay JPEG, GIF). Điểm mạnh của ảnh WebP, đó chính là khả năng nén là khả năng mã hóa dữ liệu của tệp ảnh sao cho kích thước nhẹ hơn ảnh gốc nhưng vẫn giữ được chất lượng tốt nhất có thể.

Bây giờ chúng ta tiến hành các bước đơn giản nhất để có thể sử dụng cập nhật mới nhất trong website của mình nha với 3 bước đơn giản.

Bước 1: Chuyển đổi dạng ảnh JPG hoặc PNG sang định dạng ảnh Webp

Để chuyển đổi ảnh đang ở định dạng JPG hoặc PNG chúng ta cần chuẩn bị 1 ảnh có sẵn. Sau đó chọn 1 trong những công cụ chuyển đổi online để thực hiện việc chuyển đổi:

• Cloud Convert’s WebP Converter Chuyển đổi ngay
• EZGIF’s Online JPG to WebP Converter Chuyển đổi ngay
• Convertio’s Image Converter Chuyển đổi ngay
• WebP Converter Chuyển đổi ngay

Mở 1 trong các trang web hỗ trõ chuyển đổi định dạng như trên, sau đó chúng ta kéo thả hoặc chọn tập tin ảnh muốn chuyển định dạng vào khu vực quy định của trang web và chọn định dạng cần chuyển đổi "WEBP" => nhấn vào "Convert" để chuyển đổi và lưu file chuyển đổi với đuôi định dạng ảnh .webp về máy tính.

>>> Đọc thêm: Định dạng ảnh WebP là gì ?

Bước 2: Sử dụng định dạng ảnh Webp trong hệ thống website cho Vtech Group cung cấp trên nền tảng Vtech CMS

Mở giao diện quản trị website của bạn và login vào khu vực quản trị (Hình 1)

Bạn có thể sử dụng định dạng ảnh Webp trong khu vực soạn thảo nội dung (CKEDITOR) tại các tính năng của website:

• Khu vực soan thảo nội dung cho khối tính năng tùy của tính năng [Quản lý khối nội dung] => Chọn tính năng [Quản lý khối nội dung] => chọn Tạo mới => Tại khu vực "Cài đặt chức năng" chọn loại khối "Hiển thị nội dung tùy biến" => bạn có thể soạn thảo nội dung và tải ảnh có định dạng .webp bình thường như bạn sử dụng ảnh với đuôi .jpg hoặc .png
• Khu vực soạn thảo văn bản cho tính năng [Bài viết] => chọn tính năng [Quản lý bài viết] => chọn [Bài viết] => chọn tạo mới hoặc sửa Bài viết => tại khu vực soạn thảo nội dung và tải ảnh có định dạng .webp bình thường như bạn sử dụng ảnh với đuôi .jpg hoặc .png
• Khu vực soạn thảo văn bản cho tính năng [Sản phẩm] => chọn tính năng [Quản lý bán hàng] => chọn [Sản phẩm] => chọn tạo mới hoặc sửa sản phẩm => Tại khu vực "Bài viết chi tiết" - phần Giới thiệu và Thông số => bạn soạn thảo nội dung và tải ảnh có định dạng .webp bình thường như bạn sử dụng ảnh với đuôi .jpg hoặc .png

Soạn thảo trong Tính năng Quản lý khối nội dung

Soạn thảo trong Tính năng Bài viết

Soạn thảo trong tính năng sản phẩm

Bước 3: Thêm hình ảnh với dịnh dạng .Webp trong khu vực soạn thảo nội dung

Trước khi thực hiện thêm ảnh/hình có đinh dạng .webp, các bạn nhớ chuẩn bị trước hình đã chuyển đổi trong bước 1

Mở khu vực soạn thảo nội dung để tiến hành thêm ảnh định dạng .webp vào nội dung. thực hiện việc chèn / thêm ảnh định dạng .webp giống như là thêm ảnh với định dạng JPG hoặc PNG. Lưu ý do hệ thống chưa hoàn thiện nên khi bạn tải ảnh định dạng .webp vào hệ thống chúng ta sẽ không xem được hình như định dạng JPG hoặc PNG trong khu vực tải ảnh lên (như hình) nên các bạn phải chú ý đến tên của ảnh đã tải lên để chọn cho đúng ảnh cẩn chuyển.

Ảnh có định dạng .JPG và .WEBP

Thêm ảnh với định dạng WEBP vào hệ thống bài viết

Thiết lập các thông số cho ảnh WEBP như ảnh JPG

Thêm thành công ảnh đinh dạng .WEBP vào nội dung bài viết

Sau khi thêm ảnh vào nội dung bài viết (giống như các định dạng ảnh khác), sau đó tiến hành lưu lại bài viết và chúng ta có thể kiểm tra tốc đọ tải ảnh do định dạng .WEBP mang lại so với định dạng hiện tại (JPG hoặc PNG)

Lưu ý: Hiện nay trình duyệt Safari của Apple chưa hỗ trợ hiện thị ảnh với định dạng .WEBP, nên khi người dùng xem trên các trình duyệt hình có định dạng webp sẽ không hiển thị. Trong tương lai không xa có thể tất cả các trình duyệt sẽ tiến hành nâng cấp và hỗ trợ hết cho việc hiển thị với định dạng WEBP.

Chúc các bạn thực hiện thành công và trải nghiệm sự ưu việt khi sử dụng chuẩn định dạng mới do Google đề xuất.