Ảnh đại diện bài viết trong WordPress nên có kích thước bao nhiêu?

Con số mà hầu hết mọi người muốn là 1200 x 630 pixel. Đó là tỉ lệ mà Facebook, LinkedIn và X dùng cho phần xem trước liên kết (1.91:1), và cũng là kích thước mà một ảnh Open Graph nên có. Nếu bạn đặt ảnh đại diện bài viết chủ yếu để các liên kết chia sẻ hiển thị đẹp, hãy dùng 1200 x 630 và dừng lại ở đó.

Nhưng con số đó không phải là thứ mà theme của bạn thực sự hiển thị trên bài viết. WordPress hiếm khi hiển thị thumbnail của bạn ở kích thước gốc. Theme yêu cầu một kích thước ảnh đã đăng ký cụ thể, và WordPress trả về đúng bản crop đã được tạo sẵn khớp với yêu cầu đó. Đó là lý do một tấm ảnh trông hoàn hảo trên Facebook lại có thể bị mờ, bị kéo giãn, hoặc crop sai bên trong template bài viết đơn của bạn. Kích thước “đúng” phụ thuộc vào theme, chứ không phải một quy tắc chung nào cả.

Vì sao theme ghi đè con số đó

Khi bạn up một tấm ảnh lên, WordPress không lưu duy nhất một file. Nó chạy wp_generate_attachment_metadata() và tạo một ảnh con cho mỗi kích thước ảnh đã đăng ký: ba kích thước mặc định (thumbnail, medium, large), kích thước medium_large của trình soạn thảo khối (rộng 768px), cùng với bất kỳ kích thước nào mà theme hoặc plugin đã đăng ký bằng add_image_size().

Một theme muốn có ảnh hero rộng tỉ lệ 16:9 sẽ làm gì đó như thế này trong functions.php:

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

Tham số thứ tư, true, có nghĩa là hard crop (cắt cứng). WordPress sẽ crop ảnh của bạn thành đúng 1200 x 675, bỏ đi tất cả những gì không vừa với khung 16:9. Nếu chủ thể của bạn nằm gần phía trên hoặc phía dưới khung hình, nó sẽ bị cắt. Nếu đặt thành false (hoặc bỏ trống), ảnh sẽ được thu nhỏ theo tỉ lệ và kích thước cuối cùng có thể khác với con số bạn yêu cầu.

Sau đó template mới quyết định lấy kích thước nào:

the_post_thumbnail( 'hero-featured' );

Tên nào được truyền vào the_post_thumbnail() thì đó chính là bản crop được render ra. Vậy nên kích thước ảnh đại diện bài viết thực sự trên site của bạn được định nghĩa ở hai chỗ mà bạn không hề viết: lời gọi add_image_size() và lời gọi the_post_thumbnail() trong theme. Up một file lớn hơn cũng không thay đổi được chỗ nào trong hai chỗ đó.

Còn một tầng nữa. WordPress trả về một srcset, nên trên màn hình nhỏ hơn, trình duyệt có thể tải bản medium hoặc large thay vì bản crop đầy đủ. Kích thước bạn thấy trong DevTools thường không phải kích thước bạn đã up lên.

Cách khắc phục, theo thứ tự

1. Tìm hiểu xem theme của bạn thực sự yêu cầu gì. Trước khi đoán mò, hãy xem mọi kích thước mà WordPress tạo ra từ ảnh của bạn và bản nào là ảnh hero đã bị crop. Kéo ảnh của bạn vào công cụ kích thước ảnh WordPress — nó cho thấy mọi ảnh con mà WP sẽ tạo, với kích thước pixel chính xác, để bạn khớp ảnh gốc với mục tiêu thật thay vì con số 1200x630 huyền thoại.

2. Up ảnh đủ lớn để bao trọn bản crop lớn nhất. Nếu ảnh hero của theme là 1200 x 675, hãy up ít nhất bằng kích thước đó, và lý tưởng là gấp 2x cho màn hình retina (2400 x 1350). WordPress thu nhỏ rất gọn gàng; nó không bao giờ phóng to lên. Ảnh gốc quá nhỏ là nguyên nhân phổ biến nhất khiến ảnh đại diện bài viết bị mờ.

3. Khớp tỉ lệ khung hình của bạn với bản crop của theme. Nếu theme hard-crop thành 16:9, hãy đưa cho nó ảnh 16:9. Bố cục với chủ thể đặt ở giữa để một cú hard crop không cắt đầu ai cả.

4. Nếu kích thước đã đăng ký bị sai, hãy đổi nó và regenerate. Sửa các giá trị add_image_size() trong một child theme, rồi dựng lại các thumbnail hiện có — kích thước mới chỉ áp dụng cho các lần up trong tương lai cho đến khi bạn làm điều này:

wp media regenerate --yes

Không có WP-CLI? Plugin Regenerate Thumbnails làm được đúng việc đó ngay từ dashboard.

Những điều không nên làm

Đừng chỉ up một tấm ảnh 1200x630 rồi nghĩ là xong. Nếu kích thước đã đăng ký của theme là 16:9, WordPress sẽ hard-crop tấm ảnh 1.91:1 của bạn và bạn mất phần trên cùng và dưới cùng. Con số Open Graph và con số hiển thị là hai công việc khác nhau.

Đừng vô hiệu hóa các kích thước ảnh của WordPress để “giữ ảnh gốc”. Nhiều người tìm được lời khuyên đặt các kích thước trung gian về 0 hoặc gỡ hook the_post_thumbnail. Khi đó theme sẽ chuyển sang trả về file full-size rồi thu nhỏ ngay trong trình duyệt — một tấm JPEG 4000px được gửi tới điện thoại. Điều đó phá nát thời gian tải trang và Core Web Vitals của bạn. Các ảnh con tồn tại là có lý do.

Đừng tin vào “kích thước khuyến nghị” của plugin hơn là kích thước thật đã đăng ký của theme. Các plugin SEO khuyến nghị 1200x630 cho thẻ OG, điều đó đúng cho thẻ đó. Nhưng nó chẳng nói gì về việc template bài viết đơn của bạn crop thành cái gì.

Đừng bỏ qua wp media regenerate sau khi đổi kích thước. Sửa add_image_size() không tác động gì tới những ảnh đã up lên rồi. Đây là bước mọi người hay quên, rồi kết luận rằng đoạn code không hoạt động.

Vẫn bí?

Nếu tấm ảnh vẫn sai sau khi đã khớp kích thước và regenerate, vấn đề thường nằm ở chế độ crop (true so với false) hoặc một srcset đang trả về một ảnh con nhỏ hơn bạn mong đợi. Kéo file vào công cụ kích thước ảnh để xem chính xác setup của bạn tạo ra những bản crop nào, rồi so sánh với những gì trình duyệt đang tải trong DevTools. Khớp được hai thứ đó thì hết phải đoán mò.