• Resolved dajanas

    (@dajanas)


    Hi,

    I have uploaded screenshots of a game that has a retro pixel look. These screenshots look extremely blurry after uploading in WebP format (optimized by EWWW Image Optimizer). No longer nice and pixelated, but horrible.

    How can I prevent this? I know that WebP doesn’t handle sharp edges well – but it can’t be the solution to disable WebP completely because of this. Can I disable WebP for individual images in EWWW and WordPress? Or make pixelated images stay pixelated? If so, how?

Viewing 15 replies - 1 through 15 (of 17 total)
  • Thread Starter dajanas

    (@dajanas)

    BTW: Please no solution where I have to define the individual files in some functions.php or similar. In this example alone, there are 15 files and counting. I can not list in a file then file-by-file all the file names.

    Plugin Support adamewww

    (@adamewww)

    You could try the “Sharpen Images” option on the Advanced tab. Other than that, there really isn’t a way. You could delete the WebP versions of those and serve the original JPG/PNGs. If you want to share some specific images, I’d be happy to run some tests on them but I would recommend contacting us directly: https://ewww.io/contact-us/

    Thread Starter dajanas

    (@dajanas)

    @adamewww You can try every screenshot of any pixel-game like the old Monkey Island Games or any other new “pixel” games. They all look blurry af.

    Plugin Support adamewww

    (@adamewww)

    Have you tried the Sharpen Images and Quality settings on the Advanced tab? It will increase the size of the WebP but, as one of the features of how WebP works is to smooth out jaggedies, it’s going to be a trade off.

    Thread Starter dajanas

    (@dajanas)

    It does not change anything, unfortunately. Apparently WebP really absolutely can’t cope with straight lines and such “pixelated” images. This is really a big problem of WebP, which I can’t explain either. The screenshots of pixel games look horrible with it. Couldn’t you add a feature in the plugin where you can bulk select images in the wordpress library and set that NO WebP images should be generated from those images (and existing WebP versions of those images should be deleted)?

    Plugin Support adamewww

    (@adamewww)

    For suggestions like this, I recommend adding them to our feedback forum. We use that to help determine our focus: https://feedback.ewww.io/

    Thread Starter dajanas

    (@dajanas)

    Another forum to register an account? No.

    Thread Starter dajanas

    (@dajanas)

    @adamewww Okay, I have now tried again and also analyzed other websites that display their screenshots in WebP format: These websites have no problems at all to display pixelated screenshots. After that I just tried an online JPG to WebP converter. Again: No problems with the result. I have tried various converters in the meantime – why does EWWW Image “Optimizer” give the blurry results here?!

    Example converter: https://convertio.co/de/jpg-webp/

    Just upload a screenshot of any retro pixel game (like “thimbleweed park”): the result is absolutely fine.

    Only EWWW Image Optimizer causes totally blurred images.

    Plugin Support adamewww

    (@adamewww)

    I had previously adjusted the quality settings and ran some tests and got some pretty decent results:
    WebP: https://ibb.co/cCgrwfd
    JPG: https://ibb.co/8mF8hn6

    I’m hard-pressed to see much difference between the two. I ran it with the game you suggested (and WebP quality at 90) and these are the results:
    WebP: https://ibb.co/v4yMPjm
    JPG: https://ibb.co/zrzYzQJ
    And just to check, here it is at 75% (default) quality:
    75% WebP quality: https://ibb.co/YXbp1sR

    I don’t see that there is a huge blurry version being generated. Perhaps the tool being used is corrupted? Can you try re-installing EWWW?

    Thread Starter dajanas

    (@dajanas)

    Hey,

    can you please try this image and use EWWW to convert it to WebP (free version of EWWW): https://ibb.co/J2dLtqZ

    This is the way it looks after “optimization” (WebP, 75%): https://ibb.co/9Zx57y4

    This looks so awful – re-installation of EWWW does not change anything. And with JPGs no problems at all.

    Thread Starter dajanas

    (@dajanas)

    PS: Changed WebP to 90% Quality and re-optimized the specific images. No difference – looks awful.

    Thread Starter dajanas

    (@dajanas)

    PPS: What I just noticed too: I have deliberately deleted the “thumbnails” of some images and regenerated them. Here I have now also noticed that not at all for ALL these JPG images also WebP images were created.

    UPDATE: It seems that if a WebP file is larger than the JPG variant, that it will not be created. Makes sense. This happened to me now after I set WebP to 90% quality. Which unfortunately makes no sense, because WebP is supposed to specifically make image files SMALLER in file size, so I also set WebP quality to 75% before.

    • This reply was modified 2 years, 4 months ago by dajanas.
    Plugin Support adamewww

    (@adamewww)

    Are you clearing your browser cache when you view the new version after changing the settings (inspect and right-click on the refresh page button, select Empty Cache and hard reload)? Or do you have a cache that needs to be cleared?

    Yes, our plugin will only generate a WebP version if it is smaller than the original, as that is the intent. Google talks about how sometimes WebP will be larger: https://developers.google.com/speed/webp/faq#can_a_webp_image_grow_larger_than_its_source_image

    I downloaded that image and tested it at 90 quality and with Sharpen images on. It produced an image still smaller than the original and it looks very similar whether run through our plugin or from the online one you linked to:
    https://ibb.co/GkCY0LN
    https://ibb.co/PYQkjGr

    Thread Starter dajanas

    (@dajanas)

    Yes, I have cleared the cache and also tried different browsers. If you compare the results you linked, you can already see a big difference. The wall of the house, for example, and especially the woman’s pants, which look totally washed out in one image. Overall, the structures at https://imgbb.com/PYQkjGr are clearly “smudged”. The hard and high-contrast contours like in the tree are similar, that’s true.

    The problem: WebP is fine with smaller quality settings for normal photos, screenshots, etc. It makes little sense to increase the quality to 90% now, because this will make ALL WebP images larger in file size. It’s just important that such screenshots of pixelated games remain sharp at all costs. After all, they represent the hard work of the hardworking developers – and when I present screenshots this way, it looks like that’s the smeared game graphics.

    So my suggestion was to deliberately exclude photos from WebP generation via click (bulk selection), so that there are ONLY JPG versions of these photos. This way you could select all the pixelated images and exclude them from WebP generation via bulk editing, have new thumbnails generated, done.

    Plugin Support adamewww

    (@adamewww)

    For reference, the image you referred to as smudged is from https://convertio.co/de/jpg-webp/. The other one was from our plugin.

    You had mentioned previously an option where you could bulk select images and set that no WebP should be generated from those. You can do the opposite, meaning, you can bulk select images and then run a WebP only optimization on them, as it tends to work better that way (inclusion rather than exclusion during bulk optimization) because otherwise a record has to be kept. However, as WebP generation happens at upload, it’s too late when it comes to bulk optimization, so it would have to be something as a part of the filename itself, perhaps, to keep it from being created (i.e. “-nowebp” added to the filename).

    I’ve added your suggestion to the feedback. https://feedback.ewww.io/p/option-to-not-generate-webp

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Pixel images become very blurry (WebP)’ is closed to new replies.