Wagtail: Blurry PNG Image

[sabrinang]

I followed steps in https://foundation.mozilla.org/en/docs/how-do-i-wagtail/photo-and-image-guidelines/ to update the JPG ToC image on whitepaper that was blurry but it is still blurry with the new PNG, see: https://foundation.mozilla.org/en/insights/trustworthy-ai-whitepaper/path-forward/introduction-theory-change/

This is the PNG and I used ImageOptim to compress size (173 kb) and you can find it in gdrive here: https://drive.google.com/open?id=1GItFxsprIs5aZpaDKmNA2KaxBTAWXITR&authuser=sabrina%40mozillafoundation.org&usp=drive_fs

[mmmavis]

Done some digging.

The file itself on Wagtail is still in its original quality and dimension. It's when it's used in the rich text editor, then it gets rendered in a reduced format --

• when full width is selected, image will be sized to 800px wide
• when left-aligned or right-aligned is selected, image will be sized to 500px wide

I've found the source code on Wagtail that does this and documentation on how to register/unregister image format. Did some testing locally and it seems to work fine (so far). I'll file a PR soon and tag both you @Pomax and Kalob for review.

[mmmavis]

@sabrinang

We can add a new image format in addition to the existing three: full width, left-aligned, and right-aligned. I'm deciding what to call it and how we want to process the image so it shows up the way CMS editors expect. The current full width option resizes the image file to 800px wide but when it gets rendered on the screen, there's CSS that makes it stretch to span the full width of the image container. This is why the clear image file you uploaded became blurry when it shows up on the page because 1) retina screen 2) on certain browser sizes, the container can be wider than 800px.

I'm thinking to add a new option called

Full width high quality

• image file won't get resized
• when it gets rendered on the page, we have CSS to make it contained with the image container and spanned across the entire container width.

I really struggled to find a perfect solution that will work for all cases (big or small images). What do you think about this proposal? My concern with this approach is that 1) largeeee images will take long to load since we aren't resizing the files 2) smaller images will still show up blurry since we use CSS to make images show up as full width of the container.

[sabrinang]

Thanks for figuring out what has been happening to the images here Mavis. I like the idea of having the high quality proposal as a solution but I'm also not too sure how to address your concerns.

• could we have the full width image as is by default (resizes) and have like a "HQ" checkbox option with some help text of size ranges? or is there a way to resize in a way that still looks HQ and doesn't take long to load?
• maybe small images don't fill up full container but looks HQ at its intended size? (so small images don't show up blurry but then this isn't really "full width" which would be strange)

[mmmavis]

From the documentation, it looks like we cannot have this level of customization. One image format can only have one preset setting and we aren't able to check the image meta before processing it so we can't really do something like "if image is super large, then resize it down. Otherwise, don't process it." kinda thing.

@KalobTaulien do you know if what @sabrinang suggested is possible?

[KalobTaulien]

@mmmavis That's correct we can't do a lot of customization unless we pull in some Wagtail core stuff and overwrite it — which is something we've talked about avoiding.

The best option here I think is to make a high quality setting and the image dimensions will be larger than the original full width" image.

[mmmavis]

The best option here I think is to make a high quality setting and the image dimensions will be larger than the original full width" image.

Alright, I think I'm gonna go with that. Can't think of a better solution 😬 .