Converts all PNG images in website/ to WebP format to reduce repository size and improve page load performance

[VelmiraS]

What this PR does / why we need it:
Converts 252 PNG images in website/ to WebP format, reducing repository
size by ~100MB (~70%). Also adds two reusable scripts for future asset
optimization and updates all markdown/vue references accordingly.

JPG/JPEG photos are intentionally kept unchanged — re-compressing them
causes visible quality loss.

Which issue(s) this PR fixes:
Fixes #

Special notes for your reviewer:
Some PNG files in the repository are photographs saved as PNG instead of JPG
(e.g. hackathon group pictures like 2025-07.png, 2025-06.png). After
converting to WebP at quality 85, these appear slightly washed out compared
to the originals.

Please advise on preferred approach:

1. Accept current quality (still ~70% smaller)
2. Increase quality to 90-92 (less savings)
3. Exclude hackathon group pictures from conversion

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: a569ae23-6f83-4301-ae4b-ccbc7b16fc99

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch chore/optimize-website-assets

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[netlify]

✅ Deploy Preview for gardener-docs ready!

Name	Link
🔨 Latest commit	0fcc6a3
🔍 Latest deploy log	https://app.netlify.com/projects/gardener-docs/deploys/6a08ae370428cd0008f328b8
😎 Deploy Preview	https://deploy-preview-934--gardener-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[BoHristova]

Thank you!

Could you please follow the instructions for signing the Contributor License Agreement. You only have to do it once ;)

[klocke-io]

Nice, thanks for pushing this topic,

Could we add a mini check on CI for PR`s that we do not allow assets over a reasonable size, maybe check what is recommended for this? 1MB is probably quite large.

Also, we should add this transformation to the build pipeline in Netlify after we pull the rest of the content through DocForge. We then need to use a different target, though.

[klocke-io]

Okay, wow 😳 that change in tone is quite dramatic 😅 whereas in the image above, I feel like the change is not noticeable.

Maybe for the first step we just exclude them and covert them to jpg for the time being

[klocke-io]

Suggested change

	const TARGET_DIR = join(ROOT, dirArg ?? 'website')
	const TARGET_DIR = join(ROOT, dirArg ?? 'website')Add a comment on line R23Add diff commentMarkdown input: edit mode selected.WritePreviewAdd a suggestionHeadingBoldItalicQuoteCodeLinkMore Formatting tools itemsSaved replies```suggestion
	```Add FilesPaste, drop, or click to add filesCancelCommentStart a review
	// Only convert PNG files — JPG/JPEG are photos that lose quality when re-compressed
	const CONVERTIBLE = ['.png']
	const SKIP_BELOW_KB = 5
	// These files must stay as PNG — browsers require specific formats for them
	const SKIP_FILENAMES = new Set([
	'favicon.png',
	'favicon-16x16.png',
	'favicon-32x32.png',
	'favicon-96x96.png',
	'apple-touch-icon.png',
	'web-app-manifest-192x192.png',
	'web-app-manifest-512x512.png',
	])

How about we extract those configurations to the make file and call the script/scripts from there, so that the scripts stay independent from our project 🤗

This would make it easier to package them and reuse them later.

[VelmiraS]

The two scripts have been merged into one as suggested. The configuration has also been moved to the Makefile, so the script stays project-independent.

[gardener-prow]

Adding label do-not-merge/contains-merge-commits because PR contains merge commits, which are not allowed in this repository.
Use git rebase to reapply your commits on top of the target branch. Detailed instructions for doing so can be found here.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[klocke-io]

/lgtm

thanks for bringing this in :)

[gardener-prow]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: klocke-io

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

• OWNERS [klocke-io]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[gardener-prow]

LGTM label has been added.

Details

Git tree hash: a5c687a1ccf3117582919ed20b10ef33313ba0e7