skip to Main Content

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/

2

Answers


  1. Chosen as BEST ANSWER

    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.


  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search