Thay vì thuộc lòng bảng kích thước điểm ảnh của từng nền tảng, người thiết kế cần nắm bốn tỉ lệ khung chính — vuông 1:1, dọc 4:5, đứng 9:16 và ngang 16:9 — cùng khái niệm vùng an toàn, nơi giao diện ứng dụng không che lên. Kích thước cụ thể các nền tảng thay đổi theo từng đợt cập nhật, nên con số luôn phải kiểm ở trang hướng dẫn chính thức tại thời điểm làm; còn tỉ lệ và vùng an toàn là thứ quyết định bố cục.
Bài này giải thích vì sao ảnh hay bị cắt mất chữ, cách chọn khung theo nơi ảnh sẽ hiện, và cách dựng một thiết kế gốc rồi chuyển sang nhiều khung mà không phải làm lại, trong đó công cụ mở rộng khung bằng AI giúp được một phần nhưng không phải tất cả.
Bốn tỉ lệ khung và nơi chúng thường xuất hiện
Mỗi tỉ lệ gắn với một cách người xem cầm điện thoại và một vị trí trên giao diện. Bảng dưới mô tả theo nguyên lý, không phải thông số chính thức của nền tảng nào.
| Tỉ lệ | Thường dùng cho | Điểm mạnh | Điều cần chú ý |
|---|---|---|---|
| Vuông 1:1 | Ảnh trong luồng tin, ảnh đại diện, ảnh sản phẩm trên sàn | An toàn, hiện đủ ở hầu hết nơi | Chiếm ít diện tích màn hình dọc hơn khung 4:5 |
| Dọc 4:5 | Ảnh bài đăng trong luồng tin trên điện thoại | Chiếm nhiều chiều cao màn hình, nổi hơn khi lướt | Một số nơi hiển thị thu nhỏ có thể cắt về vuông |
| Đứng 9:16 | Tin (story), video ngắn, ảnh toàn màn hình | Phủ kín màn hình điện thoại | Phần trên và dưới bị nút bấm, tên tài khoản, chú thích che |
| Ngang 16:9 và gần ngang | Ảnh xem trước khi chia sẻ đường dẫn, ảnh bìa video, màn hình máy tính | Hợp với nội dung xem trên máy tính, màn hình ngang | Rất nhỏ khi hiện trong luồng tin dọc trên điện thoại |
Ảnh bìa trang (fanpage, kênh video) là trường hợp đặc biệt: cùng một ảnh hiện khác nhau trên máy tính và điện thoại, nên được bàn riêng trong bài về ảnh bìa của danh mục này.
Một nguyên tắc chung: khi chưa chắc ảnh sẽ hiện ở đâu, khung dọc 4:5 với nội dung chính nằm gọn trong vùng vuông ở giữa là lựa chọn ít rủi ro cho luồng tin trên điện thoại.
Vì sao ảnh đăng lên bị cắt mất chữ
Hiện tượng quen thuộc: thiết kế trên máy tính rất cân, đăng lên thì dòng chữ cuối bị mất nửa, logo nằm dưới nút thả tim. Nguyên nhân thường rơi vào ba nhóm. Thứ nhất, ảnh không đúng tỉ lệ nền tảng chấp nhận nên bị cắt tự động về tỉ lệ gần nhất. Thứ hai, ảnh đúng tỉ lệ nhưng chỗ hiển thị thu nhỏ (lưới ảnh trên trang cá nhân, ô xem trước khi chia sẻ) dùng tỉ lệ khác và cắt phần giữa. Thứ ba, ảnh hiện đủ nhưng giao diện ứng dụng phủ lên trên.
Nhóm thứ ba là nhóm hay bị bỏ qua nhất với khung đứng 9:16. Ở đáy màn hình có ô chú thích, ô trả lời, nút mua; ở cạnh phải có cột nút tương tác; ở đỉnh có thanh tiến trình và tên tài khoản. Vùng bị che thay đổi theo nền tảng, theo loại nội dung và theo phiên bản ứng dụng, nên không có một con số đúng mãi.
Cách phòng thủ thực tế là chừa lề rộng ở cả bốn phía cho khung đứng, đặc biệt phía dưới, và chỉ đặt chữ, sản phẩm, dấu nhận diện trong vùng giữa. Nhiều người thiết kế giữ sẵn một lớp hướng dẫn mờ trong tệp gốc đánh dấu vùng dễ bị che; trước mỗi lần xuất, bật lớp đó lên xem nhanh rồi tắt đi. Lớp này nên cập nhật khi bạn thấy giao diện ứng dụng đổi.
Độ phân giải, định dạng và chuyện ảnh bị mờ sau khi đăng
Nền tảng luôn nén lại ảnh. Dù bạn xuất ảnh chất lượng cao đến đâu, phần lớn mạng xã hội đều nén lại để tiết kiệm băng thông. Ảnh có nhiều mảng màu chuyển mượt hoặc chữ nhỏ trên nền phức tạp là những chỗ dễ bị vỡ, nổi khối nhất sau khi nén.
Xuất đúng kích thước khuyến nghị thường đẹp hơn xuất thật to. Ảnh quá lớn sẽ bị nền tảng thu nhỏ bằng thuật toán của họ, đôi khi làm chữ mềm đi. Xuất đúng chiều ngang khuyến nghị hiện hành, phổ biến là khoảng một nghìn điểm ảnh trở lên cho ảnh luồng tin, giúp bạn kiểm soát kết quả tốt hơn. Kiểm con số chính xác ở trang trợ giúp của nền tảng.
Hệ màu sRGB cho màn hình. Ảnh mạng xã hội hiển thị trên màn hình, nên làm và xuất trong hệ màu sRGB. Tệp làm theo hệ màu dành cho in khi đưa lên mạng thường bị xỉn hoặc lệch màu. Chuẩn bị tệp cho khâu in là mảng khác, có trang chuyên về in ấn trong hệ.
PNG cho ảnh nhiều chữ và mảng phẳng, JPG cho ảnh chụp. Thiết kế chủ yếu là chữ và mảng màu đặc thường giữ nét tốt hơn ở định dạng PNG; ảnh chụp sản phẩm nhiều chi tiết thì JPG chất lượng cao thường đủ và nhẹ hơn. Thử đăng nháp ở chế độ riêng tư để xem kết quả thật.
Chữ nhỏ là thứ hỏng đầu tiên. Nếu chữ phụ của bạn chỉ còn vài điểm ảnh chiều cao trên điện thoại, sau khi nén nó thành vệt mờ. Tăng cỡ chữ phụ hoặc bỏ hẳn, thay vì hy vọng nền tảng giữ nét.
Dựng một thiết kế gốc để chuyển sang nhiều khung
Làm cùng một nội dung cho luồng tin, tin 24 giờ và ảnh chia sẻ đường dẫn là việc rất thường gặp. Cách làm từng khung riêng rẽ tốn thời gian và dễ lệch nhau. Quy trình dưới giúp ra ba bốn khung từ một gốc:
- Xác định "cụm lõi": nhóm phần tử bắt buộc phải có ở mọi khung, thường là hình chính, dòng chữ chính và dấu nhận diện. Các phần tử khác là phụ, có thể bỏ ở khung chật.
- Thiết kế khung khó nhất trước, thường là khung đứng 9:16 hoặc khung ngang, vì nó buộc cụm lõi phải gọn.
- Nhóm cụm lõi thành một khối trong phần mềm để di chuyển, co giãn cùng nhau mà không vỡ khoảng cách giữa các phần tử.
- Tạo các bảng vẽ (artboard) cho từng tỉ lệ, đặt cụm lõi vào vùng an toàn của từng khung, rồi xử lý phần nền.
- Với phần nền thiếu hụt khi đổi khung, dùng nền màu đặc, nền chuyển màu, hoặc công cụ mở rộng khung bằng AI tuỳ trường hợp.
- Đặt tên các bảng vẽ theo tỉ lệ và nơi dùng, xuất một lượt, rồi kiểm từng khung trên điện thoại.
Nhiều phần mềm thiết kế phổ biến có tính năng tự đổi kích thước bố cục; chất lượng khác nhau theo phiên bản, nên coi kết quả tự động là bản nháp để chỉnh lại khoảng cách và cỡ chữ bằng tay.
Mở rộng khung bằng AI: dùng được ở đâu, cẩn thận ở đâu
Công cụ mở rộng khung (thường gọi là generative expand hay outpainting) vẽ thêm phần nền xung quanh ảnh gốc để vừa khung mới. Với ảnh chụp sản phẩm trên nền bàn gỗ, tường trơn, vải, bầu trời, kết quả thường khá tự nhiên và tiết kiệm nhiều thời gian so với dựng lại hoặc ghép tay.
Chỗ cần cẩn thận là khi phần vẽ thêm chạm vào thứ có cấu trúc rõ ràng: cạnh bàn, đường gạch lát, kệ hàng, tay người, một phần sản phẩm bị khung cũ cắt dở. AI có thể vẽ ra cạnh bàn cong, gạch lệch, bàn tay sáu ngón, hoặc tệ hơn là "bổ sung" thêm phần sản phẩm không giống thật. Với ảnh dùng bán hàng, phần sản phẩm phải là ảnh thật; chỉ để AI vẽ nền.
Một thói quen tốt: sau khi mở rộng, phóng to kiểm đường nối giữa ảnh gốc và phần vẽ thêm, so ánh sáng và độ hạt hai bên. Nếu ảnh gốc có độ hạt mà phần mới mịn như nhựa, thêm chút nhiễu nhẹ cho đồng đều. Và giữ bản gốc chưa mở rộng trong tệp, vì khi khách đổi khung lần nữa, mở rộng từ bản gốc cho kết quả sạch hơn mở rộng chồng lên phần đã vẽ.
Danh sách kiểm trước khi xuất ảnh cho nhiều nền tảng
Dán danh sách này cạnh màn hình, hoặc đưa vào ghi chú dự án. Mỗi lần xuất một bộ ảnh, đi qua từng dòng:
- Đã kiểm kích thước và tỉ lệ khuyến nghị hiện hành ở trang trợ giúp của từng nền tảng trong tháng này.
- Cụm lõi nằm trong vùng an toàn ở mọi khung, nhất là khung đứng.
- Chữ phụ còn đọc được khi xem ở dạng thu nhỏ trên điện thoại.
- Không có phần sản phẩm nào do AI vẽ thêm trong ảnh dùng để bán.
- Đường nối của phần mở rộng khung không lộ khi phóng to.
- Tệp xuất ở hệ màu sRGB, định dạng hợp với nội dung, tên tệp ghi rõ tỉ lệ.
- Đã đăng thử ở chế độ riêng tư hoặc xem trước trong công cụ của nền tảng.
- Tệp gốc có lớp hướng dẫn vùng an toàn đã tắt trước khi xuất.
Danh sách này ngắn nhưng chặn được phần lớn lỗi khiến khách gọi lại sau khi đăng. Khi nhóm có nhiều người cùng xuất ảnh, thống nhất một danh sách chung giúp các bài đăng trông cùng một nhà.
Dùng AI để tra và cập nhật thông số, nhưng đừng tin mù
Hỏi chatbot "kích thước ảnh bìa là bao nhiêu" là thói quen phổ biến, và câu trả lời thường nghe rất chắc chắn. Vấn đề là mô hình được huấn luyện trên dữ liệu đến một thời điểm, còn nền tảng đổi giao diện liên tục; nhiều bài trên mạng mà mô hình học lại cũng đã cũ. Bạn có thể nhận một con số từng đúng hai năm trước.
Cách dùng an toàn hơn là nhờ AI giải thích nguyên lý (vì sao khung đứng cần lề dưới rộng, tỉ lệ nào hợp với ảnh nào) và giúp lập bảng theo dõi, còn con số thì lấy từ trang trợ giúp chính thức. Nếu chatbot bạn dùng có khả năng tìm kiếm web, yêu cầu nó nêu nguồn và ngày cập nhật, rồi tự mở nguồn kiểm.
Với nhóm làm nội dung đều đặn, nên có một tệp thông số dùng chung: mỗi dòng là một chỗ hiển thị, có tỉ lệ, kích thước khuyến nghị, ghi chú vùng bị che và ngày kiểm gần nhất. Mỗi quý một người được giao kiểm lại. Việc nhỏ này tránh được cảnh cả nhóm làm theo con số cũ mà không ai biết.
Câu hỏi thường gặp
Có kích thước nào dùng chung được cho mọi mạng xã hội không?
Không có kích thước hoàn hảo cho mọi nơi. Khung dọc 4:5 với nội dung chính gói gọn trong vùng vuông ở giữa là phương án dùng được ở nhiều luồng tin, nhưng tin 24 giờ, video ngắn và ảnh chia sẻ đường dẫn vẫn cần khung riêng nếu muốn hiển thị tốt.
Vì sao ảnh trông nét trên máy tính mà mờ trên điện thoại?
Thường do nền tảng nén lại ảnh, do ảnh xuất quá lớn bị thu nhỏ bằng thuật toán của nền tảng, hoặc do chữ quá nhỏ so với kích thước hiển thị thật trên điện thoại. Xuất đúng kích thước khuyến nghị, tăng cỡ chữ và thử định dạng PNG cho ảnh nhiều chữ thường cải thiện rõ.
Có nên thiết kế ở kích thước gấp đôi rồi thu nhỏ khi xuất?
Làm việc trên bảng vẽ lớn giúp bạn thao tác chi tiết dễ hơn và có bản chất lượng cao để dùng lại. Tuy vậy khi xuất để đăng, nên xuất về đúng kích thước khuyến nghị hiện hành thay vì để nền tảng tự thu nhỏ, vì như vậy bạn kiểm soát được độ nét của chữ.
Mở rộng khung bằng AI có làm giảm chất lượng ảnh không?
Phần ảnh gốc giữ nguyên, nhưng phần vẽ thêm có thể khác độ nét, độ hạt hoặc ánh sáng, và đôi khi sai cấu trúc như cạnh bàn cong hay vật thể lạ. Luôn phóng to kiểm đường nối, chỉ để AI vẽ phần nền, không để nó vẽ thêm phần sản phẩm.
Làm sao biết vùng nào trên khung đứng bị giao diện che?
Cách chắc nhất là đăng thử một ảnh lưới có đánh dấu các ô ở chế độ riêng tư hoặc xem trước, rồi chụp màn hình lại để thấy vùng bị nút và chữ của ứng dụng phủ lên. Làm lại khi ứng dụng cập nhật giao diện, và lưu kết quả thành lớp hướng dẫn trong tệp gốc.
Có cần làm riêng ảnh cho từng nền tảng không?
Nếu ngân sách thời gian hạn chế, hãy làm riêng cho những khung khác hẳn nhau về tỉ lệ, còn các nơi có tỉ lệ gần nhau có thể dùng chung một bản. Quan trọng là cụm lõi gồm hình chính, chữ chính và dấu nhận diện luôn nằm trong vùng an toàn của từng khung.