How to make website thumbnail not blurry? - wordpress

Question

Trouble with a blurred thumbnail at my website project
Greetings.
Ladies And Gentleman
I ask some question about this picture I've sent, what I want to ask about is how to make
this picture's blurred thumbnail turned into High-Definition.
enter image description here
already try to turn off lazy loading with this code but loading="lazy"
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Website using Wordpress
this is the link https://cloudteamize.com/test-porto/

Answer 1

Increase the size of the thumbnail on the Wordpress settings "Settings > Media" I suggest you put it at least 650px.
You will always see it blurry because is a flexible container and often stretch larger than the actual image size (It varies on viewport size or screen resolution).
pd: You will need to regenerate the thumbnails after or reupload the image and use the latest version. When you change those settings old images don't create the new thumbnail versions automatically.

Answer 2

THE SOLUTION IS FOUNDED:
the problem is the image link that my plugin using called: Portofolio Carousel is adding 350x181.png at the end of the link, I think that make my image use the lower quality.
example:
the original file is -> mmd.png
but in that plugin -> mmd-350x181.png
i take the values of my src then remove the 350x150.png to only .png using my massy javascript like this:
$ = jQuery;
$(document).ready(function() {
const imgs=document.querySelectorAll('#portofolio img');
imgs.forEach(img => console.log(img.removeAttribute('srcset'), img.removeAttribute('loading'),img.src=img.src.replace("-350x181","")));
});
some how if I not doing my code inside console.log, the code didn't run. I think that is really weird, but some how when I try to put that in console.log, it just works so if you can give me suggestions or make this code clearer, that's will be great.