Kích thước ảnh đại diện WordPress: 1200×630 + cách kiểm tra

Trả lời nhanh: nếu bạn chưa biết kích thước của theme, hãy dùng 1200 x 630 pixel (khoảng 1.91:1). Đó là kích thước xem trước liên kết mà Facebook khuyến nghị, và plugin SEO thường dùng ảnh đại diện làm ảnh chia sẻ.

Còn trên chính bài viết, kích thước quan trọng là kích thước theme của bạn hiển thị. WordPress lưu mỗi ảnh tải lên ở nhiều kích thước, và theme chọn kích thước nào xuất hiện. Theme cổ điển đặt điều này bằng set_post_thumbnail_size() hoặc add_image_size(); theme khối đặt nó trong khối Ảnh đại diện. Nếu theme cắt về 16:9 hoặc vuông, ảnh 1200 x 630 có thể mất một phần ở mép trái và mép phải. Hãy tìm kích thước của theme (bốn cách ở bên dưới), rồi tải lên ảnh ít nhất lớn bằng kích thước đó, hoặc rộng khoảng gấp đôi để sắc nét trên màn hình mật độ cao.

Để xem mọi kích thước WordPress sẽ tạo từ một ảnh cụ thể, hãy thả ảnh đó vào công cụ kích thước ảnh WordPress.

Nên dùng kích thước nào, theo nơi ảnh xuất hiện

Nơi ảnh xuất hiện	Kích thước nên tải lên	Ghi chú
Bài viết của bạn, chưa biết kích thước theme	1200 x 630, hoặc 2400 x 1260 để sắc nét hơn	Cũng dùng được cho xem trước liên kết trong lúc bạn tìm kích thước của theme
Bài viết của bạn, đã biết kích thước theme	Khoảng gấp đôi chiều rộng ảnh đại diện của theme, cùng tỉ lệ khung hình	WordPress tạo bản sao nhỏ hơn từ ảnh tải lên, không bao giờ tạo bản lớn hơn
Xem trước liên kết trên Facebook	Tối thiểu 1200 x 630 (khoảng 1.91:1); 1200 x 628 có hình dạng gần như y hệt	Theo hướng dẫn chia sẻ của Facebook
Google Discover	Rộng ít nhất 1200px, 16:9 (ví dụ 1200 x 675)	Theo nguyên tắc về Discover của Google

Tổng quan các kích thước ảnh WordPress

Mỗi ảnh bạn tải lên đều có các bản sao đổi kích thước cho từng kích thước đã đăng ký. Đây là các kích thước lõi WordPress đăng ký, với giá trị mặc định từ Theme Handbook và tài liệu hàm lõi:

Tên kích thước	Kích thước mặc định	Đổi được trong Cài đặt > Media không?	Ghi chú
thumbnail	150 x 150, có cắt	Có	Có ô đánh dấu “cắt theo đúng kích thước”
medium	tối đa 300 x 300	Có	Thu phóng theo tỉ lệ
medium_large	rộng 768, không giới hạn chiều cao	Không	Chủ yếu dùng trong srcset
large	tối đa 1024 x 1024	Có	Thu phóng theo tỉ lệ
1536x1536	tối đa 1536 x 1536	Không	Thêm vào từ WordPress 5.3 cho màn hình mật độ cao
2048x2048	tối đa 2048 x 2048	Không	Thêm vào từ WordPress 5.3 cho màn hình mật độ cao
post-thumbnail	Do theme đặt	Không	Chỉ tồn tại nếu theme gọi set_post_thumbnail_size()
full	Ảnh gốc bạn tải lên	Không	Ảnh quá lớn sẽ bị thu nhỏ trước (xem bên dưới)

“Tối đa” nghĩa là WordPress đặt ảnh vừa trong khung đó và giữ nguyên tỉ lệ. Một ảnh 2000 x 1000 sẽ thành 1024 x 512 cho large, chứ không phải 1024 x 1024.

Theme và plugin thường thêm kích thước bằng add_image_size(). Ví dụ WooCommerce thêm các kích thước riêng cho sản phẩm, được trình bày trong hướng dẫn kích thước ảnh sản phẩm WooCommerce của chúng tôi.

Còn một quy tắc nữa ảnh hưởng đến ảnh lớn. Từ WordPress 5.3, nếu ảnh rộng hoặc cao hơn 2560 pixel, WordPress sẽ thu nhỏ nó và dùng bản đã thu nhỏ làm kích thước lớn nhất có sẵn. Ngưỡng này đến từ bộ lọc big_image_size_threshold, mặc định là 2560. Nếu bạn thấy -scaled trong tên file và muốn biết có nên tắt nó không, hãy đọc cách tắt ảnh scaled trong WordPress.

Kích thước ảnh đại diện thực sự đến từ đâu

Ảnh đại diện là bất kỳ ảnh nào bạn đặt trong bảng Ảnh đại diện của trình soạn thảo bài viết. Người xem thấy gì phụ thuộc vào cách theme in nó ra.

Theme cổ điển

Theme cổ điển bật ảnh đại diện và đăng ký kích thước trong file functions.php của nó:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

set_post_thumbnail_size() đăng ký một kích thước tên là post-thumbnail. Tham số thứ ba điều khiển việc cắt. Với false (mặc định), WordPress thu phóng ảnh cho vừa trong 1200 x 675. Với true, nó cắt ảnh từ chính giữa thành đúng 1200 x 675, nên mọi phần nằm ngoài khung 16:9 sẽ mất. Bạn cũng có thể truyền một mảng như array( 'center', 'top' ) để chọn phần được giữ lại.

Nhiều theme đăng ký thêm các kích thước có tên cho các template khác nhau:

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

Sau đó template chọn một kích thước theo tên:

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

Khi gọi không kèm tên, the_post_thumbnail() dùng post-thumbnail. Vì vậy kích thước ảnh đại diện thật trên theme cổ điển là kích thước được nêu tên trong template, và trang lưu trữ blog có thể dùng kích thước khác với trang bài viết đơn.

Theme khối

Theme khối, kể cả các theme miễn phí trên trang này, in ảnh đại diện bằng khối Ảnh đại diện. Tài liệu các khối lõi liệt kê thiết lập của khối này, gồm sizeSlug (tải kích thước đã đăng ký nào), aspectRatio, width, height và scale.

Điều này thay đổi chỗ bạn cần xem. Mở Giao diện > Trình chỉnh sửa, sửa template Bài viết đơn và chọn khối Ảnh đại diện. Thanh bên cho biết khối đang tải kích thước ảnh nào và có đặt tỉ lệ khung hình hay không. Tỉ lệ khung hình được áp dụng trên trình duyệt bằng CSS, nên file giữ nguyên còn khung hiển thị thay đổi. Nếu khối yêu cầu khung 16:9 mà ảnh của bạn vuông, một phần ảnh sẽ bị ẩn. Template lưu trữ và trang chủ có thể dùng thiết lập khác template bài viết đơn, nên hãy kiểm tra từng cái.

Cách tìm kích thước ảnh đại diện của theme

Thử lần lượt các cách sau. Cách đầu tiên cho bạn câu trả lời là đủ.

1. Xem tài liệu của theme. Theme tốt thường ghi rõ kích thước ảnh đại diện khuyến nghị. Nếu có, hãy dùng nó.

2. Liệt kê kích thước đã đăng ký bằng WP-CLI. Nếu bạn có quyền dùng dòng lệnh, wp media image-size in ra mọi kích thước đã đăng ký kèm chiều rộng, chiều cao, thiết lập cắt và tỉ lệ:

   wp media image-size

3. Tìm trong file của theme. Với theme cổ điển, tìm set_post_thumbnail_size và add_image_size trong functions.php (và các file nó nạp vào), rồi tìm trong single.php hoặc các phần template tên được truyền cho the_post_thumbnail(). Với theme khối, kiểm tra khối Ảnh đại diện trong Trình chỉnh sửa trang như mô tả ở trên.

4. Kiểm tra một bài viết đang chạy. Nhấp chuột phải vào ảnh đại diện, chọn Kiểm tra (Inspect) và đọc tên file trong src. WordPress thêm kích thước vào tên các bản sao đã đổi cỡ, nên my-photo-1200x675.jpg cho biết theme đã tải bản 1200 x 675. Hãy xem cả srcset, vì trên màn hình hẹp trình duyệt có thể chọn bản nhỏ hơn. Nếu tên không có kích thước, file kích thước đầy đủ đã được dùng.

Khi đã biết mục tiêu, hãy cho một ảnh mẫu chạy qua công cụ kích thước ảnh để xem từng bản sao sẽ trông thế nào trước khi tải lên cả loạt.

Chọn kích thước ảnh tải lên

Khi đã biết kích thước của theme, bốn lựa chọn quyết định kết quả có đẹp hay không.

• Chiều rộng. Tải lên ít nhất bằng chiều rộng theme hiển thị. Để sắc nét trên điện thoại và laptop màn hình mật độ cao, nhắm khoảng gấp đôi chiều rộng đó. Với ô rộng 1200px, nghĩa là 2400px. WordPress tạo bản sao nhỏ hơn từ ảnh bạn tải lên và không bao giờ tạo bản lớn hơn, nên ảnh gốc quá nhỏ là nguyên nhân phổ biến nhất của ảnh bị mờ sau khi tải lên.
• Tỉ lệ khung hình. Khớp với tỉ lệ cắt của theme. Nếu theme cắt về 16:9, hãy đưa ảnh 16:9 và giữ chủ thể gần giữa để cắt cứng không làm mất đầu người hay chữ.
• Dung lượng file. Một ảnh 2400px lưu dạng JPEG ở chất lượng hợp lý thường chỉ vài trăm kilobyte. Tải lên file máy ảnh 6000px chỉ thêm việc: WordPress vẫn thu nhỏ mọi ảnh trên 2560px, và các pixel thừa không bao giờ đến tay người xem.
• Định dạng file. WordPress chấp nhận tải lên WebP từ phiên bản 5.8 và AVIF từ 6.5, miễn là thư viện xử lý ảnh trên máy chủ của bạn hỗ trợ chúng. Cả hai thường cho file nhỏ hơn JPEG ở chất lượng tương đương.

Ảnh chia sẻ mạng xã hội là việc riêng

Khi ai đó chia sẻ bài viết của bạn lên Facebook, LinkedIn hay mạng khác, phần xem trước lấy từ thẻ og:image, thứ mà plugin SEO thường điền từ ảnh đại diện. Tài liệu chia sẻ của Facebook khuyến nghị ảnh tối thiểu 1200 x 630 pixel, càng gần tỉ lệ 1.91:1 càng tốt.

Bạn cũng sẽ thấy 1200 x 628 được khuyến nghị. Kích thước này gần như đúng 1.91:1, còn 1200 x 630 ra khoảng 1.90:1. Hai kích thước chỉ chênh nhau 2 pixel chiều cao, nên dùng cái nào cũng được.

Nếu kích thước hiển thị của theme cũng gần 1.91:1, một ảnh 1200 x 630 (hoặc 2400 x 1260) dùng được cho cả hai. Nếu theme cắt về 16:9 hoặc vuông, hãy giữ nội dung quan trọng xa mép trái và mép phải, hoặc đặt một ảnh mạng xã hội riêng trong plugin SEO.

Google Discover có khuyến nghị riêng về ảnh. Nguyên tắc về Discover của Google khuyến nghị ảnh rộng ít nhất 1200px, tổng cộng hơn 300.000 pixel, theo tỉ lệ 16:9 như 1200 x 675. Ảnh lớn cũng cần thiết lập robots max-image-preview:large, thứ mà WordPress đã tự thêm theo mặc định từ phiên bản 5.7, trừ khi trang được đặt để ngăn công cụ tìm kiếm đánh chỉ mục.

Cách đổi kích thước ảnh đại diện

Thay đổi ở đâu tùy vào kích thước và theme của bạn.

Kích thước lõi (thumbnail, medium, large). Vào Cài đặt > Media và đổi chiều rộng, chiều cao. Tài liệu màn hình cài đặt Media mô tả các trường này, gồm cả ô cắt cho thumbnail.

Kích thước của theme cổ điển. Đừng sửa theme cha, vì bản cập nhật theme sẽ ghi đè thay đổi của bạn. Thêm giá trị mới vào functions.php của theme con. Đăng ký lại một kích thước với cùng tên sẽ thay thế nó, và phần thiết lập của theme con phải chạy sau theme cha:

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

Độ ưu tiên 11 khiến đoạn này chạy sau theme cha được gắn ở độ ưu tiên mặc định 10. Hãy kiểm tra mã của theme cha và điều chỉnh nếu nó dùng độ ưu tiên muộn hơn.

Theme khối. Đổi kích thước ảnh và tỉ lệ khung hình của khối Ảnh đại diện trong template của Trình chỉnh sửa trang. Không cần code, và thay đổi áp dụng cho mọi bài viết dùng template đó.

Một ảnh, không cần code. Để chọn phần được giữ lại khi cắt trên một ảnh cụ thể, hãy mở ảnh từ Media > Thư viện và nhấp Sửa ảnh. Cắt ảnh theo tỉ lệ của theme (công cụ cắt nhận tỉ lệ khung hình như 16:9) hoặc thu phóng ảnh, rồi lưu. WordPress áp dụng thay đổi cho mọi kích thước của ảnh đó và giữ lại file gốc, nên sau này bạn có thể hoàn tác bằng Khôi phục ảnh gốc.

Tạo lại thumbnail đã có

Kích thước đã đổi chỉ áp dụng cho ảnh tải lên mới. Ảnh đã có trong thư viện media giữ bản sao cũ cho đến khi bạn dựng lại chúng. Lệnh wp media regenerate làm việc này:

wp media regenerate --yes

Các tùy chọn hữu ích theo tài liệu WP-CLI:

• --image_size=hero-wide chỉ dựng lại kích thước đó. Lặp lại cờ này cho nhiều kích thước.
• --only-missing tạo các kích thước chưa có và không đụng tới file đã có, nhanh hơn sau khi thêm kích thước mới.
• --skip-delete giữ lại file thumbnail cũ. Dùng nó nếu các trang khác, bản tin hoặc feed liên kết thẳng tới các file đó.

Nếu không có dòng lệnh, plugin Regenerate Thumbnails từ thư mục plugin WordPress.org làm việc tương tự từ bảng quản trị. Với thư viện lớn, hãy sao lưu trước, vì việc tạo lại ghi đè rất nhiều file.

Lỗi thường gặp

• Dừng lại ở 1200 x 630. Đó là điểm khởi đầu tốt và hợp với xem trước liên kết, nhưng nếu theme cắt về 16:9 hoặc vuông, một phần ảnh sẽ bị cắt. Hãy kiểm tra kích thước của theme trước khi tải lên cả loạt.
• Tắt các kích thước được tạo ra để “giữ ảnh gốc”. Nếu theme không có bản sao nhỏ hơn, nó có thể tải file đầy đủ trên mọi màn hình, làm trang chậm trên điện thoại. Các bản sao đổi cỡ tồn tại chính là để tránh việc đó.
• Sửa code kích thước ảnh mà bỏ qua bước tạo lại. Code vẫn chạy, nhưng chỉ cho ảnh tải lên mới. Đây là lý do nhiều người kết luận việc đổi kích thước “không có tác dụng”.
• Đổi kích thước trong theme cha. Lần cập nhật theme tiếp theo sẽ xóa nó. Hãy dùng theme con hoặc Trình chỉnh sửa trang.

Nếu ảnh vẫn trông sai sau khi bạn đã khớp kích thước, tỉ lệ và tạo lại thumbnail, hãy so tên file trình duyệt đã tải với các kích thước mà công cụ kích thước ảnh cho biết WordPress lẽ ra phải tạo. Khi chúng khác nhau, thường là một plugin tối ưu hoặc bộ đổi cỡ ảnh của CDN nằm giữa WordPress và người xem đang phục vụ phiên bản riêng của nó.