11 Cách khắc phục hình ảnh mờ trong WordPress?

Tối ưu hóa hình ảnh là một trong những kỹ thuật quan trọng trong WordPress dưới góc độ SEO.

Hình ảnh có kích thước lớn có thể sẽ làm chậm trang web của bạn, đặc biệt là trên thiết bị di động.

Bạn có thể sử dụng plugin tối ưu hóa hình ảnh để nén hình ảnh xuống kích thước nhỏ hơn.

Mặc dù việc làm này sẽ tăng tốc độ tải trang, nhưng đôi khi nó sẽ làm mờ hình ảnh của bạn dựa vào mức độ nén.

Đôi khi bạn có thể muốn hình ảnh của mình hiển thị rõ ràng như hình ảnh sản phẩm trong cửa hàng WooC Commerce.

Hoặc bạn đang sở hữu một trang web về nhiếp ảnh và bạn muốn hình ảnh của mình được hiển thị với chất lượng cao.

Bạn có đang gặp khó khăn khi hình ảnh bị mờ trong WordPress, dưới đây là những cách để bạn có thể khắc phục.

Hình ảnh nổi bật so với hình ảnh trên trang

Trước khi đi sâu vào 11 phương pháp khắc phục hình ảnh bị mờ, bạn nên hiểu sự khác biệt giữa hình ảnh nổi bật và các hình ảnh khác trên trang web.

Giao diện của bạn hiển thị các hình ảnh nổi bật được tải lên trong trình chỉnh sửa bài đăng.

Nó nằm trong tất cả các trang lưu trữ như chỉ mục blog, kho lưu trữ tác giả, danh mục, thẻ, sản phẩm..

Hình ảnh thông thường bạn tải lên trong trình chỉnh sửa bài đăng hoặc thông qua phần “Phương tiện > Thêm mới” sẽ không xuất hiện trên các trang lưu trữ.

Chúng sẽ được đính kèm với các bài đăng riêng lẻ và chỉ hiển thị bên trong nội dung.

Ví dụ, những hình ảnh bạn nhìn thấy trong bài viết này là những hình ảnh bình thường được tải lên thông qua trình chỉnh sửa Gutenberg.

Vì vậy, trước tiên bạn nên tìm hình ảnh nào đang gặp sự cố trên trang web của mình.

Đó có thể là hình ảnh nổi bật, hình ảnh trong nội dung hoặc tất cả hình ảnh.

Tùy thuộc vào từng trường hợp, bạn có thể thử các phương pháp sau để khắc phục chúng.

1. Tạo lại hình thu nhỏ hình ảnh nổi bật

Nếu bạn gặp sự cố với hình ảnh nổi bật, thì lý do khả dĩ nhất là thiếu hình ảnh thu nhỏ.

Theo mặc định, WordPress sử dụng ba hình ảnh thu nhỏ của hình ảnh gốc trong phần “Cài đặt > Phương tiện”.

Ngoài ra, giao diện của bạn có thể sử dụng các hình thu nhỏ khác nhau để hiển thị hình ảnh nổi bật trong tiện ích con, bài đăng và trang lưu trữ.

Bất cứ khi nào bạn thay đổi giao diện, hãy sử dụng plugin Regenerate Thumbnails để tạo hình thu nhỏ mới cho các hình ảnh nổi bật đã tải lên trước đó. 

Nếu không, giao diện mới sẽ không tìm thấy kích thước hình thu nhỏ chính xác và thay đổi kích thước các hình ảnh nổi bật có sẵn để phù hợp với bố cục.

Điều này sẽ tạo ra khoảng trắng xung quanh hình ảnh nếu hình ảnh cũ nhỏ hơn hoặc gây ra hiệu ứng mờ nếu hình ảnh cũ có kích thước lớn hơn.

Tạo lại hình ảnh thu nhỏ sẽ khắc phục sự cố này và giúp cho giao diện mới hiển thị kích thước chính xác.

Lưu ý: Bạn có thể thiết lập cắt xén hình ảnh cho WooCommerce trong phần “Giao diện > Tùy biến > WooC Commerce > Hình ảnh sản phẩm”.

Khi bạn thay đổi giao diện trang web, WooC Commerce sẽ tự động tạo lại hình ảnh sản phẩm.

Bạn cũng có thể tạo lại hình ảnh theo cách thủ công bằng cách đi tới phần “WooC Commerce > Status > Tools”.

Nhấp vào nút “Tái tạo” hiển thị trên tùy chọn “Tạo lại hình thu nhỏ của cửa hàng“.

2. Sử dụng hình ảnh thích ứng

Như mình vừa nói ở trên, giao diện của bạn sẽ tạo hình thu nhỏ hoặc sử dụng hình thu nhỏ mặc định của WordPress để chọn kích thước hình ảnh phù hợp cho các thiết bị khác nhau (cho cả hình ảnh nổi bật và hình ảnh trong nội dung).

Ví dụ: Hình ảnh 900×360 pixel trên máy tính để bàn sẽ được thay đổi kích thước thành 300×130 pixel trên thiết bị di động hoặc hiển thị 300×300 với hình ảnh kích thước trung bình mặc định của WordPress.

Tuy nhiên, có nhiều người dùng đã vô hiệu hóa hình thu nhỏ mặc định của WordPress bằng cách đặt kích thước thành 0x0.

Ngoài ra, người lập trình giao diện cũng tự ý thay đổi kích thước hình ảnh trên các thiết bị nhỏ hơn mà không cần đăng ký hình thu nhỏ thích hợp trong Chức năng chủ đề.

Khi bạn không sử dụng kích thước hình ảnh phù hợp, nó sẽ gây ra sự cố mờ trên các thiết bị nhỏ hơn.

Và khi bạn kiểm tra trang web trên Google PageSpeed ​​​​Insights, nó sẽ hiển thị các cảnh báo như “Thay đổi kích thước hình ảnh đúng cách”.

Nếu giao diện của bạn không hoạt động mượt mà hoặc nếu bạn không biết cách sử dụng tất cả các kích thước hình ảnh cần thiết, thì giải pháp tốt nhất là sử dụng plugin để tạo hình ảnh thích ứng.

Bạn có thể thử các plugin như Adaptive Images for WordPress, ShortPixel Adaptive Images hoặc Flying Images trên trang web thử nghiệm của mình sau đó chọn ra một plugin hoạt động tốt nhất trang web chính của bạn.

3. Hình ảnh Retina và HD

Nếu bạn gặp sự cố hình ảnh bị mờ, thì bạn nên sử dụng kích thước hình ảnh có độ phân giải cao gấp 2 lần (hình ảnh Retina) để khắc phục sự cố này.

Một số giao diện thương mại điện tử có sẵn tùy chọn tải lên Logo bình thường và Logo Retina, tuy nhiên nó không dành cho tất cả các hình ảnh.

Bạn có thể sử dụng plugin WP Retina 2X để tạo hình ảnh Retina và điều này chỉ đáp ứng trên các màn hình độ nét cao.

Plugin này cũng thực hiện các tối ưu hóa khác như tạo lại hình thu nhỏ và tắt kích thước hình ảnh tối đa.

4. Tránh thu nhỏ hình ảnh và biểu tượng trong nội dung

Khi bạn tải hình ảnh lên trong trình chỉnh sửa Gutenberg, bạn có thể chia tỷ lệ hình ảnh bằng cách sử dụng cài đặt khối từ thanh bên.

Bạn cũng có thể cắt hình ảnh và thay đổi tỷ lệ khung hình bằng công cụ có sẵn trên thanh công cụ tùy chọn khối.

Khi bạn thay đổi kích thước hoặc tỷ lệ hình ảnh, WordPress sẽ sử dụng một hình ảnh mới cho kích thước đã chọn thay vì hình ảnh gốc mà bạn đã tải lên.

Giả sử bạn tải lên hình ảnh có 1200 x 800 pixel.

Nếu bạn chọn tỷ lệ 50%, bạn có thể thấy nguồn trang mà hình ảnh hiển thị sẽ là 600×400 pixel với tên mới như “image-600×400.jpg”.

Để khắc phục hình ảnh bị mờ, trước tiên hãy chắc chắn rằng bạn không chia tỷ lệ và sử dụng kích thước hình ảnh gốc ban đầu.

Nhấp vào hình ảnh, ở phần menu thả xuống tìm “Kích thước hình ảnh” và sử dụng tùy chọn “Kích thước đầy đủ”.

Bạn sẽ thấy các tùy chọn hình thu nhỏ, trung bình, lớn và các kích thước đến từ “Phương tiện > Cài đặt” như đã nói ở trên.

Khi chọn, kích thước đầy đủ sẽ sử dụng kích thước ban đầu của hình ảnh bạn đã tải lên thay vì sử dụng kích thước khác từ cài đặt.

Cài đặt hình ảnh này sẽ giúp khắc phục tình trạng hình ảnh bị mờ hiển thị trong phần nội dung bài viết.

5. Kiểm tra kích thước hình ảnh tối đa

Hầu hết người dùng WordPress đều vướng phải vấn đề về kích thước tải lên hình ảnh tối đa, chúng thường bị giới hạn ở mức 300 MB.

Bạn có thể đi tới “Phương tiện > Thêm mới” và tìm phần giới hạn “Kích thước tệp tải lên tối đa”.

Điều mà nhiều người dùng không biết là WordPress sẽ giới hạn kích thước hình ảnh tối đa là 2560×2560 pixel.

Tính năng này được đề cập từ phiên bản 5.3 và WordPress sẽ thu nhỏ kích thước xuống nếu bạn tải lên hình ảnh lớn hơn.

Mặt trái bạn đã biết việc thu nhỏ hình ảnh rõ ràng sẽ làm giảm chất lượng và khiến hình ảnh bị mờ.

Nếu bạn không muốn WordPress giảm kích thước hình ảnh của mình, hãy thêm đoạn mã sau vào tệp Function trong giao diện của bạn.

add_filter( 'big_image_size_threshold', '__return_false' );

Ngoài ra bạn có thể sử dụng một plugin đơn giản có tên là Disable “BIG Image” Threshold, nó sẽ giúp bạn thực hiện thay đổi này nếu bạn không muốn chỉnh sửa tệp tin functions.php theo cách thủ công.

Ngoài vấn đề mặc định của WordPress, nhiều plugin tối ưu hóa sẽ hạn chế chiều rộng hình ảnh tối đa.

Điều này có thể làm mờ hình ảnh của bạn nếu chiều rộng vượt quá giới hạn đã đặt.

Nếu bạn không muốn giới hạn chiều rộng, hãy đảm bảo đặt đúng giới hạn và tải lên các kích thước nhỏ hơn hoặc tắt tùy chọn đó trong plugin của bạn.

6. Tải lên hình ảnh rõ nét mà không cần nén

Hầu như tất cả các ứng dụng xử lý ảnh đều cho phép bạn nén ảnh trong khi lưu.

Ví dụ: Mình sử dụng phần mềm Snagit để tạo lại hình ảnh với kích thước phù hợp hơn.

Mặc dù nó giúp giảm kích thước hình ảnh nhưng nó sẽ ảnh hưởng trực tiếp đến chất lượng và khiến hình ảnh bị mờ ngay cả trước khi tải hình ảnh lên WordPress.

Do đó, mình khuyên bạn không nén quá nhiều khi tạo lại hình ảnh của bạn để tránh bị mờ.

7. Tránh tải hình ảnh nhiều lần

Lazy loading (tải chậm) giúp trang web chỉ hiển thị hình ảnh khi người dùng kéo đến vị trí đó trên trang.

Điều này sẽ giúp khắc phục các sự cố liên quan đến hình ảnh trong Google PageSpeed ​​​​Insights vì hình ảnh sẽ không được tải nếu không cuộn.

Tuy nhiên, nó có thể tạo ra các vấn đề dẫn đến hình ảnh bị mờ.

WordPress đã giới thiệu tính năng lazy loading tự nhiên của hình ảnh từ phiên bản 5.4.

Bản cập nhật này sẽ thêm thuộc tính loading = “lazy” cho tất cả hình ảnh trong nội dung, đoạn trích, hình đại diện, nhận xét và tiện ích văn bản.

Nếu bạn đang sử dụng plugin của bên thứ ba, hãy đảm bảo rằng plugin đó tắt tính năng tải chậm mặc định của WordPress.

Nếu không, nó sẽ dẫn đến trùng lặp hình ảnh và khiến hình ảnh tải chậm hiển thị thành hình ảnh giữ chỗ mờ trước khi tải hình ảnh đầy đủ.

Bạn có thể sử dụng plugin như WP Rocket, nó sẽ tự động vô hiệu hóa lazy loading mặc định và sử dụng thiết lập tùy chỉnh.

Lưu ý: Nếu máy chủ lưu trữ của bạn hoặc người dùng có kết nối internet chậm, hình ảnh được tải chậm sẽ hiển thị hình ảnh mờ hoặc hình ảnh giữ chỗ trước khi hiển thị hình ảnh đầy đủ.

Đây không phải là vấn đề của WordPress và bạn cần nâng cấp máy chủ web hoặc sử dụng kết nối internet tốt hơn để kiểm tra xem hình ảnh có đang tải đúng cách hay không.

8. Kiểm tra bộ nhớ đệm hoặc plugin nén hình ảnh

Nếu bạn đang sử dụng plugin tạo bộ nhớ đệm và nhận thấy hình ảnh bị mờ, hãy dọn sạch bộ nhớ cache để kiểm tra xem điều đó có khắc phục được sự cố hay không.

Bạn cũng có thể xóa bộ nhớ đệm ở cấp độ máy chủ và CDN nếu cần thiết.

Các plugin nén hình ảnh như WP Smush mang đến khả năng nén không mất dữ liệu cũng như không ảnh hưởng đến chất lượng hình ảnh.

Mặt khác, một số plugin như SG Optimizer sử dụng tính năng nén không mất dữ liệu và cho phép bạn tự động nén hình ảnh khi tải chúng lên.

Do đó, hãy kiểm tra bộ nhớ đệm, nén hình ảnh hoặc bất kỳ plugin tối ưu hóa hiệu suất nào khác mà bạn sử dụng và tắt tính năng nén mất dữ liệu để khắc phục hình ảnh bị mờ.

9. Hình ảnh WebP sử dụng nén mất dữ liệu

Máy chủ lưu trữ như SiteGround hay dịch vụ CDN như Cloudflare sử dụng dịch vụ chuyển đổi hình ảnh sang định dạng WebP một cách nhanh chóng.

Có hai loại chuyển đổi WebP có sẵn, đó là lossy (mất dữ liệu ) và lossless (không mất dữ liệu).

Nếu bạn đang sử dụng chuyển đổi WebP lossy thì hình ảnh cuối cùng được hiển thị trên trang web có thể trông không giống với hình ảnh gốc mà bạn đã tải lên.

Cách tốt nhất là tắt tùy chọn WebP và kiểm tra bằng cách tải lên một hình ảnh mới.

Nếu điều đó được khắc phục thì đây là nguyên nhân khiến hình ảnh bị mờ.

Bạn nên chọn nén không mất dữ liệu hoặc chọn một plugin khác sử dụng phương pháp này.

10. Kiểm tra CDN của bạn

Như mình đã nói ở trên, CDN như Cloudflare sử dụng chuyển đổi hình ảnh sang định dạng WebP và lazy loading.

Hãy chắc chắn rằng các tính năng này không trùng lặp với plugin và giao diện của bạn cũng như thông qua thiết lập trên các dịch vụ lưu trữ.

Nếu bạn nghĩ rằng đó là do CDN, chỉ cần tắt CDN và kiểm tra xem hình ảnh gốc có hiển thị với chất lượng tốt hơn hay không.

11. Hình ảnh mờ từ nội dung demo

Nhiều người dùng WordPress thường nhập nội dung demo từ giao diện đã mua và bắt đầu tạo nội dung mới từ đó.

Những người bán giao diện trên các thị trường như Envato KHÔNG được phép đưa hình ảnh vào nội dung demo.

Mặc dù bạn sẽ thấy hình ảnh chất lượng tốt trong các trang demo của họ, nhưng bạn sẽ chỉ nhận được hình ảnh mờ (hoặc hình ảnh giữ chỗ) khi tải xuống các tệp giao diện sau khi mua.

Nếu bạn thấy hình ảnh trong nội dung Demo đã nhập bị mờ, hãy thử liên hệ với người bán để khắc phục.