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:

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ì ?

Chuyển đổi dịnh dạng ảnh Webp qua website trực tuyến

Chọn / Upload (định dạng JPG hoặc PNG) ảnh cần chuyển đổi lên website trực tuyến

Chuyển đổi dịnh dạng ảnh Webp qua website trực tuyến

Chọn định dạng ảnh WEBP và tiến hành chuyển đổi

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.

Có thể bạn sẽ quan tâm

Cách trỏ tên miền về hệ thống website Vtech CMS

Website của bạn để được vận hành dưới tên miền mang thương hiệu hay tên riêng của dự án, cửa hàng, doanh nghiệp, cá nhân ... Sau khi đăng ký sở hữu tên miền, các bạn tiến hành các bước cấu hình như sau để trỏ tên miền bạn sở hữu về hệ thống server và kết nối với hệ thống website Vtech CMS.

Thay đổi các menu tại vị trí Hamburger cho giao diện Vtech Clearly BS3

Hướng dẫn thực hiện thiết lập Thêm - Xóa - Sửa các menu tại vị trí Hamburger trong giao diện Vtech Clearly BS3, nhóm tính năng "Trình bày" webiste do VTECH CMS cung cấp.

Hướng dẫn đăng Biểu tượng Favicon cho website

Hướng dẫn đăng biểu tượng Favicon cho website giúp gia tăng hiện diện thương hiệu và tạo sự khác biệt cho website

Hướng dẫn cấu hình tính năng bài viết Website VTECH CMS

Để dễ dàng thiết lập đồng bộ và thiết kế kích thước ảnh phù hợp cho các nội dung bài viết bên trong hệ thống, bạn cần thiết lập cấu hình bài viết nhằm đảm bảo tính thống nhất trong các kích thước và phương thức thể hiện hình ảnh trong các nội dung bài viết.

Cách cấu hình SMTP trong hệ thống website Vtech CMS

Thiết lập này cho phép cấu hình phương thức chứng thực SMTP mail gateway, được dùng cho những tác vụ liên quan đến việc gửi mail như khi có đơn hàng mới, phản hồi liên hệ... Nếu bạn không thiết lập SMTP sẽ dẫn tới lỗi cho website khi khách hàng thực hiện thao tác trên web của bạn như: đặt đơn hàng mới, liên hệ, thiết lập quên mật khẩu.

Cách thiết lập mật khẩu ứng dụng cho email

Việc thiết lập mật khẩu ứng dụng cho email để tránh việc ảnh hưởng đến mật khẩu của email khi khai báo sử dụng cho các nền tảng ứng dụng bên thứ 3 như là khai cấp quyền sử dụng cổng email gửi đi trong SMTP mail Gate của website ...

Favicon là gì ? Cách tạo Favicon cho website

Favicon là một biểu tượng nhỏ đại diện cho website được hiển thị ở phía góc trên cùng của tab trình duyệt ứng với địa chỉ của trang web như một logo thu nhỏ với kích thước 16x16 pixels