Images Sharp in Customizer – Blurry Live Site

  • Resolved taynkbot

    (@taynkbot)


    6 years, 2 months ago

    So this is driving me crazy. In the WordPress customizer, and in Elementor, I can add a block for an image, and the images look great! But of course, the bad ones get deleted! Anyway, so my images look as they should while I’m editing my site, but once I publish and take a look at the live site, they look like, well….
    Somehow, the images go from looking how they should while I’m editing my site from within WordPress, to looking like complete garbage when I load the live site; it seems there is some serious compression going on somewhere.

    Okay, so that’s the problem. Here are some things I’ve tried.

    Changing themes: Small effect in the themes I tried (2019 and 2017), and mostly negative. My Astra child still seems to be just as bad.

    Examining the thumbnails WordPress generated upon upload of the images. To test this exactly, I downloaded an image from the page I have referenced in order to see its resolution. I then found precisely that image with the same resolution in my cpanel file manager. I compare them side to side, and the one on my live site looks terrible. This is the same image, mind you.
    Here’s the kicker though. If I look at the image I actually downloaded, it looks fine! It looks fine in Photoshop and every other photo viewer I have… hell, it even looks good in Paint! But things get weirder.
    If instead of downloading, I simply right click and say ‘open image in new tab,’ they look just as terrible.
    To test my browser, Chrome, I simply drag and dropped one of those images I downloaded into Chrome, and it opens it and displays it beautifully. So I can drag an image from my desktop into Chrome, and it loads it properly, but the same image when loaded from WordPress loads very very wrong.

    I’ve added this bit of code to my functions.php:

    add_filter( ‘jpeg_quality’, create_function( ”, ‘return 100;’ ) );

    But to no avail.

    I’ve tried deactivating all my plugins.

    I’ve viewed my site from a dozen different devices.

    So here I leave you the problem that’s strangling all the effort I put into my photos. Head over to my live site, and take a look at the two images I have there. At first glance, they might not look too bad, but try to download them and view them from your desktop, and compare.
    The water droplet picture is just…[ REDACTED AND YOUR ACCOUNT IS NOW FLAGGED ] Probably not allowed to say that….
    The flower picture is less bad, but there’s a weird black patch area on the far right, almost near the top. This looks like the product of compression.

    Any help is appreciated so much! You honestly don’t know how much this kind of thing drives me crazy haha.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Are you uploading the images at the exact size they are to be displayed or are you allowing the theme to resize them and create the thumbnails?

    Thread Starter taynkbot

    (@taynkbot)

    I’m allowing WordPress to resize them, starting with images whose long side is 1920, and with an average image size of around 1MB.
    Still, as I mentioned, that was one of the things I first suspected. I tracked down those WordPress-resized versions of my images within my file manager, and they look as good as I could ask for.

    You can try it for yourself though. Just head over to my test page, and right click to save the water droplet picture to your hdd. The image you’ll get will be a WP resized image, yet if you open it up in an image viewer it will appear as it should. Compare it to the source image on my live site, though, and you can particularly see the lack of clarity and some bad artifacting around the droplets themselves, but even the image as a whole is shoddy and is clearly being compressed.

    So it’s not the fault of resizing. Unless there’s another location other than wp-content/uploads where my images are being resized and compressed a second time, and WP uses those severely compressed images on the live site, but when you right click to save the image, it pulls from the higher quality version. That seems absolutely unlikely, though, and would be a ridiculous thing to have built in! It’s the opposite of anti-theft! Plus I’d expect WP to be more forward about that kind of thing. And like I said, I tried deactivating all plugins, so whatever is going on is with WP, or possibly the few themes I tried (Astra, 2019, 2017).

    Every indication points to some real-time kind of compression. The file size is exactly the same whether I right click the image and save it, or whether I go to my file manager and download that version directly. Some compression seems to be applied as the site loads.

    The only time my images look bad is when WP loads them on the live site; the resized versions look just fine; in the customizer and Elementor, every size version of an image appears as it should; right clicking an image from the live site manages to pull the correct, unaltered image from the source.

    What kind of necromancy is this!? Although I’m probably not allowed to libel necromancers, oops!

    Here’s a test I don’t know how to perform, but I believe it should be possible. Is there a way to use Chrome Inspector or View Source Page (or something else) to see the properties of the images being displayed on a web page, such as their file size? If so, I would expect to see a smaller file size here than in the source images. This would certainly indicate that there’s some post compression happening right after my images are pulled from the DB, and before they are loaded on my site.

    Turn Jetpack Photon off…reload the site and try again…

    Using Chrome inspect it’s quite clear that the images are being served by wordpress.com’s photon app:

    
<img src="https://i2.wp.com/botstockimages.com/wp-content/uploads/Test/Perfect-Water-Droplet-01-19.jpg?resize=1024%2C683" alt="" class="wp-image-283" srcset="https://i2.wp.com/botstockimages.com/wp-content/uploads/Test/Perfect-Water-Droplet-01-19.jpg?resize=1024%2C683 1024w, https://i2.wp.com/botstockimages.com/wp-content/uploads/Test/Perfect-Water-Droplet-01-19.jpg?resize=300%2C200 300w, https://i2.wp.com/botstockimages.com/wp-content/uploads/Test/Perfect-Water-Droplet-01-19.jpg?resize=768%2C512 768w" sizes="(max-width: 1000px) 100vw, 1000px" width="1920" height="1281">

    You can also not use the media library and it’s compression…just create a folder inside wp-content, use ftp to upload the images full size, then use HTML tab in the editor to add them to your page or post. Understanding how it all works will help also…

    https://codex.www.ads-software.com/WordPress_Lessons

    https://www.w3schools.com/tags/tag_img.asp

    Thread Starter taynkbot

    (@taynkbot)

    Pioneer Web Design, that did it! I turned off “Enable Site Accelerator” from within Jetpack / Settings, reloaded, and it works! Thank you so much! I’m not sure why I didn’t see that change when I moved my entire plugins folder in my file manager to a place I didn’t think it’d be reached; I guess that doesn’t work the same as deactivating.

    I’ll just add that clearly I don’t have WordPress expertise, but neither am I entirely incompetent. I searched quite extensively before posting here, and did a fair amount of troubleshooting. I shouldn’t need to read how WP works front to back in order to find out that Jetpack is to blame. And in fact, I searched through every single lesson in WordPress_Lessons searching for Jetpack and or accel just now, and got nothing, except “You may want to install plugins such as Jetpack by WordPress.com to supercharge your website.”
    Jetpack is certainly separate from WP, but it came preinstalled and I activated it without a thought. I know you urge people to read up on WP, but I’m betting that a lot of us don’t read nearly as much as we should and that should be a given by now. And even if I knew everything about WP by reading the lessons, I wouldn’t really have a clue about Jetpack, and I’m betting I’d still be here asking this same question.
    If I could offer a suggestion that would have helped me, it’d be to not have Jetpack come preinstalled. If I had to install it myself, I would have taken the time to understand what it actually did; but when it comes preinstalled I get the notion that it’s just an all-around good plugin to have. I wouldn’t have suspected WP had I known what Jetpack actually can do, and I would have known that had I found Jetpack by searching for what it can offer rather than it being served to me from the start.

    Hopefully others will be able to find this post before they go down the rabbit hole of throwing around php and pulling their hair out!

    Anyway, thank you so much again! And I’m actually currently working to integrate Lightroom with some kind of HTML gallery, so I appreciate your bonus suggestion!

    Cheers!

    but it came preinstalled

    I have installed WordPress many times and never have I found JetPack to be ‘preinstalled’…perhaps your host included it with a custom install package? The only plugin that comes with WordPress by default is Hello Dolly.

    Thread Starter taynkbot

    (@taynkbot)

    Hmm, could be? I’ve had to install WP a few times on my site, and each time it installs with Akismet, Jetpack, MOJO Marketplace, OptinMonster, and Hello Dolly. So it definitely could be my host that included those first four, in which case I apologize, and it is totally my bad.

    Thank you again for the help! You’re a lifesaver!

    I have the same issue with my site tgmiss.com . When I load the site the first time with chrome, the photo gallery on the home page looks fine. Then I surf around my site. When I come back to the home page the photos are blurry. I have not been able to create this in other browsers. This also happens with the new photo link. Somewhat surprisingly the photo of the week gallery never gets blurry. Any help figuring it out would be great. I do not have jetpack, so I dont think thats the issue.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Images Sharp in Customizer – Blurry Live Site’ is closed to new replies.