Hình ảnh đầu bài và hình chia sẻ Facebook, Zalo: khổ, vùng an toàn
Một hình ảnh phải vừa làm đầu bài vừa hiện đẹp khi dán liên kết lên Facebook, Zalo. Cách chọn khổ để cắt ít nhất, đặt chủ thể vào vùng an toàn, nén webp và jpeg.
Bài viết xong, đăng lên trang, dán liên kết vào nhóm Zalo của khách hàng — và hình xem trước hiện ra bị cắt mất nửa đầu người, hoặc chỉ là một ô xám. Lỗi này gặp rất nhiều ở các trang tự làm, và nó làm phí công vẽ một hình ảnh đầu bài đẹp.
Thật ra mỗi bài cần nghĩ tới hai vai của cùng một hình ảnh: hình đầu bài hiện trên trang, và hình xem trước khi ai đó chia sẻ liên kết. Hai vai này có khổ khác nhau. Bài này chỉ cách vẽ một lần mà dùng được cho cả hai.
Hai khổ cần nhớ
Hình đầu bài do giao diện trang web của bạn quyết định. Phần lớn giao diện blog, trang tin hiện hình đầu bài theo khổ ngang, gần 16:9 hoặc 3:2. Mở mã giao diện hoặc hỏi người làm web xem khung hình đầu bài đang là bao nhiêu.
Hình chia sẻ là hình khai trong thẻ og:image ở phần đầu trang. Facebook khuyên kích thước 1200 × 630, tức tỉ lệ khoảng 1,91:1 — dẹt hơn cả 16:9. Zalo khi dán liên kết cũng đọc các thẻ og: này để dựng khung xem trước. Không khai thẻ thì mỗi nơi tự bốc một hình bất kỳ trên trang, có khi là biểu tượng, có khi là hình quảng cáo ở cột bên.
Vẽ khổ nào để cắt ít nhất
AI Hình Ảnh có sáu khổ. Với bài viết, hai khổ đáng cân nhắc:
| Khổ trên trang vẽ | Kích thước | Cắt ra 1200 × 630 thì mất | Nhận xét |
|---|---|---|---|
| Màn rộng 16:9 | 1664 × 928 | khoảng 28 px mỗi mép trên và dưới | gần như không mất gì, nên chọn |
| Ngang 3:2 | 1536 × 1024 | khoảng 110 px mỗi mép trên và dưới | mất đáng kể, đầu người dễ bị cụt |
| Vuông 1:1 | 1280 × 1280 | gần một nửa chiều cao | không hợp |
Cách tính dòng đầu: giữ nguyên bề ngang 1664, chiều cao cần để ra tỉ lệ 1,91:1 là 1664 ÷ 1,905 ≈ 873. Hình ảnh gốc cao 928, thừa 55, chia đôi mỗi mép khoảng 28. Sau đó thu nhỏ về 1200 × 630.
Kết luận: nếu giao diện của bạn cho phép, vẽ Màn rộng 16:9 cho hình đầu bài. Một tệp duy nhất, cắt rất nhẹ là thành hình chia sẻ.
Nếu giao diện bắt buộc 3:2 thì vẫn vẽ 3:2, nhưng khi viết mô tả phải chừa khoảng trên đầu người — xem mục vùng an toàn dưới đây.
Vùng an toàn: đặt chủ thể ở đâu
Hình chia sẻ không phải lúc nào cũng hiện đủ khổ. Trên điện thoại, ở một số chỗ hiển thị nhỏ (danh sách tin nhắn, bình luận có liên kết), khung xem trước bị thu thành ô vuông nhỏ lấy phần giữa. Giao diện trang của bạn cũng có thể cắt hình đầu bài khác nhau giữa máy tính và điện thoại.
Quy tắc giữ an toàn cho mọi trường hợp:
- Chủ thể chính nằm ở một phần ba giữa theo chiều ngang. Cắt thành vuông vẫn còn.
- Chừa một khoảng trống phía trên đầu người, đừng để đỉnh đầu chạm mép trên.
- Không đặt chi tiết quan trọng sát bốn góc. Bàn tay đang làm việc, sản phẩm cần thấy, nét mặt — đều đưa vào trong.
Viết điều này thẳng vào mô tả:
Câu "đứng chính giữa khung hình, phía trên đầu còn nhiều khoảng trời" là câu làm việc chính ở đây. Máy vẽ hiểu yêu cầu bố cục khá tốt nếu bạn nói rõ.
Muốn để tiêu đề đè lên hình chia sẻ?
Nhiều trang tin chèn tiêu đề bài hoặc biểu tượng thương hiệu lên hình chia sẻ cho nổi bật. Đừng nhờ AI vẽ chữ — chữ tiếng Việt có dấu do AI vẽ thường sai. Làm hai bước:
- Vẽ hình ảnh có một vùng trống rõ ràng, ví dụ: "nửa bên trái là bức tường vôi trắng trơn, người đứng ở nửa bên phải".
- Mở Canva hoặc công cụ thiết kế quen tay, đặt chữ vào vùng trống đó.
Lưu ý vùng trống bên trái hay phải đều bị mất bớt nếu hình bị cắt vuông. Nếu chữ là thứ quan trọng nhất, đặt chữ ở giữa phía dưới, chủ thể ở giữa phía trên.
Nén: webp cho trang, jpeg cho thẻ chia sẻ
Hình ảnh tải về từ AI Hình Ảnh là tệp webp. Đây là định dạng tốt cho trang web: nhỏ hơn jpeg cùng chất lượng, mọi trình duyệt hiện nay đều đọc được.
Với thẻ og:image, để chắc ăn nên dùng bản jpeg. Các công cụ dựng xem trước của mạng xã hội không phải lúc nào cũng đọc webp ổn định như trình duyệt; jpeg thì ở đâu cũng đọc. Chuyển đổi bằng bất kỳ công cụ nào quen tay (Squoosh trên trình duyệt, Photoshop, hay thư viện xử lý hình trên máy chủ). Nếu bạn lấy hình qua API, có thể xin thẳng định dạng jpeg bằng tham số output_format.
Mức nén nên thử:
| Dùng cho | Định dạng | Kích thước | Chất lượng nén | Ghi chú |
|---|---|---|---|---|
| Hình đầu bài trên trang | webp | rộng 1200–1664 | 75–82 | xem trên điện thoại thấy không bệt màu là được |
Hình chia sẻ og:image | jpeg | 1200 × 630 | 80–85 | đừng nén quá tay, Facebook còn tự nén lần nữa |
| Hình thu nhỏ trong danh sách bài | webp | rộng 400–600 | 70–78 | cắt từ hình đầu bài, không vẽ riêng |
Mức chất lượng là con số thử nghiệm, không có chuẩn cứng. Cách thử: nén ở ba mức, mở trên điện thoại, chọn mức thấp nhất mà mắt chưa thấy khác. Chú ý vùng trời và mảng tường trơn — đó là chỗ lộ vệt nén đầu tiên.
Khai thẻ cho đúng
Phần đầu trang mỗi bài cần tối thiểu:
```html
<meta property="og:title" content="Tiêu đề bài viết">
<meta property="og:description" content="Một hai câu tóm tắt">
<meta property="og:image" content="https://tentrang.vn/hinh/ten-bai-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
```
Ba lưu ý của người đã làm:
- Đường dẫn hình phải là đường dẫn đầy đủ, có
https://và tên miền. Đường dẫn tương đối như/hinh/abc.jpgthường không được đọc. - Khai chiều rộng, chiều cao giúp lần chia sẻ đầu tiên hiện hình ngay, khỏi đợi máy chủ mạng xã hội tải về đo.
- Đặt tên tệp có nghĩa và khác nhau cho mỗi bài. Tên tệp như
og.jpgdùng chung cho mọi bài là công thức để hình xem trước bị nhầm.
Khi đã sửa mà xem trước vẫn hình cũ
Facebook và Zalo đều giữ bản xem trước cũ một thời gian. Đổi hình rồi dán lại liên kết vẫn thấy hình cũ là chuyện bình thường.
- Với Facebook, dùng Trình gỡ lỗi chia sẻ (Sharing Debugger) của Meta, dán liên kết, bấm lấy lại thông tin.
- Cách chắc nhất cho mọi nền tảng: đổi tên tệp hình (thêm hậu tố ngày, ví dụ
ten-bai-1200x630-1016.jpg) và cập nhật thẻog:image. Đường dẫn mới thì không ai có bản cũ để giữ.
Khi chia sẻ thẳng hình ảnh, không qua liên kết
Có lúc bạn không dán liên kết mà đăng thẳng hình ảnh kèm vài dòng tóm tắt, ví dụ gửi vào nhóm Zalo phụ huynh hay đăng lên Trang Facebook của tiệm. Lúc này luật chơi khác:
- Khổ không còn bị ép về 1,91:1. Trên bảng tin điện thoại, hình dọc 4:5 chiếm nhiều chỗ hơn hình ngang. Nếu bài viết nào bạn biết chắc sẽ được đăng thẳng hình, vẽ thêm một bản Dọc 4:5 (1152 × 1440) cùng mô tả, chỉ đổi câu bố cục.
- Ứng dụng sẽ nén lại hình ảnh. Gửi hình đã nén sẵn ở mức thấp rồi bị nén thêm lần nữa thì vệt nén lộ rõ. Với hình đăng thẳng, giữ bản chất lượng cao (85 trở lên), để ứng dụng tự nén một lần.
- Cần giữ nguyên chất lượng (gửi hình cho đối tác in ấn chẳng hạn) thì gửi dưới dạng tệp đính kèm thay vì gửi như hình thường.
- Ứng dụng báo không nhận tệp webp thì chuyển sang jpeg trước khi gửi. Đa số nơi nhận được, nhưng không nên đợi tới lúc khách báo lỗi mới biết.
Lỗi hay gặp và cách sửa
Hình chia sẻ chỉ là ô xám. Thường do đường dẫn hình sai, hình bị chặn truy cập, hoặc dùng đường dẫn tương đối. Mở thẳng đường dẫn trong og:image ở trình duyệt ẩn danh xem có hiện không.
Đầu người bị cụt trong khung xem trước. Vẽ 3:2 mà người đứng sát mép trên. Vẽ lại với câu "phía trên đầu còn nhiều khoảng trống", hoặc chuyển sang khổ 16:9.
Hình đầu bài nặng làm trang tải chậm. Tải thẳng tệp gốc lên mà không thu nhỏ. Đọc thêm bài tốc độ tải và thẻ alt.
Mọi bài chia sẻ ra trông giống nhau. Lỗi không nằm ở khổ mà nằm ở cảnh. Xem bài tránh trang web toàn hình ảnh na ná nhau.
Quy trình gọn cho mỗi bài
- Viết mô tả cảnh, thêm câu bố cục: chủ thể giữa khung, chừa trống phía trên.
- Vào ô vẽ, chọn khổ Màn rộng 16:9, chọn 2 hình ảnh. Hạng Plus 500đ/hình ảnh là đủ cho cảnh không gian, người ở xa; người ở gần thấy rõ tay chọn Max.
- Tải hình ảnh tốt nhất về. Bản webp thu nhỏ còn rộng khoảng 1200 làm hình đầu bài.
- Cắt bản thứ hai về 1200 × 630, lưu jpeg, khai vào
og:image. - Dán liên kết vào một nhóm Zalo thử của chính bạn và một bài nháp Facebook xem trước khi gửi khách.
Mọi hình ảnh đã vẽ nằm trong kho hình ảnh đã tạo, cần cắt lại khổ khác lúc nào cũng tải về được.
