11 — Upload & tối ưu hình ảnh

Hình ảnh chiếm phần lớn dung lượng trang và ảnh hưởng trực tiếp đến tốc độ tải + điểm SEO. Tài liệu này tổng hợp quy tắc ảnh của Mantis Tech Web.

1. Các cách upload ảnh

1.1. Qua Inline Editor (khuyến nghị cho ảnh trong block)

• Click vào ảnh trên trang → chọn file → hệ thống tự upload vào /files/ và gắn vào block.
• Tối đa 10 MB / file.
• Định dạng được phép: JPG, PNG, WebP, SVG.

1.2. Qua File Manager (cho ảnh tái sử dụng)

• Desk → /app/file.
• Bấm Upload → chọn file.
• Sau khi upload, click file → copy URL (dạng /files/ten-anh.webp) để dán vào trường ảnh trong các DocType.

1.3. Qua trường Attach Image của DocType

• Một số DocType (Blog Post → Meta Image) có nút upload tích hợp — dùng giống File Manager nhưng liên kết trực tiếp với bản ghi.

1.4. Ảnh build-in của app (dev)

• Các ảnh cố định (logo, hero mặc định, icon trụ cột) nằm trong apps/mantistech_web/mantistech_web/public/images/ và được phục vụ qua /assets/mantistech_web/images/<file>.
• Không upload ảnh nội dung vào đây — chỉ dev commit vào repo.

2. Kích thước chuẩn

3. Định dạng: khi nào dùng gì?

• SVG — logo, icon, illustration phẳng. Kích thước file rất nhỏ, scale không vỡ. Không chứa chi tiết photo-like.
• WebP — ảnh thật (sản phẩm, team, hero), blog thumbnail. Nhỏ hơn JPG/PNG ~30% cùng chất lượng.
• PNG — chỉ dùng khi cần nền trong suốt và không dùng được SVG/WebP.
• JPG — fallback cho các nền tảng social chưa hỗ trợ WebP tốt (Zalo share — dùng JPG cho OG image).

4. Công cụ tối ưu trước khi upload

• Squoosh.app — nén online, convert sang WebP. Khuyến nghị chất lượng 75–85.
• TinyPNG — nén PNG/JPG nhanh.
• SVGOMG — nén SVG.
• Mục tiêu: file ảnh ≤ 300 KB. Hero có thể tới 500 KB.

5. Alt text — bắt buộc

Mọi ảnh nội dung bắt buộc có alt text tiếng Việt, mô tả ngắn gọn nội dung ảnh (không phải tên file). Ví dụ:

• ❌ alt="IMG_0012.jpg"
• ❌ alt="hero-ai.webp"
• ✅ alt="Kỹ sư Mantis Tech hướng dẫn khách hàng sử dụng Loa AI trong văn phòng"

Trong Inline Editor: click ảnh → overlay upload có ô Alt text. Trong Blog Post rich editor: sau khi chèn ảnh, click chọn → nút Edit → điền Alt.

6. Đặt tên file

• Không dấu, viết thường, gạch ngang — ví dụ loa-ai-phong-hop.webp.
• Nên có từ khoá trong tên (tốt cho SEO image search).
• Không dùng tên mặc định của máy ảnh (IMG_1234.jpg).

7. Kiểm tra sau khi thay ảnh

1. Xem trên desktop (1440 px): tỉ lệ, độ nét.
2. Xem trên mobile (375 px): không vỡ bố cục, không kéo dài.
3. DevTools → Network tab → kiểm tra kích thước file thực tế ≤ mục tiêu.
4. Lighthouse → tab Performance → "Properly size images" không cảnh báo.

8. Ảnh cho Open Graph (share mạng xã hội)

• Kích thước bắt buộc 1200 × 630 (tỉ lệ ~1.91:1).
• Text trên ảnh (nếu có): đủ lớn để đọc ở preview ~600 px. Tránh đặt text sát mép.
• Phải có trong tất cả: Blog Post (field Meta Image), Mantis Product (field OG Image Filename), Mantis Web Page (field Open Graph Image).
• Fallback toàn site: Website Settings → Default Meta Image.

9. Xóa ảnh không dùng 🛡️

• Định kỳ (tháng/quý), Website Manager vào /app/file → lọc Not Attached → xoá để dọn dung lượng.
• Tránh xoá file đang được tham chiếu — Frappe sẽ cảnh báo nhưng không chặn tuyệt đối.