Xin chào các bạn, trong bài viết này mình xin hướng dẫn cách xử lý vấn đề ảnh bị mờ, mặc dù chúng ta đã cố đăng ảnh thật nét rồi nhưng vẫn cứ mờ. Nguyên nhân là do thuộc tính “srcset” kết hợp với thuộc tính “sizes” trong thẻ img gây ra chuyện đó.
Tính năng này được phát hành từ WordPress 4.4, nó là tính năng giúp responsive hình ảnh một cách hiệu quả và hữu ích nếu chúng ta biết cách dùng. Tuy nhiên nó sẽ là thảm hoạ nếu chúng ta không biết cách dùng hoặc đối với người dùng mới không biết đến tính năng này.
Một số thảm hoạ mà nó sẽ gây ra, ngoài việc khiến ảnh bị mờ, đầu tiên là nó sẽ làm tăng request đến server khiến web bị chậm đi, tăng dung lượng hosting/server vì 1 ảnh được cắt ra nhiều phiên bản kích thước khác nhau, như vậy rất tốn tiền để duy trì hosting.
Vì vậy trong bài viết này mình sẽ đưa ra cách giải quyết như sau:
- Thay đổi hoặc xoá bỏ giới hạn của size ảnh, tức là upload kích thước bao nhiêu thì nó sẽ cắt ảnh đúng giá trị của mình set hoặc giữ nguyên không cắt (lưu ý nếu xoá bỏ giới hạn thì chúng ta cần chủ động giảm tải dung lượng và chất lượng ảnh trước khi đăng).
- Xoá bỏ toàn bộ các size ảnh, không cho tạo size ảnh nào khác ngoài ảnh gốc. Tác dụng là để giảm dung lượng hosting/server cũng như giảm request, tăng tốc độ web.
Bắt đầu vào từng bước:
– Đầu tiên là thay đổi hoặc xoá bỏ giới hạn của size ảnh:
Dán đoạn code sau vào cuối file functions.php:
add_filter( 'max_srcset_image_width', function() {
return false; // đặt giá trị là số nguyên cụ thể ví dụ 1920 hoặc false để xoá bỏ giới hạn.
} );
– Tiếp theo là xoá bỏ toàn bộ các size ảnh:
add_filter( 'intermediate_image_sizes_advanced', '__return_false' );
Chúc các bạn thành công, nếu gặp khó khăn hoặc thắc mắc nào, hãy để lại bình luận để được giải đáp!
