rbuchberger/jekyll_picture_tag

⚡ Responsive images cho Jekyll, tự động hoàn toàn

Responsive images đúng cách — không cần markup rườm rà, không cần tổ chức ảnh thủ công.

jekyll_picture_tag là một plugin Jekyll giải quyết bài toán ảnh responsive — vốn vừa nhàm chán vừa dễ sai khi phải phục vụ nhiều kích thước, định dạng và thiết bị khác nhau. Plugin tự động sinh các bản ảnh đã crop, resize và chuyển định dạng, đồng thời xây dựng markup HTML5 phù hợp. Chỉ cần một YAML cấu hình đơn giản và một template tag là xong.

Phiên bản 2.0 chuyển từ ImageMagick sang libvips, giúp tốc độ xử lý tăng đáng kể. Sau đó 2.1.3 bổ sung hỗ trợ Windows bằng cách tự động quyết định gọi magick hay convert tùy hệ điều hành.

✨ Điểm nổi bật

• Tự động resize/crop: Sinh hàng loạt bản ảnh kích thước và tỷ lệ khác nhau chỉ từ ảnh gốc.
• Chuyển định dạng tự động: Hỗ trợ WebP, AVIF, JP2 — giảm dung lượng mà vẫn giữ chất lượng.
• libvips backend: Nhanh hơn nhiều so với ImageMagick, đồng thời vẫn fallback khi cần.
• Smartcrop: Dùng hàm interestingness của libvips để tự động giữ phần quan trọng nhất của ảnh khi crop.
• Minimal config: Cấu hình dễ hoặc không cần cấu hình gì — plugin tự đặt mặc định hợp lý.
• Presets & media queries: Có sẵn bộ preset và truy vấn media dưới tiền tố jpt-.
• Art direction: Không chỉ resize — có thể dùng ảnh hoàn toàn khác cho mobile và desktop.
• Lighthouse-friendly: Giúp điểm hiệu năng trang web đạt tốt hơn.

💡 Vì sao đáng chú ý

Bài toán responsive images thật sự rất nhàm chán: viết nhiều thẻ <picture>, sinh đủ kích thước, organize ảnh đúng cách, chọn định dạng phù hợp cho từng trình duyệt. jekyll_picture_tag tự động toàn bộ workflow đó — từ ảnh gốc đến markup hoàn chỉnh — chỉ với một template tag và ít YAML.

Việc chuyển sang libvips từ phiên bản 2.0 là bước nhảy hiệu năng rõ rệt. Ngoài ra, smartcrop thông minh giúp tránh tình trạng crop mất chi tiết quan trọng — điều mà các cách crop theo tỷ lệ cố định thường gặp.

Phù hợp cho bất kỳ blog Jekyll nào muốn tối ưu ảnh mà không muốn dành thời gian xử lý thủ công.

---

#Jekyll #ResponsiveImages #Ruby #WebP #AVIF #OpenSource #TiniX