Closed sabrinang closed 3 years ago
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 --
full width
is selected, image will be sized to 800px wideleft-aligned
or right-aligned
is selected, image will be sized to 500px wideI'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.
@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
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.
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.
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?
@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.
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 😬 .
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/