Convert showcase images to webp and improve image rendering

godotengine / godot-website

The code for the official Godot Engine website. A static site built using Jekyll.

https://godotengine.org

MIT License

282 stars 138 forks source link

Convert showcase images to webp and improve image rendering #796

Closed MichaelJRM closed 5 months ago

MichaelJRM commented 5 months ago

Sorry for the large pr, it's mostly changes from .png, .jpg to webp

Fixed an issue with background bleeding when using rounded borders
Converted all showcase images to webp
Made all showcase images lazy load
Fixed images size to prevent layout shifting

Background bleeding before before After after

coppolaemilio commented 5 months ago

Hey, thanks for all the efforts optimizing the website! Unfortunately, I feel like the PR is a bit out of scope now. I would recommend to make the changes in different PRs. The Images conversions to webp would be a super easy merge, but the rest of the changes require individual discussions. If you want to coordinate better with the rest of the team, please make sure to join the dev chat at: https://chat.godotengine.org/channel/website

goodusername123 commented 5 months ago

@MichaelJRM Hey if possible please set smart_subsample to true and effort to 6 for all of the WebPs setup in picture.yaml (relevant doc)

The blog I linked for "smart_subsample" explains why it's important, And for effort the default value is 4 while higher values like 5 and 6 enable Trellis quantization which is something that's enabled by default in encoders for other formats like MozJPEG and benefits file-size and quality.

MichaelJRM commented 5 months ago

@coppolaemilio I've created a new pr https://github.com/godotengine/godot-website/pull/798 with only the image conversion stuff, I'll create new ones for the other features and close this one.

Thanks for the tip @goodusername123 I didn't notice it when reading the docs.