8000 perf: optimize OG images — WebP variant + PNG optimization by dominicusin · Pull Request #424 · dominicusin/dominicusin.github.io · GitHub
[go: up one dir, main page]
Skip to content
8000

perf: optimize OG images — WebP variant + PNG optimization - #424

Merged
dominicusin merged 1 commit into
mainfrom
perf/og-images
Sep 9, 2026
Merged

perf: optimize OG images — WebP variant + PNG optimization#424
dominicusin merged 1 commit into
mainfrom
perf/og-images

Conversation

@dominicusin
@dominicusin dominicusin commented Sep 9, 2026
Copy link
Copy Markdown
Owner

Summary

  • Convert og-default.png to WebP: 88K → 24K (-73%)
  • Optimize PNG fallback with optipng: 88K → 66K (-25%)
  • Total savings: 64K per page load without OG image

Why

Every page on the site references the OG image as a fallback. The original 88K PNG was the largest static asset. WebP provides 73% savings for browsers that support it, while the optimized PNG serves as fallback for social media crawlers (Twitter/FB don't support WebP in og:image).

Validation

  • WebP file created with cwebp -q 85 (quality 85, visually lossless)
  • PNG optimized with optipng -o2 (lossless compression)
  • Both files committed alongside each other

@dominicusin
perf: optimize OG images — WebP variant + PNG optimization
6b814c9 
- Convert og-default.png to WebP: 88K → 24K (-73%)
- Optimize PNG fallback with optipng: 88K → 66K (-25%)
- Total savings: 64K per page load without OG image
@bolt-new-by-stackblitz
bolt-new-by-stackblitz Bot commented Sep 9, 2026
Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copilot AI commented Sep 9, 2026
Copy link
Copy Markdown

@dominicusin Thanks for sending me some feedback. Unfortunately, I hit an error while trying to use the custom Copilot setup steps configured for this repository. The error I am seeing is:

no supported setup-steps job found in your workflow file. Please ensure you have a job named copilot-setup-steps. For more details, see https://gh.io/copilot/actions-setup-steps

Once you or someone with the necessary access fixes the problem, please let me know in a comment and I'll try again. Thanks!

@vercel
vercel Bot commented Sep 9, 2026 •
edited
Loading
Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
dominicusin-github-io Error Error Sep 9, 2026 5:58am UTC
3 Skipped Deployments
Project Deployment Actions Updated
dominicusin-dominicusin.github.io Ignored Ignored Preview Sep 9, 2026 5:58am UTC
dominicusin-dominicusin.github.io-lw64 Ignored Ignored Sep 9, 2026 5:58am UTC
dominicusin-github-io-5612 Ignored Ignored v0 Sep 9, 2026 5:58am UTC

@github-actions github-actions Bot added the frontend JS/TS frontend modules label Sep 9, 2026
@coderabbitai
coderabbitai Bot commented Sep 9, 2026
Copy link
Copy Markdown

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

💤 Files selected but had no reviewable changes (1)
  • assets/images/og-default.webp
⛔ Files ignored due to path filters (1)
  • assets/images/og-default.png is excluded by !**/*.png
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 83a69254-a1eb-4aa0-a737-a6957400de5c

📥 Commits

Reviewing files that changed from the base of the PR and between 9c49593 and 6b814c9.

⛔ Files ignored due to path filters (1)
  • assets/images/og-default.png is excluded by !**/*.png
📒 Files selected for pr 8000 ocessing (1)
  • assets/images/og-default.webp

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

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

Comment @coderabbitai help to get the list of available commands.

@github-actions
github-actions Bot commented Sep 9, 2026
Copy link
Copy Markdown
Contributor

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Scanned Files

None

@qodo-code-review
qodo-code-review Bot commented Sep 9, 2026
Copy link
Copy Markdown

PR Summary by Qodo

Optimize default social image with WebP and compressed PNG

✨ Enhancement 🕐 Less than 10 minutes

Grey Divider

AI Description 

• Losslessly compresses the default PNG social image, reducing fallback size by 25%.
• Adds a quality-85 WebP variant, reducing the equivalent asset by 73%.
• Preserves PNG compatibility for Open Graph and Twitter crawlers.
Diagram 

graph TD
  SRC["SVG source"] --> PNG["Optimized PNG"] --> META["OG metadata"] --> CRAWLER["Social crawlers"]
  PNG --> WEBP["WebP variant"]
Loading
High-Level Assessment

The following are alternative approaches to this PR:

1. Generate formats during the Hugo build
  • ➕ Keeps PNG and WebP reproducible from one canonical source
  • ➕ Prevents committed image variants from drifting
  • ➕ Allows format and quality settings to be reviewed as code
  • ➖ Adds build-pipeline complexity
  • ➖ Requires confirming Hugo image processing preserves expected output quality
2. Wire WebP into browser image markup
  • ➕ Allows browsers to realize the advertised WebP transfer savings
  • ➕ Retains PNG exclusively for OG and Twitter metadata
  • ➖ Requires template changes and appropriate picture or fallback markup
  • ➖ Provides no benefit when the image appears only in metadata

Recommendation: Keep the optimized PNG as the Open Graph and Twitter fallback because crawler compatibility requires it. The WebP file should either be wired into browser-rendered image markup or omitted; merely committing it does not reduce normal page transfers. For long-term reproducibility, build-time generation from the existing SVG source is preferable if the added pipeline complexity is acceptable.

Files changed (2) +0 / -0

Enhancement (2) +0 / -0
og-default.pngLosslessly compress the default PNG social image +0/-0

Losslessly compress the default PNG social image

• Recompresses the existing 1200×630 PNG with optipng, reducing its size from approximately 88 KB to 66 KB without changing image content. It remains the configured Open Graph and Twitter fallback.

assets/images/og-default.png

og-default.webpAdd a compact WebP social-image variant +0/-0

Add a compact WebP social-image variant

• Adds a quality-85 WebP conversion of the default social image at approximately 24 KB. The variant is committed alongside the PNG but is not referenced by the current social metadata templates.

assets/images/og-default.webp

@qodo-code-review
qodo-code-review Bot commented Sep 9, 2026
Copy link
Copy Markdown

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 🔗 Cross-repo conflicts (0) 📜 Skill insights (0)

Grey Divider


Remediation recommended

1. Browsers never receive the WebP image 🐞 Bug ➹ Performance
Description 
og-default.webp is added without any configuration or template reference that can select it. The
fallback remains images/og-default.png and head.html passes that exact resource to both social
tags, so the claimed 73% WebP transfer saving is never realized on any page.
Code

assets/images/og-default.webp[1]

+RIFFj^\u0000\u0000WEBPVP8 ^^\u0000\u00000����*��v�>Q(�F#���"�Y(p
Relevance

●●● Strong

PR #114 shows image-format changes require updating configuration and resource resolution; an
unreferenced WebP cannot deliver claimed savings.

PR-#114

ⓘ Recommendations generated based on similar findings in past PRs

Evidence 
The site config names only the PNG fallback, and the head partial resolves that configured path
directly before emitting it as both social-image tags. No sibling-format lookup or WebP source
exists, proving that committing the WebP alone cannot make any generated page select it.

config/_default/params.toml[21-23]
layouts/partials/head.html[75-94]
assets/images/og-default.webp[1-1]

Agent prompt 
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The newly added WebP image is never selected by generated pages, so it provides no transfer-size improvement.

## Issue Context
The social-image configuration intentionally remains PNG for crawler compatibility, and the head partial resolves that exact configured path. Either add a genuine browser-facing WebP selection path while preserving PNG social metadata, or remove the unused WebP asset and revise the performance claim.

## Fix Focus Areas
- assets/images/og-default.webp[1-1]
- config/_default/params.toml[21-23]
- layouts/partials/head.html[83-94]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Grey Divider

Context sources
✅ Compliance rules (platform): 10 rules
✅ Cross-repo context — repo relationships
Review mode: ⚖️ Balanced: This is a low-risk, shallow binary asset replacement with no code or logic changes, so an extended redundant review is not warranted.

Grey Divider

Tip of the day 
💡 Did you know, you can commit Qodo's fix in one click with committable suggestions (GitHub & GitLab)

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

Grey Divider

Qodo Logo

@dominicusin
dominicusin merged commit 869d1bc into main Sep 9, 2026
22 of 25 checks passed
@dominicusin
dominicusin deleted the perf/og-images branch September 9, 2026 06:07

This branch had an error being deployed

1 failed deployment
Preview – dominicusin-github-io — 6b814c97 Deployed Sep 9, 2026 by vercel[bot]
View deployment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

frontend JS/TS frontend modules size/XS

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@dominicusin
0