Hình ảnh và video

Hình ảnh thường là thứ khách nhìn thấy đầu tiên và cũng là thứ nặng nhất trên trang. Một ảnh tốt trả lời câu hỏi “sản phẩm trông thế nào, không gian ra sao, kết quả là gì” nhanh hơn cả đoạn văn. Một ảnh không tối ưu có thể khiến khách chờ màn hình trắng và bỏ đi.

Chọn ảnh đúng vai trò

• Ảnh sản phẩm, xưởng, không gian, đội ngũ thật do bạn chụp thường đáng tin hơn ảnh stock chung chung.
• Ảnh trước/sau chỉ dùng khi có thật, cùng điều kiện chụp, không chỉnh sửa làm sai lệch kết quả.
• Ảnh chụp màn hình phần mềm thật, có che dữ liệu cá nhân.
• Ảnh có người nhận diện được: cần sự đồng ý của người trong ảnh; ảnh trẻ em cần đồng ý của cha mẹ hoặc người giám hộ.
• Ảnh lấy trên mạng hoặc kho ảnh: chỉ dùng khi rõ giấy phép, ghi công nếu giấy phép yêu cầu.

Tối ưu ảnh từng bước

1. Cắt ảnh đúng tỉ lệ hiển thị và thu nhỏ về kích thước cần dùng (không đưa ảnh 4.000 px để hiện ở khung 800 px).
2. Chọn định dạng hiện đại như WebP hoặc AVIF; giữ JPEG/PNG làm dự phòng khi cần.
3. Khai báo width và height (hoặc CSS aspect-ratio) để trình duyệt giữ chỗ trước, tránh xô lệch bố cục (CLS).
4. Dùng srcset và sizes để điện thoại tải bản nhỏ, màn hình lớn tải bản lớn.
5. Ảnh dưới màn hình đầu: thêm loading="lazy". Ảnh hero (thường là phần tử LCP): không lazy-load, có thể thêm fetchpriority="high".
6. Viết alt mô tả nội dung ảnh trong ngữ cảnh; ảnh chỉ để trang trí thì alt rỗng (alt="").

Video

• Dùng kiểu nhúng nhẹ: hiển thị ảnh poster và nút phát, chỉ tải trình phát khi khách bấm.
• Không tự phát video có tiếng. Video nền tự phát (nếu dùng) phải tắt tiếng, ngắn, có nút dừng, và cân nhắc tắt trên điện thoại.
• Có phụ đề tiếng Việt: nhiều người xem không bật tiếng, và phụ đề giúp người khiếm thính.
• Video nên ngắn và trả lời một câu hỏi cụ thể: quy trình sản xuất, cách dùng sản phẩm, không gian quán.

Thay ảnh và viết alt trong Trình thiết kế