Bỏ qua tới nội dung
Ảnh & media

Cách tắt ảnh -scaled trong WordPress (big_image_size_threshold)

Khắc phục ảnh WordPress bị mờ bằng cách nâng hoặc bỏ hẳn giới hạn 2560px với filter big_image_size_threshold, và hiểu vì sao up lại ảnh mới là bước ai cũng bỏ qua.

Đã đăng

Thêm một filter vào big_image_size_threshold trả về false và WordPress sẽ ngừng tạo bản -scaled khi up ảnh. Trả về một con số thay vì thế thì bạn nâng giới hạn chứ không bỏ nó. Cả hai đều đặt trong functions.php hoặc một mu-plugin nhỏ, và cả hai chỉ ảnh hưởng tới những ảnh up lên sau khi filter có hiệu lực.

// Disable the cap entirely — no -scaled copies at all.
add_filter( 'big_image_size_threshold', '__return_false' );
// Or just raise it. Longest edge, in pixels.
add_filter( 'big_image_size_threshold', function () {
    return 3840;
} );

WordPress thực ra đang làm gì

Từ WordPress 5.3, mỗi ảnh up lên đều được đo ở cạnh dài nhất. Nếu cạnh đó lớn hơn big_image_size_threshold — mặc định là 2560px — WordPress mã hoá lại ảnh xuống đúng giới hạn đó, lưu thành your-photo-scaled.jpg, rồi viết lại metadata của attachment để kích thước full giờ trỏ tới bản scaled.

Ảnh gốc của bạn không bị xoá. Nó vẫn nằm trên ổ đĩa với tên file ban đầu, được ghi lại trong metadata của attachment, và truy cập được trong PHP qua wp_get_original_image_path(). Nhưng không có gì ở giao diện ngoài phục vụ nó. Không phải trình soạn thảo khối, không phải srcset, không phải bản xem trước trong thư viện media. Nó nằm đó như một bản lưu trữ.

Mọi thứ phía sau sau đó đều được sinh ra từ file scaled, chứ không phải từ thứ bạn đã up lên:

Kích thướcNguồn để dựng ra nó
fullbản -scaled
large, medium_large, medium, thumbnailbản -scaled
Kích thước tuỳ chỉnh từ add_image_sizebản -scaled
Kích thước của theme và plugin, ví dụ woocommerce_thumbnailbản -scaled
Các ứng viên srcsetbản -scaled

Đúng một sự thật đó là lý do khiến rất nhiều người mắc bẫy.

Vì sao đây thường là nguyên nhân của chuyện “ảnh nét mà nhìn cứ mờ mờ”

Hai chuyện xảy ra cùng lúc, và chỉ một trong hai là dễ thấy.

Cái dễ thấy là độ phân giải. Bạn up một tấm ảnh 4000px làm hero tràn chiều rộng. WordPress đưa cho trình duyệt 2560px. Trên màn hình thường lấp đầy khung 1600px, không ai nhận ra. Trên màn retina 2x, khung đó cần khoảng 3200 điểm ảnh thật, chỉ nhận được 2560, và trình duyệt phóng to phần thiếu. Viền mềm nhũn, chi tiết bệt, chữ trong ảnh nhoè đi.

Cái ít thấy hơn là việc mã hoá lại. Bản -scaled không phải là một bản cắt không mất dữ liệu từ file của bạn. WordPress giải mã ảnh bạn up, thu nhỏ nó, rồi nén lại theo thiết lập chất lượng JPEG của chính nó. Nếu ảnh gốc của bạn vốn đã là JPEG nén từ Lightroom hay từ điện thoại, thì đó là lần mã hoá thế hệ thứ hai: nhiễu nén chồng lên nhiễu nén. Chi tiết nhỏ, hạt phim và các vùng chuyển màu phẳng chịu thiệt nặng nhất. Bạn thấy được điều này ngay cả khi kích thước điểm ảnh trông có vẻ đủ.

Hãy xác nhận trước khi đổi bất cứ thứ gì. Mở ảnh trong tab mới và đọc tên file trên URL. Có -scaled.jpg nghĩa là giới hạn đã kích hoạt. Một hậu tố kích thước kiểu -1536x1024.jpg lại là chuyện khác — srcset đã chọn một bản trung gian quá nhỏ, và filter ngưỡng sẽ không giúp gì được cho bạn ở đó.

Trên server:

find wp-content/uploads -name '*-scaled.*' | wc -l

Nếu con số đó lớn, giới hạn này đã và đang định hình cả thư viện ảnh của bạn.

Bạn cũng có thể thả một file vào công cụ tắt ảnh scaled để xem một ảnh nguồn nhất định có chạm ngưỡng hay không và bản scaled sẽ ra kích thước bao nhiêu, trước khi quyết định chọn thiết lập nào.

Cái giá thật sự

Phần lớn bài viết nói rằng tắt giới hạn này sẽ tốn dung lượng ổ đĩa. Điều đó ngược lại, và đáng để nói cho chính xác.

Dung lượng ổ đĩa trên mỗi ảnh giảm đi một chút. Khi ngưỡng còn bật, WordPress lưu ảnh gốc một bản scaled cỡ lớn. Khi tắt đi, bạn chỉ giữ ảnh gốc. Một file thay vì hai.

Băng thông và độ nặng trang tăng lên, đôi khi tăng nhiều. Khi giới hạn bị tắt, full chính là file gốc chưa qua xử lý của bạn. Bất cứ thứ gì trỏ tới hay hiển thị kích thước full — một lightbox, một plugin thư viện ảnh, một liên kết “xem ảnh gốc”, một theme yêu cầu full cho ảnh hero — giờ sẽ gửi đi một file có thể nặng 6MB thay vì 900KB. Trên di động đó là vấn đề Largest Contentful Paint thật sự, và CDN ảnh không phải lúc nào cũng cứu được bạn vì một số CDN cho file đi thẳng qua khi vượt một ngưỡng dung lượng.

Bộ nhớ lúc up ảnh tăng lên. Thu nhỏ một ảnh 6000px trong PHP tốn nhiều bộ nhớ hơn hẳn so với ảnh 2560px. Trên hosting chia sẻ giá rẻ với giới hạn bộ nhớ PHP thấp, tắt giới hạn này là một cách rất dễ dẫn tới up ảnh thất bại hoặc thumbnail chỉ được tạo một nửa. Nâng ngưỡng lên 3840 thay vì bỏ hẳn là phiên bản an toàn hơn của cùng thay đổi đó.

Đó là lý do lựa chọn mặc định hợp lý cho phần lớn site là nâng con số lên, chứ không phải bỏ nó đi. Bỏ hẳn là đúng khi bạn đang phục vụ những ảnh thật sự cần độ phân giải đầy đủ: thư viện ảnh chất lượng in, zoom sản phẩm, ảnh kiến trúc, bất cứ trường hợp nào người dùng được kỳ vọng sẽ soi kỹ ảnh gốc.

Áp dụng thay đổi cho đúng cách

1. Đặt filter ở nơi nó sống sót được. functions.php trong child theme thì được. Một mu-plugin một file thì tốt hơn, vì đổi theme sẽ không âm thầm huỷ nó.

<?php
/**
 * Plugin Name: Raise big image threshold
 */
add_filter( 'big_image_size_threshold', function () {
    return 3840;
} );

2. Up lại những ảnh bị ảnh hưởng. Đây là bước ai cũng bỏ qua rồi kết luận rằng filter không chạy. Ngưỡng chỉ được đánh giá đúng một lần, lúc up ảnh. Các attachment đã tồn tại giữ metadata cũ mãi mãi. Hãy xoá attachment và up lại, rồi sửa các tham chiếu trong bài viết của bạn.

3. Đừng trông đợi việc tạo lại thumbnail cứu vãn được gì. wp media regenerate qua WP-CLI dựng lại các kích thước trung gian từ bất cứ file nào mà metadata gọi là file full — và với một ảnh đã bị giới hạn thì đó chính là bản -scaled. Nó không thể khôi phục chi tiết đã bị vứt bỏ. Hữu ích như một bước dọn dẹp sau khi up lại. Vô dụng nếu dùng như một cách sửa lỗi đơn độc.

4. Kiểm tra kết quả, đừng đoán. Sau khi up lại, mở ảnh ở giao diện ngoài và đọc lại tên file. Không có -scaled nghĩa là filter đang hoạt động.

Khi tắt là nước đi sai

Nếu ảnh nguồn của bạn vốn đã dưới 2560px mà vẫn trông mờ, thì ngưỡng này chưa từng liên quan. Vấn đề là khung hiển thị lớn hơn số điểm ảnh sẵn có, và câu trả lời là một file nguồn lớn hơn hoặc một khung nhỏ hơn — không phải filter này.

Nếu tên file được phục vụ mang hậu tố kích thước thay vì -scaled, thì srcset đã chọn một ứng viên nhỏ. Chuyện đó thường do lệch giữa chiều rộng nội dung mà theme của bạn khai báo và khung mà ảnh thực sự hiển thị trong đó. Tắt giới hạn không thay đổi được gì.

Và nếu một plugin đang viết lại src của bạn sang một proxy tối ưu ảnh hay CDN, thì không điều gì ở trên có hiệu lực cho tới khi bạn kiểm tra xem proxy đó đang phục vụ cái gì. Hãy so cái WordPress lẽ ra phải sinh ra với cái trình duyệt thực sự tải về; khi hai thứ đó lệch nhau, hãy nhìn vào thứ nằm giữa chúng.

FAQ

Câu hỏi

Làm sao tắt ảnh scaled trong WordPress?

Thêm một filter vào big_image_size_threshold và trả về false. Đặt nó trong functions.php hoặc trong một mu-plugin nhỏ. Trả về false sẽ tắt hẳn giới hạn, nên ảnh up lên giữ nguyên kích thước gốc và không có bản -scaled nào được tạo ra. Trả về một con số, ví dụ 3840, thì là nâng giới hạn chứ không phải bỏ nó đi.

Hậu tố -scaled trong tên file WordPress nghĩa là gì?

Nó đánh dấu một bản đã được mã hoá lại mà WordPress tạo ra vì ảnh bạn up lên vượt quá 2560px ở cạnh dài nhất. Bản đó trở thành kích thước full ở mọi nơi trên site của bạn. File gốc vẫn nằm trên ổ đĩa với tên bình thường nhưng không có gì ở giao diện ngoài trỏ tới nó, và mọi thumbnail cùng mọi ứng viên srcset đều được dựng từ bản scaled.

Tắt ảnh scaled có tốn thêm dung lượng ổ đĩa không?

Tính trên mỗi ảnh thì thường lại tốn ít hơn một chút, vì WordPress thôi không ghi thêm một file lớn thứ hai bên cạnh file gốc của bạn. Cái giá thật nằm ở băng thông chứ không phải dung lượng lưu trữ. Khi giới hạn bị tắt, mọi thứ trỏ tới kích thước full sẽ phục vụ đúng file gốc chưa qua xử lý, có thể nặng vài megabyte trên kết nối di động.

Tắt ngưỡng này có sửa được những ảnh đã bị mờ sẵn không?

Không. Filter chỉ ảnh hưởng tới ảnh up lên sau đó. Những ảnh đã có trong thư viện vẫn giữ metadata trỏ tới bản scaled của chúng, và việc tạo lại thumbnail cũng dựng lại các kích thước từ chính file đã bị giới hạn đó. Muốn lấy lại độ phân giải, bạn phải xoá attachment và up lại sau khi filter đã có hiệu lực.

2560px có phải là ngưỡng nên giữ không?

Với phần lớn site nội dung thì đúng vậy. Ảnh nguồn 2560px đủ phủ một khung hiển thị 1280px ở mật độ điểm ảnh 2x, vốn là trường hợp phổ biến. Hãy nâng lên 3840 nếu bạn dùng ảnh hero tràn viền, tính năng zoom sản phẩm, hoặc thư viện ảnh chụp. Chỉ tắt hẳn khi bạn thật sự cần phục vụ file gốc nguyên vẹn.