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!
Hướng dẫn sử dụng plugin All-in-One WP Migration and Backup
Plugin WP All-in-One Migration là một công cụ mạnh mẽ để sao lưu, di chuyển [...]
Th7
Bật mặc định cho phép đánh giá của WooCommerce
Chào bạn, trong trường hợp nào đó vô tình web bạn bị tắt cho phép [...]
Th1
Hướng dẫn Thêm / Thay đổi tabs sản phẩm của WooCommerce
Thêm đoạn code này vào cuối file functions.php: Xoá tab bất kỳ Sử dụng đoạn [...]
Th1
Cách vô hiệu hóa Lazy Load trong WordPress
Chào bạn, Kể từ WordPress 5.5 được phát hành vào ngày 11/8/2020 thì WordPress đã [...]
Th12
Hướng dẫn xoá bỏ size ảnh, fix lỗi ảnh bị mờ trên WordPress
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ý [...]
Th12
Cách Fix Lỗi Redirect Loop Sau Khi Kích Hoạt SSL Của Cloudflare
Cloudflare là một dịch vụ hiệu suất và bảo mật có uy tín với Mạng [...]
Th12
How to get taxonomy/category direct children only
How to get taxonomy/category direct children only – Cách lấy chuyên mục/term con trực tiếp [...]
Th12