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.
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.

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.


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ư:
- Kích thước độ phân giải ảnh (resize ảnh)
- Tối ưu ảnh cho di động
- Thiết lập tải ảnh trễ lazyload
- Cache của ảnh
- 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.
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👍
Cách sử dụng Ghost Comment đúng cách - Hướng dẫn chi tiết
Ghost có tính năng bình luận tích hợp, được gọi là ghost comment, tính năng này được thêm vào giúp ghost hoàn thiện hơn tính năng thành viên vốn rất mạnh của ghost.
Cách tạo email tên miền riêng miễn phí với Cloudflare từ A-Z
Hướng dẫn chi tiết cách tạo email tên miền riêng miễn phí để gửi và nhận email chuyên nghiệp bằng Cloudflare Email Route.
Cung cấp tên website Ghost cho Google tìm kiếm
Hướng dẫn khai báo tên website cho Google tìm kiếm với ghost CMS.

Bản tin ghostFam
Đăng ký nhận bản tin để nhận các bài viết mới nhất tự động vào email của bạn hàng tuần.