blurry
blurry
Images on WordPress are blurry, blurry, how to fix it?
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.
Public relations
For those who have already read this article. Interested in building an online store using WordPress + Woocommerce as a professional. On August 21-22, 2021, I opened the Woocommerce Expert course to a small group for 1 live class, 6 people per round, so that learners can get the most out of it. Learn and follow at the same time.
