Nén ảnh cho website tải nhanh mà vẫn nét, nhờ AI Agent

Anh/Chị đăng một sản phẩm mới, ảnh chụp bằng điện thoại đời mới nặng vài MB mỗi tấm, mỗi sản phẩm lại 6 đến 8 ảnh. Vài trăm sản phẩm sau, website bắt đầu tải chậm, hosting báo gần đầy dung lượng, còn khách dùng 4G thì chờ mãi ảnh mới hiện. Bài này hướng dẫn cách nhờ AI Agent tạo công cụ nén ảnh hàng loạt: ảnh nhẹ đi đáng kể, mắt thường gần như không thấy khác biệt, và Anh/Chị kiểm soát được mức nén.

Đây là một bài trong chuỗi Agentic Working của EGANY: mỗi bài lấy một việc lặp đi lặp lại và chỉ cách để AI Agent làm giúp, theo cách người không rành kỹ thuật cũng làm theo được.

Vấn đề: ảnh quá nặng làm website chậm và tốn chỗ

Ảnh thường là phần nặng nhất của một trang bán hàng. Ảnh từ điện thoại hoặc máy ảnh thường được chụp ở độ phân giải rất cao, trong khi trên website, khung hiển thị chỉ cần một phần nhỏ của độ phân giải đó. Phần dư ra không làm ảnh nét hơn, chỉ làm file nặng hơn.

Hậu quả quen thuộc với người bán hàng online:

• Trang danh mục có nhiều ảnh tải rất lâu, nhất là trên điện thoại dùng mạng di động.
• Khách chờ lâu thì dễ rời trang. Nhiều nghiên cứu trong ngành cho thấy trang chậm làm tăng tỉ lệ khách bỏ đi, tuy mức ảnh hưởng cụ thể khác nhau tùy từng website và từng ngành, nên EGANY không đưa một con số chung nào ở đây. Anh/Chị có thể tự đo trước và sau khi nén trên chính website của mình.
• Dung lượng lưu trữ và băng thông hosting tăng dần, chi phí tăng theo.
• Công cụ nén trực tuyến thường giới hạn số ảnh mỗi lần (ví dụ 20 ảnh), phải tải lên rồi tải xuống từng đợt, mất cả buổi cho vài trăm ảnh.

Điểm cần nhớ: giảm dung lượng ảnh là một trong những việc rẻ và hiệu quả nhất để website nhanh hơn, vì không phải đổi hosting hay sửa giao diện.

Giải pháp: công cụ nén chạy trên máy, nén cả thư mục một lần

Anh/Chị nhờ AI Agent (Claude, ChatGPT hay Gemini) viết một công cụ nhỏ chạy trên máy tính của mình. Công cụ làm những việc sau:

• Nén cả thư mục, kể cả thư mục con. Kho ảnh chia theo danh mục sản phẩm vẫn xử lý được trong một lượt.
• Cho Anh/Chị chọn mức chất lượng. Một thanh trượt: kéo cao thì ảnh nét hơn nhưng nặng hơn, kéo thấp thì nhẹ hơn nhưng có thể mờ. Mức khoảng 75 đến 80 trên 100 thường là điểm cân bằng tốt.
• Thu nhỏ ảnh quá lớn. Nếu ảnh rộng hơn mức website cần (ví dụ trên 2000 pixel), công cụ thu nhỏ về mức hợp lý, giống như in một tấm ảnh khổ A0 mà chỉ cần dán vào khung A5.
• Bỏ thông tin ẩn không cần thiết. Mỗi ảnh chụp mang theo nhiều thông tin kèm theo như thiết bị chụp, giờ chụp, đôi khi cả vị trí. Công cụ có thể bỏ bớt, vừa nhẹ hơn vừa riêng tư hơn.
• Báo tổng dung lượng đã tiết kiệm. Ví dụ "Đã giảm từ 2,1 GB xuống còn 400 MB". Nhìn thấy kết quả cụ thể rất có động lực.
• Giữ nguyên ảnh gốc. Ảnh nén lưu ra thư mục khác.

Workflow gốc trên AgenticWorking.io mô tả có thể giảm dung lượng ảnh rất nhiều mà mắt thường khó phân biệt. Mức giảm thực tế phụ thuộc vào ảnh của Anh/Chị: ảnh chụp thẳng từ điện thoại thường giảm nhiều, ảnh đã được nén sẵn thì giảm ít hơn.

Chuẩn bị trước khi bắt đầu

Anh/Chị cần:

1. Một thư mục ảnh cần nén, đặt tên là input. Có thể chứa thư mục con.
2. Một AI Agent chạy được mã trên máy tính, như Claude Code. Anh/Chị nói tiếng Việt, AI tự cài các thành phần cần thiết và chạy luôn. Nếu chỉ dùng ChatGPT hoặc Gemini trên trình duyệt, vẫn làm được với vài bước cài đặt theo hướng dẫn.
3. Số liệu "trước" của website (nếu muốn đo): mở một trang danh mục nặng ảnh và ghi lại cảm giác hoặc thời gian tải, để so với sau khi thay ảnh mới.

Mẹo: thử trước với 20 ảnh, gồm cả ảnh sản phẩm có nhiều chi tiết (vải hoa văn, da, đồ trang sức) vì đó là loại ảnh dễ lộ lỗi nén nhất.

Bước 1: giao việc cho AI bằng một đoạn mô tả rõ ràng

Anh/Chị dán đoạn yêu cầu sau vào AI Agent. Có thể đổi các con số theo nhu cầu.

Tôi có thư mục "input" chứa nhiều ảnh sản phẩm (JPG, PNG), có cả thư mục con.
Hãy viết và chạy một ứng dụng bằng Python trên Windows để nén ảnh hàng loạt,
dùng thư viện Pillow, có giao diện đơn giản cho người không rành kỹ thuật:

1. Có nút chọn thư mục ảnh gốc và thư mục lưu kết quả.
   Giữ nguyên cấu trúc thư mục con ở nơi lưu kết quả.
   Tuyệt đối không ghi đè hay sửa ảnh gốc.
2. Có thanh trượt chất lượng từ 1 đến 100, mặc định 80.
3. Có tùy chọn: "Giữ nguyên kích thước" hoặc
   "Thu nhỏ nếu chiều rộng lớn hơn ... pixel" (mặc định 2000, giữ đúng tỉ lệ).
4. Có tùy chọn "Bỏ thông tin ẩn của ảnh" (mặc định bật).
5. Có tùy chọn "Nén sao cho mỗi ảnh nhẹ hơn ... KB" (mặc định tắt).
   Khi bật, tự giảm chất lượng dần cho đến khi đạt mức đó,
   nhưng không giảm dưới chất lượng 60 để tránh ảnh bị vỡ.
6. Có thanh tiến độ. Ảnh nào lỗi thì ghi lại và làm tiếp.
7. Khi xong, hiện thông báo tổng dung lượng trước và sau khi nén,
   và đã tiết kiệm được bao nhiêu phần trăm.
8. Tạo sẵn file "run.bat" để bấm hai lần là chạy và tự cài thư viện còn thiếu.

Bối cảnh: tôi quản lý website bán hàng, cần ảnh nhẹ để trang tải nhanh
nhưng ảnh sản phẩm vẫn phải nét.

Vì sao viết như vậy:

• "Không ghi đè ảnh gốc, giữ cấu trúc thư mục" cho Anh/Chị đường lui và giúp thay ảnh mới lên website đúng chỗ.
• "Không giảm dưới chất lượng 60" là hàng rào bảo vệ. Nếu chỉ nói "nén cho dưới 200 KB", AI có thể bóp chất lượng đến mức ảnh vỡ hạt.
• "Thu nhỏ nếu rộng hơn 2000 pixel" nhắm đúng nguyên nhân phổ biến nhất khiến ảnh nặng: ảnh to hơn nhiều so với nhu cầu hiển thị.
• Báo tổng dung lượng tiết kiệm giúp Anh/Chị có con số thật để báo cáo cho đội.

Bước 2: chạy thử và so sánh mắt thường

Chạy thử với 20 ảnh rồi kiểm tra:

• Mở ảnh gốc và ảnh nén cạnh nhau, phóng to đến 100% để xem. Có thấy vỡ hạt, loang màu quanh chữ hoặc viền sản phẩm không?
• Ảnh có chữ (nhãn mác, bao bì) còn đọc rõ không?
• Ảnh có màu chuyển dần (da, nền gradient) có bị sọc không?
• Tổng dung lượng giảm bao nhiêu? Nếu giảm ít, có thể ảnh đã được nén sẵn, đừng ép thêm.

Nếu chưa ưng, nói lại với AI bằng lời thường:

• "Ảnh nhìn hơi mờ, đặt chất lượng mặc định lên 85."
• "Cho phép nén riêng nhóm ảnh banner với chất lượng cao hơn nhóm ảnh sản phẩm."
• "Thêm xuất ảnh sang định dạng WebP, một định dạng ảnh web hiện đại thường nhẹ hơn JPG, nhưng vẫn giữ bản JPG để dùng khi cần."

Thường chỉ cần một đến hai lượt chỉnh là đạt mức cân bằng phù hợp với ảnh của Anh/Chị.

Bước 3: chạy cho toàn bộ kho ảnh và thay lên website

Chép toàn bộ ảnh vào thư mục input, bấm bắt đầu. Xong việc, Anh/Chị có thư mục ảnh đã nén cùng cấu trúc, kèm thông báo tổng dung lượng tiết kiệm. Sau đó:

1. Tải ảnh mới lên website theo đúng vị trí (giữ nguyên tên file sẽ giúp thay nhanh).
2. Mở lại một trang danh mục nặng ảnh trên điện thoại và so sánh với cảm giác trước đó.
3. Lưu bộ ảnh gốc ở nơi riêng, phòng khi cần in ấn hoặc làm banner lớn.

Lưu ý nhỏ: nếu website của Anh/Chị có công cụ tự nén ảnh khi tải lên (nhiều nền tảng có), hãy hỏi người quản trị trước để tránh nén hai lần làm ảnh xuống chất lượng.

Bước 4 (tùy chọn): biến thành công cụ dùng lâu dài cho cả đội

Nếu bộ phận nội dung thường xuyên tải ảnh mới lên, Anh/Chị có thể nhờ AI nâng cấp thành ứng dụng có file cài đặt: kéo thả thư mục vào, bấm nút, nhận ảnh đã nén. Có thể thêm cài đặt sẵn theo loại ảnh (ảnh sản phẩm, ảnh banner, ảnh bài viết) để nhân viên không phải nghĩ đến con số chất lượng.

Khi đó, "ảnh nhẹ" trở thành một bước mặc định trước khi đăng, thay vì sự cố mà mỗi lần chậm website mới nhớ đến.

Kết quả Anh/Chị nhận được

• Ảnh nhẹ hơn đáng kể: mức giảm tùy ảnh, nhưng với ảnh chụp thẳng từ điện thoại thường rất rõ rệt.
• Trang tải nhanh hơn: đặc biệt dễ thấy trên điện thoại dùng mạng di động. Tốc độ trang là một yếu tố liên quan đến trải nghiệm mua sắm, nên đây là việc đáng làm, dù mức tác động lên đơn hàng cần Anh/Chị tự đo trên website của mình.
• Tiết kiệm lưu trữ và băng thông: hosting nhẹ gánh hơn.
• Không giới hạn số lượng, không tải ảnh lên dịch vụ ngoài.
• Có số liệu cụ thể: biết đã tiết kiệm bao nhiêu, dễ báo cáo.

Mở rộng sang các việc tương tự

Cùng cách làm này, Anh/Chị có thể nhờ AI Agent đổi kích thước ảnh về khung chuẩn, xóa nền ảnh sản phẩm, gắn logo hàng loạt, đổi tên ảnh theo mã sản phẩm hoặc chuyển ảnh iPhone sang JPG.

Các workflow này được EGANY tập hợp trong Agentic Working Kit. Nếu Anh/Chị muốn đi xa hơn với tốc độ và chuyển đổi của cả website bán hàng, Ecommerce CRO Kit hướng dẫn tối ưu website cùng AI Agent.

Bản gốc của workflow này có trên AgenticWorking.io.

Bắt đầu từ việc nhỏ nhất

Hãy chọn trang danh mục chậm nhất của website, nén ảnh của riêng trang đó, rồi so sánh trước và sau. Khi thấy hiệu quả bằng mắt thường, việc mở rộng cho cả kho ảnh sẽ dễ thuyết phục cả đội hơn.

Nếu Anh/Chị muốn có người cùng xác định việc nào nên giao cho AI Agent trước và cách đưa vào vận hành cho cả đội, có thể đặt lịch tư vấn 1-1 với EGANY.