1200 x 628 so với 1200 x 627: Kích thước nào là phù hợp?

Nếu bạn đã từng cố gắng tạo một hình ảnh xem trước liên kết, bạn có thể đã gặp phải điều này: một hướng dẫn nói 1200 x 628, cái khác nói 1200 x 627, tài liệu của chính Facebook nói 1200 x 630, và mẫu thiết kế của bạn được đặt thành thứ gì đó hoàn toàn khác. Cả bốn đều trông giống hệt nhau. Vậy kích thước nào thực sự là chính xác?

Câu trả lời ngắn gọn: tất cả đều tốt. Chúng đều là các xấp xỉ của cùng một tỷ lệ khung hình, và sự khác biệt giữa chúng là ba pixel trên hình ảnh cao 630 pixel, tức là khoảng nửa phần trăm. Nhưng việc hiểu rõ các con số này là từ đâu là đáng giá, vì điều đó giúp bạn tránh khỏi việc xuất lại bảng giới thiệu tương tự năm lần.

Tất cả đều cố gắng đạt tỷ lệ 1.91:1

Proto Open Graph — tập hợp các thẻ meta mà Facebook, LinkedIn, Slack, iMessage và hầu hết các nền tảng khác đọc để xây dựng xem trước liên kết — khuyến nghị một hình ảnh có tỷ lệ khung hình 1.91:1. Đó là nó. 1.91 đã là một số làm tròn, vì vậy khi các công ty khác nhau nhân nó, chúng đổi sơ qua chỗ khác nhau một chút:

• 1200 ÷ 1.91 = 628.27 → làm tròn thành 1200 x 628
• 1200 x 630 = chính xác 1.905:1 → khuyến cáo tài liệu của Facebook
• 1200 x 627 = 1.914:1 → kích thước được công bố lâu dài của LinkedIn
• 1200 x 625 = chính xác 1.92:1 → xuất hiện trong các mẫu cũ hơn

Không có cái nào trong số này là "sai". Chúng là các hiện tượng làm tròn của cùng một thông số kỹ thuật. Các crawler không từ chối một hình ảnh vì lệch ba pixel; chúng chỉ cần tệp có kích thước ít nhất 200 x 200 và tốt nhất là 1200px rộng để nó hiển thị sắc nét trên các màn hình mật độ cao.

Sự khác biệt 3 pixel có bao giờ quan trọng không?

Trên thực tế, chỉ trong một tình huống: cắt chặt. Các nền tảng không hiển thị hình ảnh của bạn ở kích thước gốc — chúng tôi điều chỉnh nó vào bất kỳ bố cục thẻ nào mà họ sử dụng trong tháng đó, và các cạnh bị cắt tỉa. Nếu văn bản tiêu đề của bạn chạy đến ngay dưới cùng khung, một hình ảnh 1200 x 628 được cắt thành thẻ 1.78:1 sẽ cắt nó, và 1200 x 630 cũng sẽ như vậy.

Fix không phải là chọn số pixel "chính xác". Đó là để lại lề an toàn: giữ logo và văn bản bên trong khoảng ~90% của canvas và không có gì quan trọng trong vòng 60px từ bất kỳ cạnh nào. Sau đó, nó thực sự không quan trọng kích thước nào trong ba kích thước bạn xuất.

Cách tạo một hình ảnh hoạt động ở mọi nơi

Danh sách khuyến cáo của tôi: xây dựng tại 1200 x 630. Đó là kích thước tài liệu của Facebook, nó nằm trong khoảng một xấp xỉ của 1.91:1, và nó là một số chẵn, điều này tránh được hiển thị nửa pixel lẻ trong một số trình chỉnh sửa. Sau đó tái sử dụng cùng một tệp cho LinkedIn, Slack, Discord và các thẻ Open Graph nói chung.

Nếu bạn đã có một hình ảnh có kích thước sai, đây là cách nhanh chóng để sửa chữa mà không cần cài đặt bất cứ điều gì:

1. Mở công cụ cắt và cắt ảnh nguồn của bạn thành hình dạng 1.91:1 đầu tiên. Đây là bước mà mọi người bỏ qua — nếu bạn nhảy thẳng vào việc thay đổi kích thước, ảnh 4:3 sẽ bị nén và khuôn mặt trông có vẻ không đúng.
2. Đưa tệp được cắt vào công cụ thay đổi kích thước và đặt nó thành 1200 x 630 (hoặc 628 hoặc 627 — chọn một và tiếp tục).
3. Xuất dưới dạng JPG cho ảnh, PNG chỉ khi bạn cần văn bản sắc nét hoặc tính minh bạch phía sau logo. bộ chuyển đổi hình ảnh xử lý việc chuyển đổi đó nếu nguồn của bạn là PNG, WebP hoặc HEIC.

Mọi thứ diễn ra bên trong trình duyệt của bạn trên cutbg — tệp không bao giờ rời khỏi máy tính của bạn, không có hàng đợi tải lên và không có tài khoản. Điều đó quan trọng hơn mọi người nhận ra đối với các shot sản phẩm chưa phát hành hoặc công việc của khách hàng mà bạn chưa công bố.

Cũng hãy xem xét kích thước tệp

Các nền tảng có giới hạn tải lên và tìm nạp — Facebook giới hạn hình ảnh Open Graph ở 8MB, và một số crawler im lặng từ bỏ bất cứ điều gì chậm để tải xuống. Một JPG 1200 x 630 sẽ thoải mái nằm trong khoảng từ 100KB đến 300KB. Nếu việc xuất của bạn là PNG có nhiều megabyte, trước tiên hãy chạy nó qua bộ nén. Các tệp nhỏ hơn cũng có nghĩa là xem trước thực sự xuất hiện thay vì hiển thị thẻ trống trong khi crawler hết thời gian chờ.

Nếu bản xem trước vẫn hiển thị hình ảnh cũ

Đây gần như không bao giờ là vấn đề về kích thước. Facebook, LinkedIn và Twitter lưu trữ các bản xem trước được cạo lấy tích cực. Sau khi thay thế tệp, hãy chạy URL qua trình gỡ lỗi riêng của nền tảng (Facebook Sharing Debugger, LinkedIn Post Inspector) để buộc phải cạo lại. Thay đổi hình ảnh từ 1200 x 627 thành 1200 x 628 sẽ không sửa chữa bản xem trước được lưu trong bộ nhớ cache — chỉ xóa bộ nhớ cache mới có thể làm được.

Vì vậy: ngừng lo lắng về pixel cuối cùng. Chọn 1200 x 630, giữ văn bản của bạn cách xa các cạnh, giữ tệp dưới vài trăm KB, và bạn được bao phủ trên mọi nền tảng đọc các thẻ Open Graph.