Information on Image Size and Blurriness in WordPress
Two common causes of poor-quality images on WP are uploading media files that have not been edited for quality or uploading a different size from what your theme can display. Without image editing, the tiniest discrepancy is amplified when the image is stretched to fit larger screens.
Find your theme’s default sizes Every WordPress theme has default sizing rules coded into the functions.php file.
Go into your theme editor, open the functions.php file, and look for the code for custom image sizes.
The code to look for is ‘add image size’.
It will look like this:
if ( function_exists( 'add_image_size' ) ) { add_image_size( 'gridme-1222w-autoh-image', 1222, 9999, false );
add_image_size( 'gridme-922w-autoh-image', 922, 9999, false );
add_image_size( 'gridme-480w-360h-image', 480, 360, true ); }
In the sample code above, it shows three image sizes, two of which are set to false, and the final one set as ‘480, 360, true’.
Having the image sizes set as ‘false’ means those sizes will not be applied. Setting image sizes to ‘true’ will apply the resizing rules.
When the size rules are set to stretch either height or width, the result is blurriness. If your theme is auto-enlarging image sizes, change ‘true’ to ‘false’ in your themes functions.php file to disable that action.
The vast majority of WP themes no longer do this because of responsive web design.
In the pre-2012 era, prior to mobile web design turning somewhat mainstream, these auto-size rules became obsolete in the WP developer community.
Best tip
Avoid blurry images by uploading the exact size. If that is not possible, upload the largest image file and let WordPress shrink it.
Blurring happens when images uploaded are smaller than the size that they are displayed. It is better to shrink an image than enlarge it.
When you enlarge a small image file, that is when images become blurred on WordPress. It makes pixelation on a small scale, bigger. Thus, more obvious.