From 5a693750cb11f30f5bf8f9b259df16e6482789bc Mon Sep 17 00:00:00 2001 From: Marcel Rebro Date: Mon, 20 Jul 2026 11:49:09 +0200 Subject: [PATCH 1/2] docs: align image format guidance with WebP CI enforcement The lint_images CI check requires WebP and rejects PNG/JPG, but the style guide still said PNG for screenshots. Update the standards to match. Co-Authored-By: Claude Opus 4.8 (1M context) --- standards/content-standards.md | 9 +++++---- standards/quality-standards.md | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/standards/content-standards.md b/standards/content-standards.md index 96fe76cecc..82bec0595e 100644 --- a/standards/content-standards.md +++ b/standards/content-standards.md @@ -186,7 +186,7 @@ FROM apify/actor-node-playwright:22 All images must include meaningful alt text describing the content: ```markdown -![Apify Console showing the Actor creation dialog](./images/create-actor.png) +![Apify Console showing the Actor creation dialog](./images/create-actor.webp) ``` ### Theme @@ -205,10 +205,11 @@ Use red boxes or arrows to highlight important UI elements: ### Image format -- **PNG** for screenshots and diagrams -- **JPG** for photos +- **WebP** for screenshots and diagrams - **SVG** for logos and icons (when available) +New raster images must be WebP. The `lint_images` CI check fails on PNG, JPG, and other raster formats. Convert and optimize an image - or a whole directory - with `pnpm opt:images `, then update your Markdown to reference the resulting `.webp` file. + ### File organization Store images in an `images/` subdirectory next to the markdown file: @@ -218,7 +219,7 @@ platform/ ├── actors/ │ ├── running.md │ └── images/ -│ └── run-button.png +│ └── run-button.webp ``` ## Lists diff --git a/standards/quality-standards.md b/standards/quality-standards.md index fc1896b99b..8eb0cb16dd 100644 --- a/standards/quality-standards.md +++ b/standards/quality-standards.md @@ -82,7 +82,7 @@ Before submitting documentation, verify: - [ ] Screenshots use light theme - [ ] Red indicators used to highlight UI elements - [ ] Images stored in `images/` subdirectory -- [ ] Image format is appropriate (PNG for screenshots, SVG for logos) +- [ ] Image format is appropriate (WebP for screenshots, SVG for logos) ### File organization From 0b7a6a0a51a8e5f2c350611d29a9dfb023a176d1 Mon Sep 17 00:00:00 2001 From: Marcel Rebro Date: Thu, 23 Jul 2026 11:15:47 +0200 Subject: [PATCH 2/2] docs: note SVG use for product images Co-Authored-By: Claude Opus 4.8 (1M context) --- standards/content-standards.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/standards/content-standards.md b/standards/content-standards.md index 82bec0595e..b2420867ad 100644 --- a/standards/content-standards.md +++ b/standards/content-standards.md @@ -206,7 +206,7 @@ Use red boxes or arrows to highlight important UI elements: ### Image format - **WebP** for screenshots and diagrams -- **SVG** for logos and icons (when available) +- **SVG** for logos, icons, and product images (when available) New raster images must be WebP. The `lint_images` CI check fails on PNG, JPG, and other raster formats. Convert and optimize an image - or a whole directory - with `pnpm opt:images `, then update your Markdown to reference the resulting `.webp` file.