On  WordPress sites  by default  it will automatically reduce the size of each image. To help the web load faster on mobile  because most users  images are often too big.

Why is the image blurry?

Because WordPress is a system that changes appearance. According to the device that can be opened (  responsive  ) , when we upload one image to the website, the WordPress system automatically generates images in three sizes, which are

• Thumbnail size
• medium size
• The size is large

Which size to configure width x height (  dimensions in pixels  ) are not the same depending on the version of WordPress and the theme we choose to use also

Read more:  What is a thumbnail?

View default dimensions in pixels on the web in the Settings > Media section.

When WordPress itself has default dimensions in pixels. MAKE SOME IMPRESSIONS  The default size is smaller than the format we designed on the web. It makes our pictures not that sharp.

Solution

correct correction  In fact  we need to set the dimensions in pixels before uploading the images to the web. By default, most of the content is set to be smaller than actually used on the desktop. This may be because WordPress prioritizes mobile rendering first.

Specify dimensions in pixels

Based on various web tests, I suggest you slightly increase the dimensions of the thumbnail and medium sections. Let’s be like this picture instead.

Fix blurry images with Regenerate Thumbnails Plugin.

Who put the images on the web before adjusting the media dimensions as in the image above. As a result, old images will not be able to change dimensions accordingly . We need to use the Regenerate Thumbnails plugin to enforce it. Give old photos  resize the image  to make it clear

Heres how to do it:

Install the  Regenerate Thumbnails plugin  .

Then go to Tools > Rebuild Thumbnails > Rebuild Thumbnails for all attachments.

Just click on this point . That’s it for solving the dimensions of the photos on our website.

But to recreate the thumbnails, we have to do it only once, so if we’re done. Every picture is clear. I recommend deleting this plugin.

Solve the problem of images with blurred content and small images not displaying full screen

For some people who have had problems  Upload a photo to write an article. And the pictures that appear on the web are small. Although the original image was great

The problem at this point is caused by the default image rendering on the web. WordPress will always display the image in a medium size, which will cause the image we put to be smaller than usual. or the picture is not clear

Solution

Every time we upload an image to an article  before pressing “insert” to publish, we must always specify the full size image size. See photo below.

Or if your webpage is designed with Page Builder then when adding the element image look for the option to adjust image size always choose original size or full size.

Solution

It is to set the dimensions in pixels as follows

Then use the Regenerate Thumbnails plugin to create a new set of thumbnails by pressing Regenerate Thumbnails for the featured image only.

The product cover image is not clear.

For later issues  if anyone has issues with the product cover image being blurred like this

The cause of the problem at this point is that the default product image thumbnail display size is too small. Let’s adjust this new value to a size of 400 or greater.

At this point we have to edit at Personalization> WooCommerce> Product Image and set it according to the image.

summarize

The images on your WordPress site are grainy or blurry. Because of the default WordPress he hoped well, he was afraid that everyone’s web image would be too big. So it displays the images in the middle level, so every time we upload the images to the web. Always make sure to select the full size or original size.