Blurry Images since I switched to X theme

It seems as though all of my images on my site (only about 30-40 since its a new site) have become blurry since I switched to x theme. Even when I upload new images, they turn out blurry. Anyone have any suggestions as to what I should do about this?

Hi Ethan,

Thank you for writing in, please navigate to Settings > Media and increase your Image sizes let’s try, Thumbnail 200, Medium 400, and Large 1024.

Then use Regenerate Thumbnails to regenerate your images.

Remember to clear all your caching features after this process.

If your issue is related to WooCommerce Product image, please follow this article. Fixing Blurry Product Images

Hope it helps,
Cheers!

Thanks for the response. I have changed the image sizes and am using the regenerate thumbnails plugin. I dont quite know how to clear caching features so that could be the issue but the images still seem to be blurry after doing the first two things

Hi Ethan,

Please refer to the following guide on how to clear full cache including browser cache (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

If you’re still having issues, please provide us with an example page URL to check your issue further.

Thanks!

Huh weird. That didn’t work either.

Here is a url - https://minimalistvibe.com/minimalism-in-modern-society/

Thanks!

Hello Ethan,

It will still blurred because you have previously inserted an image with a width of 480 pixels and then the medium source url were changed to 400. You must have edit the image change the width or the image source must be change to large or full image.

Current image:

The correct one should be:

Hope this explains it.

Yep that must be it. I tried to edit the original to meet those new dimensions though and it didn’t seem to make a difference. Is there a way to insert new images into posts so that they are clear without any adjustments needing to be made?

Hi Ethan,

We can apply a custom CSS to force those images to remain 300px, however, this is not a good solution because a) the fact that the images you add on your posts are small (thumbnail) will remain and will be blurred when stretch. b) not all the images are set to be 300px some are in different width.

You need to re-add those images on your posts but this time, choose the large or full size.



Thanks,

Oh perfect thats just what I needed

We are delighted to assist you with this.

Cheers!

Rats… ok so most images can be adjusted fine when I set the size to large prior to uploading them. However, amazon affiliate images that cant be adjusted this way before uploading them, seem to still be blurry. Anything I can do about this

Hi,

Can you provide us the url of the page where we can see the issue.
If the original image is small to start with then I’m afraid to say that there is no solution to that.

You can try adding a max width to your image element, to prevent it from stretching. So if the original image is 300px, it will only display it up to 300px.

Thanks

sure thing. Ill try that in a sec. Here is a url https://minimalistvibe.com/best-minimalist-alarm-clocks/

Hi Ethan,

Please add this to Theme Options > CSS

img[src*="ws-na.amazon-adsystem.com"] {
	max-width: 250px;
}

This will limit all your images from Amazon at 250px width.

Thanks,

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.