Hướng dẫn dùng ảnh webp để tối ưu website Ghost

Hướng dẫn cách dùng ảnh webp khi viết bài trên Ghost để tối ưu tốc độ trang.

Cường Trần
Cường Trần
4 phút đọc

Ghost chưa bao giờ cho phép bạn dùng ảnh webp và cũng không đề cập đến định dạng ảnh này trong toàn bộ tài liệu hướng dẫn.

Sự thật là bạn vẫn có thể dùng định dạng ảnh này cho Ghost blog của bạn rất dễ dàng theo cách bạn không ngờ tới 😉 (không cần tùy chỉnh cấu hình web server).

WebP là gì?

Webp là định dạng ảnh phổ biến bên cạnh PNG và JPG. Chrome, Safari và Firefox đều hỗ trợ định dạng này, kể cả trên trình duyệt di động.

93.33% trình duyệt hỗ trợ WebP
93.33% trình duyệt hỗ trợ WebP

Tóm lại, WebP giúp ảnh có kích thước siêu nhỏ nhưng vẫn giữ được chất lượng ảnh, không bị bể ảnh và gần như mọi trình duyệt web đều hiển thị được. Rất tuyệt vời!

Tối ưu website Ghost với định dạng ảnh WebP

Ảnh là yếu tố không thể thiếu của các trang web hiện đại ngày nay, blog cũng vậy và nó thường chiếm 80-90% "cân nặng" của một bài viết.

Tối ưu ảnh luôn là giải pháp siêu hữu hiệu bạn phải làm khi muốn tối ưu blog của mình.

Ảnh gốc: 1440x960px - (1,292 KB gần 1.3 MB)
Ảnh gốc: 1440x960px - (1,292 KB gần 1.3 MB)
Ảnh đã chuyển WebP: 1440x960px - Nén 85% - (108 KB) --> Giảm 97%
Ảnh đã chuyển WebP: 1440x960px - Nén 85% - (108 KB) --> Giảm 97% 😏

Theo lý thuyết, không phải chỉ có định dạng ảnh, bạn cần tối ưu rất nhiều thứ liên quan đến ảnh cho một website thông thường như:

  1. Kích thước độ phân giải ảnh (resize ảnh)
  2. Tối ưu ảnh cho di động
  3. Thiết lập tải ảnh trễ lazyload
  4. Cache của ảnh
  5. Làm sạch ảnh (xoá Exif)

Và rất khoẻ khi Ghost đã tự động gần hết các việc trên cho bạn, ghost tự động nén ảnh (80%) và resize ảnh cũng như tạo thumbnail cho hiển thị trên thiết bị di động.

Gần đây nhất Ghost 4 còn hỗ trợ mặc định native lazyload cho ảnh.

Ghost 4: Cập nhật lớn và các thay đổi quan trọng
Ghost 4 chính thức ra mắt sau gần 1 năm beta. Hãy cùng tìm hiểu một số thay đổi đáng chú ý ở phiên bản này.

Chuyển đổi ảnh bạn sang webp và dùng cho Ghost

Có rất nhiều cách để chuyển đổi ảnh sang webp, nhưng cách tôi thích nhất, hoạt động chuẩn nhất, an toàn nhất và nhanh nhất đó là dùng Squoosh App của Google.

Bạn chỉ cần kéo ảnh vào và tùy chọn thiết lập bao gồm resize và chuyển đổi định dạng. Tất cả quy trình chỉ tốn 1 phút của bạn.

Bạn tải ảnh webp về máy tính và đổi đuôi webp thành png.

Ví dụ: filedown.webp đổi thành filedown.png.

Giờ bạn có thể tải lên Ghost mà không gặp bất cứ vấn đề gì 😘 kể cả gửi email cũng hiển thị chuẩn (đã test).

Cách này xem như là "webp fake" 😀 .

Lời kết...

Hiện định dạng AVIF sẽ thay thế webp trong tương lai... nhưng còn rất xa😂 nên bạn cứ yên tâm dùng webp đã cực tốt ở hiện tại.

Định dạng webp2 vẫn đang phát triển nhưng chưa biết tương lai như thế nào.

Thực tế trình duyệt sẽ xem ảnh "webp fake" của bạn là webp, nhưng ghost coi nó là png. Do gần như mọi trình duyệt đều hỗ trợ webp nên bạn sẽ không gặp bất cứ vấn đề hiển thị nào.

Hi vọng mẹo này sẽ hữu ích cho bạn👍

Hướng Dẫn

Bạn có thể quan tâm

Viết bài trên Google Docs, xuất bản trên Ghost

Hướng dẫn cách viết blog trên Google Docs và xuất bản trên Ghost CMS.

Viết bài trên Google Docs, xuất bản trên Ghost

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Cáchtạo hiệu ứng lightbox cho video Youtube đơn giản bằng Fanyapps cho Ghost.

Hiệu ứng lightbox video Youtube cho Ghost bằng Fancyapps

Thêm hiệu ứng lightbox cho Ghost siêu đơn giản với Fluidbox

Cách đơn giản để thêm hiệu ứng lightbox cho ảnh, vừa nhanh vừa đẹp.

Thêm hiệu ứng Lightbox cho ảnh siêu đơn giản cho Ghost
Cường Trần

Cường Trần

Cường chuyên viết về giải pháp liên quan đến WordPress và Ghost, là một How-to blogger thực chiến.

bởi @CườngTrần