{"id":45981075,"url":"https://github.com/gbsimon/keycdn-webp-optimizer","last_synced_at":"2026-02-28T18:01:55.971Z","repository":{"id":323725983,"uuid":"1094445797","full_name":"gbsimon/keycdn-webp-optimizer","owner":"gbsimon","description":"Modern WebP delivery for WordPress media libraries offloaded via WP Offload Media + KeyCDN.","archived":false,"fork":false,"pushed_at":"2025-11-11T18:53:32.000Z","size":32,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-11T20:21:09.466Z","etag":null,"topics":["cdn","image-processing","keycdn","optimization","performance","webp","wp-offload-media"],"latest_commit_sha":null,"homepage":"https://tomtom.design","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gbsimon.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-11T18:03:13.000Z","updated_at":"2025-11-11T18:53:32.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/gbsimon/keycdn-webp-optimizer","commit_stats":null,"previous_names":["gbsimon/keycdn-webp-optimizer"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/gbsimon/keycdn-webp-optimizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbsimon%2Fkeycdn-webp-optimizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbsimon%2Fkeycdn-webp-optimizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbsimon%2Fkeycdn-webp-optimizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbsimon%2Fkeycdn-webp-optimizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gbsimon","download_url":"https://codeload.github.com/gbsimon/keycdn-webp-optimizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gbsimon%2Fkeycdn-webp-optimizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29946463,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T17:57:52.716Z","status":"ssl_error","status_checked_at":"2026-02-28T17:57:31.974Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cdn","image-processing","keycdn","optimization","performance","webp","wp-offload-media"],"created_at":"2026-02-28T18:01:55.281Z","updated_at":"2026-02-28T18:01:55.959Z","avatar_url":"https://github.com/gbsimon.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tom \u0026 tom Image Optimization for CDN\n\n\u003e Modern WebP delivery for WordPress media libraries offloaded via WP Offload Media + KeyCDN.\n\n| Meta             | Value                                                                 |\n| ---------------- | --------------------------------------------------------------------- |\n| **Contributors** | `tomtomdesign`                                                        |\n| **Tags**         | webp, optimization, keycdn, cdn, images                               |\n| **Requires**     | WordPress 5.0+ · PHP 7.4+                                             |\n| **Tested up to** | WordPress 6.8                                                         |\n| **Stable tag**   | 1.0.4                                                                 |\n| **License**      | GPLv2 or later ([license](https://www.gnu.org/licenses/gpl-2.0.html)) |\n\nAutomatically converts WordPress images to WebP using picture elements. Works with WP Offload Media and KeyCDN for on-the-fly conversion.\n\n---\n\n## Table of Contents\n\n- [Highlights](#highlights)\n- [Quick Start](#quick-start)\n- [Feature Spotlight](#feature-spotlight)\n- [Example Output](#example-output)\n- [Workflow](#workflow)\n- [Installation](#installation)\n- [Prerequisites](#prerequisites)\n- [FAQ](#faq)\n- [Changelog](#changelog)\n- [Upgrade Notice](#upgrade-notice)\n- [Technical Details](#technical-details)\n- [Support](#support)\n- [Privacy](#privacy)\n\n---\n\n## Highlights\n\n- **Edge-Powered WebP:** CDN performs real-time WebP conversions—no duplicate files or background jobs.\n- **WordPress Native:** Targets core/ACF images only; plugin assets and external embeds are left untouched.\n- **Responsive-Ready:** Maintains `srcset`, `sizes`, lazy-loading, and editor-defined dimensions.\n- **Debug-Friendly:** Optional HTML comments give you a transparent audit trail during development.\n\n---\n\n## Quick Start\n\n- [ ] Configure **WP Offload Media** to push uploads to S3-compatible storage (DigitalOcean Spaces, Amazon S3, etc.).\n- [ ] Point **KeyCDN (or another compatible CDN)** at the bucket and enable format conversion via `?format=webp`.\n- [ ] Install \u0026 activate **tom \u0026 tom Image Optimization for CDN**.\n- [ ] Visit **Settings → tom \u0026 tom Image Optimization** to toggle features such as Enhanced Mode and Debug Mode.\n\n\u003e [!TIP]\n\u003e Keep a browser console open with DevTools when first testing—it's the quickest way to verify the in-page `\u003cpicture\u003e` markup and CDN responses.\n\n---\n\n## Feature Spotlight\n\n| Feature                  | What it delivers                                                                                    |\n| ------------------------ | --------------------------------------------------------------------------------------------------- |\n| **Automatic Conversion** | Upgrades `\u003cimg\u003e` tags into `\u003cpicture\u003e` blocks with WebP-first `\u003csource\u003e` elements.                  |\n| **Smart Detection**      | Validates WordPress classes, uploads paths, and ACF data before rewriting to avoid false positives. |\n| **CDN Integration**      | Appends WebP and width parameters that mirror the requested WordPress size variant.                 |\n| **Browser Fallback**     | Leaves the original image as the final `\u003cimg\u003e` element, ensuring compatibility everywhere.          |\n\n---\n\n## Example Output\n\n```\n\u003cpicture\u003e\n  \u003csource type=\"image/webp\"\n          srcset=\"https://cdn.example.com/uploads/2025/10/hero.jpg?width=1024\u0026format=webp\u0026quality=80\"\u003e\n  \u003cimg src=\"https://cdn.example.com/uploads/2025/10/hero.jpg\"\n       alt=\"KeyCDN WebP example\"\n       width=\"1024\"\n       height=\"512\"\n       loading=\"lazy\"\u003e\n\u003c/picture\u003e\n```\n\n---\n\n## Workflow\n\n1. **Detection** – Identify WordPress images via core classes, uploads paths, and ACF metadata.\n2. **Conversion** – Wrap each image in a `\u003cpicture\u003e` element, preserving `srcset`, `sizes`, lazy-loading, and data attributes.\n3. **CDN Rewrite** – Append `?format=webp\u0026quality=X` plus WordPress-aware resize parameters.\n4. **Delivery** – Browsers that support WebP consume the new source; older browsers use the fallback `\u003cimg\u003e`.\n\n---\n\n## Installation\n\n1. Upload the plugin to `/wp-content/plugins/tomtomdesign-image-optim-for-cdn/` or install via WP-CLI:\n   ```\n   wp plugin install tomtomdesign-image-optim-for-cdn --activate\n   ```\n2. Activate through the **Plugins** screen.\n3. Configure settings under **Settings → tom \u0026 tom Image Optimization**.\n4. Confirm WP Offload Media is offloading uploads successfully.\n5. Verify your CDN honors both `?format=webp` and resize (`?width=`) query parameters.\n\n---\n\n## Prerequisites\n\n**WP Offload Media**\n\n- Installed, licensed, and configured to offload to S3-compatible storage.\n\n**KeyCDN (or compatible CDN)**\n\n- Supports on-the-fly format conversion via URL parameters (like `?format=webp`).\n- Can respect width directives for WordPress size variants.\n\n---\n\n## FAQ\n\n**Do I need WP Offload Media?**  \nYes—this plugin assumes your media library is offloaded. Local-only libraries won't benefit from the CDN rewrite logic.\n\n**Which CDNs are supported?**  \nAny CDN that understands format/resize parameters, including KeyCDN, Cloudflare, Amazon CloudFront, Fastly, BunnyCDN, and similar services.\n\n**Will this change my original images?**  \nNo. The plugin only adjusts markup. Source files remain untouched and serve as fallbacks.\n\n**Can I exclude certain images?**  \nYes. Instagram feeds, third-party plugin assets, existing WebP files, and images without WordPress metadata are skipped automatically.\n\n**What’s the difference between Basic and Enhanced Mode?**  \nBasic Mode rewrites simple `\u003cimg\u003e` tags. Enhanced Mode also carries over `srcset`, `sizes`, and custom data attributes for responsive layouts.\n\n**How do I confirm it’s working?**  \nCheck the settings page status cards, enable debug comments temporarily, inspect markup via DevTools, and monitor CDN logs for `?format=webp` requests.\n\n---\n\n## Changelog\n\n### 1.0.3\n\n- Security: Fixed all output escaping issues to prevent XSS vulnerabilities.\n- Security: Replaced all `_e()` calls with `esc_html_e()` for proper escaping.\n- Security: Escaped all URLs, variables, and translated strings.\n- Code quality: Removed discouraged `load_plugin_textdomain()` function (WordPress handles translations automatically since 4.6).\n- Code quality: Removed invalid `Network` header from plugin file.\n- Documentation: Created proper `readme.txt` file for WordPress.org compatibility.\n- Documentation: Fixed short description length to meet WordPress.org requirements.\n\n### 1.0.2\n\n- Enhancement: Derive CDN resize parameters from the attachment variant so thumbnails request correctly sized assets.\n- Enhancement: Preserve editor-defined dimensions while clamping requests to the original file’s max size.\n\n### 1.0.1\n\n- Fix: Mirror responsive `sizes` and `data-sizes` attributes into `\u003csource\u003e` nodes for proper responsive behavior.\n\n### 1.0.0\n\n- Initial release of tom \u0026 tom Image Optimization for CDN with automatic `\u003cimg\u003e` to `\u003cpicture\u003e` conversion, WP Offload Media integration, CDN support, admin settings, smart detection, enhanced mode, and debug tooling.\n\n---\n\n## Upgrade Notice\n\n- **1.0.3** – Security and code quality improvements. All output is now properly escaped, and the plugin follows WordPress.org coding standards.\n- **1.0.2** – Honors WordPress size variants (including custom crops) so smaller images don't fall back to the full-size asset.\n- **1.0.1** – Copies `sizes`/`data-sizes` into `\u003csource\u003e` elements to maintain responsive rendering.\n- **1.0.0** – Initial release.\n\n---\n\n## Technical Details\n\n**Settings Options**\n\n- `keycdn_webp_enabled` — Toggle site-wide WebP conversion.\n- `keycdn_webp_enhanced` — Enable enhanced `srcset` handling.\n- `keycdn_webp_debug` — Surface HTML comments for debugging.\n- `keycdn_webp_quality` — Define WebP quality (1-100).\n\n**Detection Logic**\n\n- WordPress attachment classes (`wp-image-123`).\n- WordPress size classes (`size-thumbnail`, etc.).\n- Advanced Custom Fields data attributes.\n- Uploads directory checks (`/wp-content/uploads/`).\n- Focal point styles (`object-position`).\n- Descriptive alt text (10+ characters).\n\n**Exclusions**\n\n- Instagram feed images (`sb-instagram-feed-images`).\n- Existing WebP assets (`.webp` extension).\n- Plugin or static assets within `/plugins/`.\n- Images lacking WordPress metadata.\n\n---\n\n## Support\n\nOpen an issue or pull request on GitHub for feature requests, bug reports, or documentation tweaks. Contributions are welcome.\n\n---\n\n## Privacy\n\nThe plugin does not collect, store, or transmit personal data. All processing happens within your WordPress installation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgbsimon%2Fkeycdn-webp-optimizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgbsimon%2Fkeycdn-webp-optimizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgbsimon%2Fkeycdn-webp-optimizer/lists"}