Tại sao lời khuyên "Tối ưu hóa hình ảnh" lại thiếu sót và cách Image Audit giải quyết vấn đề

Rất nhiều nhà sáng lập khi nghe lời khuyên "tối ưu hóa hình ảnh" thường không thực sự hiểu điều đó có nghĩa gì trong thực tế.

Vấn đề thường không nằm ở mã code, mà ở các quyết định về tệp tin bị bỏ quên khi khởi chạy dự án: sai định dạng, sai kích thước, xuất bản trùng lặp hoặc hình ảnh lớn (hero image) quá nặng. Tôi liên tục gặp phải tình trạng này ở nhiều dự án khác nhau với quy trình dọn dẹp lặp đi lặp lại: tìm các hình ảnh phình to, xác định cái nào an toàn để chuyển đổi, cái nào cần xem xét thủ công và cái nào tuyệt đối không được đụng vào.

Vì vậy, tôi đã biến quy trình này thành một kỹ năng (skill) của Claude Code tên là Image Audit.

Image Audit hoạt động như thế nào?

Kỹ năng này thực hiện hai quy trình kiểm toán chính:

• Kiểm tra kho mã nguồn (Repo audit): Công cụ sẽ duyệt qua codebase để tìm các tệp hình ảnh như PNG, JPG, v.v. Với mỗi tệp, nó kiểm tra dung lượng, định dạng và cách hình ảnh được tham chiếu trong mã. Bất kỳ tệp nào vượt quá 500KB sẽ được gắn cờ và hệ thống sẽ xác định những hình ảnh có thể chuyển đổi an toàn sang WebP.
• Kiểm tra Supabase (Supabase audit): Nếu bạn sử dụng bucket lưu trữ của Supabase, công cụ cũng sẽ quét qua đó. Các kiểm tra tương tự được áp dụng: định dạng, kích thước, bản sao và xem hình ảnh có thực sự được tham chiếu ở đâu không.

Sau cả hai lần kiểm tra, bạn sẽ nhận được một kế hoạch chuyển đổi thay vì một danh sách các lệnh để chạy mù quáng. Kế hoạch này phân loại rõ ràng:

• Mục an toàn để chuyển sang WebP (Safe WebP wins): Những hình ảnh có thể chuyển đổi mà không gặp rủi ro.
• Mục cần xem xét thủ công (Manual review items): Ảnh chụp màn hình, logo, tài sản trong suốt (transparent assets), thành phần giao diện (UI elements).
• Mục không nên đụng vào (Leave-alone items): Những tệp đã được tối ưu hóa hoặc quá rủi ro để can thiệp.

Tại sao cần kiểm toán trước khi tối ưu hóa?

Cách tiếp cận hiển nhiên là chỉ cần chuyển mọi thứ sang WebP và coi như xong. Tuy nhiên, làm như vậy sẽ phá hỏng trải nghiệm người dùng.

Ảnh chụp màn hình chứa văn bản sẽ bị mờ. Logo có nền trong suốt sẽ mất chất lượng. Các tài sản giao diện (UI assets) với viền pixel chính xác sẽ bị hiện tượng tạo răng cưa (artifacts). Các hình ảnh lớn được xuất khẩu cẩn thận với kích thước cụ thể có thể bị thay đổi kích thước sai lệch.

Tôi đã cố tình thiết kế công cụ này theo hướng bảo thủ. Thà có một công cụ mà mọi người tin tưởng hơn là một "bộ tối ưu hóa" âm thầm làm hỏng các tài sản kỹ thuật số. Kỹ năng này sẽ kiểm tra các tham chiếu trước khi thay đổi bất cứ thứ gì. Nếu một hình ảnh được nhập (import) trong mã của bạn, nó sẽ cập nhật cả các tham chiếu đó. Nếu không thể xác minh chuỗi tham chiếu, nó sẽ đưa hình ảnh vào danh sách xem xét thủ công thay vì đoán mò.

Cài đặt

Bạn có thể yêu cầu tác nhân lập trình (coding agent) cài đặt nó bằng lệnh sau:

npx image-audit-skill install --claude

Hoặc lấy trực tiếp từ kho lưu trữ: github.com/Saamael/image-audit-skill

Cách hoạt động

Phiên bản hiện tại hỗ trợ lưu trữ Supabase ngay lập tức, nhưng khái niệm này rất linh hoạt và có thể áp dụng cho các nền tảng khác. Ý tưởng rất đơn giản: tìm những hình ảnh đang làm giảm hiệu suất của bạn, chuyển đổi chúng sang định dạng được tối ưu hóa và để những hình ảnh rủi ro yên nghỉ.