WordPress image blurring solution: 3 strokes to retain high-definition image quality

Many friends in the process of using WordPress to build a website will encounter a problem: uploaded images on the site is not clear.
The image is clearly high resolution and looks very clear before uploading, but after displaying it is blurred, jagged edges, and details are lost. This is because the WordPress system by default willCompressed imagesThe JPEG format, in particular, automatically reduces the quality of the picture.

This post shares a few ways to help retain image clarity for a more aesthetically pleasing and professional looking webpage.

I. Reasons for WordPress Default Compression

Starting with WordPress 4.5, the system will take a look at the uploaded JPEG Images are compressed to a quality of 82% in order to reduce the size and increase the opening speed of the website.

While the intentions are good, the results are often:

Picture blurring
Poorly defined edges, pixel distortion
Worse on Retina HD devices

II. Method 1: Turn off automatic compression with code (for those with a little experience)

Use this simple code to turn off WordPress' default compression behavior.

The steps are as follows:

Click [Appearance] → [Theme File Editor]

Find and open functions.php file

Add the following code at the bottom:

// Turn off WordPress JPEG image compression
add_filter('jpeg_quality', function($arg){ return 100; });

This code is meant to adjust WordPress compression to 100%, preserving the quality of the original image.

After completing the operation, the new image uploaded will remain clear.

It is recommended that you back up your files before operating, just in case.

Method 2: Using the Imsanity plug-in (recommended for zero base)

Users who are not familiar with the code can also use plug-ins to solve the problem. Here is a recommendation for a free plugin that is easy to operate - theImsanity

What does Imsanity do?

Automatically limit the maximum size of uploaded images
Setting the default compression ratio
Provides a graphical interface for easy adjustment of settings
Avoid uploading oversized or blurry images that will affect your website's effectiveness

Installation and setup process:

1. Access to the back office

2. Click [Plug-in] → [Install Plug-in].

3. Search terms:Imsanity

4. Install and enable plug-ins

5. Click [Settings] → [Imsanity] to configure the following:

Maximum width: 1920
Maximum height: 1080
JPEG compression quality: 90 or 100 (the higher the value, the higher the sharpness)

After saving, the plugin will automatically process the image when it is uploaded, controlling the size and quality to avoid blurring due to over-compression.

Imsanity does not alter already uploaded images, but supports batch reprocessing of old images.

Method 3: Use of WebP image format

WebP It is a modern image format with the advantage of clear quality and lightweight size, balancing image quality and performance.

WordPress 5.8 started to support direct WebP image uploads.

You can use the following tools or plug-ins to convert JPG, PNG to WebP:

Online tools: Squoosh, TinyPNG

Plugin Recommendations:ShortPixelWebP Express

The WebP format is suitable for banners, product images, article covers, etc., and has good browser compatibility.

Fifth, additional recommendations: do not use WordPress auto-crop small images to display large images

WordPress automatically generates multiple sizes (thumbnail, center, large) after uploading an image.

If you use the small image automatically cropped out by the system to display as a large image, it will be blurred.

The correct approach is as follows:

Upload the original high-resolution image large enough
Use the HTML or CSS to set the display size]

Avoid using -300x300.jpg A compressed image like this serves as the main image

VI. Summary of recommended settings

methodologies	operating difficulty	Suitable for people
Code Disable Compression	moderate	Those with some experience
Imsanity Plugin	simpler	novice user
Using the WebP Format	moderate	For those seeking quality and loading speed
Avoid using thumbnails to zoom in	simpler	everyone

VII. Concluding remarks

blurred pictureThe root of the problem is WordPress auto-compression and users not controlling the size after uploading.
By controlling the quality from the upload source and managing the image size with the right tools, the visual effect of the page will be more clear and professional.

If you are bothered by blurry pictures, try the methods in this article, which are believed to quickly solve your problem.

More WordPress optimization, image processing skills will continue to share in the follow-up, welcome to stay tuned!

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off