[Resolved] Pixelart header image losing fidelity even at max size

[Alexander]

hi.

sorry this took so long, and the site is still under development but you can see the issue I am having now.

to see the issue here’s what you need to do:

open the site
right click the banner and open in new tab
observe the strange smudging/compression artifacts, especially around the pink fireballs
remove everything after the *.jpg in the URL and notice the smudging is still present
right click and download image, open it in whatever editor or viewer you choose
notice that the smudging/compression artifacts are no longer there

the image is 1920px wide and the container is set to 1920px. i have the same issue at whatever resolution and container size i choose, even when they are matched.

any help appreciated!

thanks

edit: just in case you cannot replicate the issue, here’s what i am seeing.

[Leo]

Hi there,

Don’t think we are able to help with problems like this without seeing the site live.

Can you make it live so we can see?

Let me know 🙂

[Alexander]

i can’t yet as the new design is nowhere near ready. i’ll open a new ticket once it’s live in that case. thanks for getting back to me.

[Leo]

You can just edit this original topic and add in the site URL whenever you are ready.

Just let us know when you do 🙂

[Alexander]

hi.

sorry this took so long, and the site is still under development but you can see the issue I am having now.

to see the issue here’s what you need to do:

open the site
right click the banner and open in new tab
observe the strange smudging/compression artifacts, especially around the pink fireballs
remove everything after the *.jpg in the URL and notice the smudging is still present
right click and download image, open it in whatever editor or viewer you choose
notice that the smudging/compression artifacts are no longer there

the image is 1920px wide and the container is set to 1920px. i have the same issue at whatever resolution and container size i choose, even when they are matched.

any help appreciated!

thanks

[Leo]

I don’t believe I’m seeing the issue at all:
https://www.screencast.com/t/LiqMK1Bph8Ro

Am I missing something?

GP doesn’t do anything special to images.

[Alexander]

I can clearly see it in your screencast. check the image below, the bottom image is what i’m seeing in your screencast and on my site – the top image is how the image looks after download and viewing locally.

[David]

Hi there,

WordPress auto compresses images to improve performance. You can try adding this PHP snippet to stop that:

add_filter('jpeg_quality', function($arg){return 100;});

You will need to regenerate thumbnails ( plugin ) or upload a new ( different named ) image to see the improvment.

[Alexander]

Thanks for the reply but I don’t think that’s it because this never happened in the themes I was using previously.

[David]

Looks like a JetPack Photon issue:

https://wordpress.org/support/topic/blurry-images-on-photon/page/2/

[Alexander]

are you sure? the header is the only image it affects, and once the image has been downloaded full quality is restored. and as mentioned, this doesn’t happen with any other themes i have used in the past.

[David]

GeneratePress does not do anything to the images you upload or how they are rendered on the frontend. The only image manipulation is for Blog > featured images which is a user controlled option to resize those images.

The site logo is being served from the photon CDN, it has the same query strings that the user in WP.org reported blurry images.

You can try disabling Photon and see if it makes a difference, or use their skip an image function:

https://jetpack.com/2013/05/03/skip-a-image-with-photon/

[Alexander]

disabling photon works, but excluding that particular image doesn’t. i guess that’s nothing you guys can help with though, so thanks for the help narrowing it down a bit.

cheers.

[David]

Did you try the full URL for the image?

[Author]

Posts