How to avoid WordPress auto-compressing images causing blurriness? Complete Setup Guide

WordPress In order to increase the page loading speed, the uploading of thephotographCompression is automatically applied when the image is compressed. Although this mechanism is helpful to improve performance, but in the display of high-definition images, there are often blurred or missing details of the problem. In this article, we will start from the principle, to provide a complete set of settings to solve the blurring problem caused by WordPress auto-compression of images.

WordPress default image compression mechanism analysis

Starting with WordPress 4.5, the system will automatically set the JPEG Images are compressed to a quality of approximately 82%. This process is performed automatically when the image is uploaded and is intended to reduce the size of the image. However, for pages that are rich in detail and require a high level of image clarity, this compression can result in a visual degradation.

After uploading an image, WordPress also automatically generates multiple thumbnail sizes such as Thumbnail, Medium, Large, etc. These images are likewise compressed.

Two ways to disable WordPress default compression

Method 1: Add code to turn off compression

This can be done with the following code in the theme's functions.php file to turn off default compression handling:

add_filter('jpeg_quality', function($arg){ return 100; });

This code sets the image compression quality to 100%, which means that the original image quality is preserved. If using a child theme, it is recommended that the code be added to thesubthemein it to avoid it not working when the theme is updated.

Method 2: Control with plug-ins

If you are not familiar with the code, you can complete the setup with the help of a plugin, for example:

• Disable JPEG Compression: The default compression processing can be turned off directly.
• WP Resized Image Quality: Allows manual adjustment of the compression level of system-generated images.
• ShortPixel / Smush: In addition to optimizing the image size, it also offers the option to set the sharpness.

Third, the solution to the problem of fuzzy thumbnails

In addition to the original image being compressed, WordPress-generated thumbnails can also be blurry, especially when using "Medium Size" or "Thumbnails" on a page.

1. Turn off automatic thumbnail size generation

In Background Settings → Media, set the default "Thumbnail Size", "Medium Size" and "Large Size" to 0. This will prevent the system from automatically generating images of these sizes.

2. Select full size when inserting images

When editing articles or pages, you should select "Full Size" for inserting pictures to avoid the system selecting small pictures that have been compressed for display.

3. Using plug-ins to control the thumbnail generation logic

Recommended Regenerate Thumbnails Plugins that customize the generation rules to make the images more relevant to the page needs and maintain the picture quality.

Fourth, to cope with high-definition screen picture blurring

For Retina screens and high DPI devices, images with normal resolution will look blurry. To solve this kind of problem, you can refer to the following methods:

Upload high-resolution images

It is recommended to upload an image with a resolution of 2x or more the size of the display. For example, if the display area is 600px, uploading a 1200px or larger image will give you a better display on HD devices.

Using plug-ins that support HD images

for example WP Retina 2x Plugin that automatically generates image files with multiple resolutions, adapted to different devices. The plug-in automatically detects the device type and provides the appropriate version of the image.

V. Recommendations for the use of images in the editor

• Use professional tools (e.g. Photoshop, Photopea) to resize and compress images before uploading;
• Choose "full size" when inserting images to avoid using thumbnails;
• Avoid using small charts in larger sizes;
• Choose a lower compression ratio for high contrast images and avoid automatic system cropping.

summarize

WordPress s automatic image compression mechanism is convenient for the average content manager, but may create blurring problems in scenarios with high image quality requirements. Adjusting compression parameters, disabling system compression, uploading high-resolution images, and rationalizing the use of plug-ins and image sizes are some of the solutions to theblurred imageEffective way to solve the problem. According to the site requirements, flexible selection of compression schemes and image processing methods, in order to obtain a clearer visual presentation.

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