Athai/optimized images

[alanthai]

Compresses high res images before rendering

fast-4g-asset-load.mov

[snyk-io]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
⏩	Open Source Security	0	0	0	0	0 issues
⏩	Licenses	0	0	0	0	0 issues
✅	Code Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

[Copilot]

Pull request overview

Adds build-time image optimization via vite-imagetools and updates UI pages/components to use responsive srcset assets (plus some related layout tweaks).

Changes:

• Add vite-imagetools to Vite config and dependencies.
• Introduce image “barrel” modules (product-images, sdk-images) that export optimized URLs / srcset strings and update pages to consume them.
• Update several CSS modules for heading spacing, nav responsiveness, and hero/section layout.

Reviewed changes

Copilot reviewed 13 out of 18 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
client/vite.config.ts	Registers imagetools() plugin to enable image transforms.
client/package.json	Adds vite-imagetools dev dependency.
client/package-lock.json	Locks new imagetools/sharp dependency tree.
client/tsconfig.app.json	Adjusts TS config (incl. disabling noUncheckedSideEffectImports and adding files).
client/src/assets/product-images.js	Centralizes imagetools-based optimized product icons/previews.
client/src/assets/product-images.d.ts	Declares types for the product image barrel exports.
client/src/assets/sdk-images.js	Centralizes imagetools-based optimized SDK preview images.
client/src/assets/sdk-images.d.ts	Declares types for the SDK image barrel exports.
client/src/pages/products/Products.tsx	Switches product previews to srcSet-driven images via the barrel module.
client/src/pages/sdks/DeveloperSDKs.tsx	Switches SDK preview images to srcSet via the barrel module.
client/src/globals.d.ts	Adds a module declaration for one specific imagetools query import.
client/src/components/top-nav/TopNav.tsx	Adds a compact brand icon variant for smaller screens.
client/src/components/top-nav/TopNav.module.css	Adds responsive nav layout/styles for full vs icon logo, link wrapping, etc.
client/src/design/heading/Heading.module.css	Fixes heading line-height and removes default heading margins.
client/src/components/section/Section.module.css	Adjusts mobile gap spacing in section layout.
client/src/components/page-layout/PageLayout.module.css	Centers hero text.
client/src/app.css	Updates media query syntax for responsiveness.
client/src/assets/bolt.svg	Adds new Bolt icon asset for the compact nav logo.

Files not reviewed (1)

• client/package-lock.json: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

These srcset assets are generated as WebP-only (format=webp), which will fail to display in browsers without WebP support. If you need broader compatibility, consider generating a fallback format and serving via <picture> or multi-format outputs.

Suggested change

	export { default as PreviewJSSrcSet } from "./preview-js.jpg?w=400;800&format=webp&as=srcset";
	export { default as PreviewJSSrcSet } from "./preview-js.jpg?w=400;800&format=webp;jpg&as=picture";

[Copilot]

The brand link now contains two images with the same alt text, which causes duplicate announcements for screen readers. Mark one image as decorative (e.g., alt="" and/or aria-hidden="true") and keep a single meaningful accessible name for the link/logo.

Suggested change

	alt="Game Logo"
	alt=""
	aria-hidden="true"

[Copilot]

This file mixes media query syntaxes (@media (width < ...) and @media (max-width: ...)). For consistency with the rest of the file (and nearby CSS), consider converting the remaining max-width query to the same range syntax (or vice versa).

[Copilot]

noUncheckedSideEffectImports was changed from true to false, which weakens a useful safety check across the app build. If this was done to work around a specific new import pattern, it would be better to address that root cause (e.g., add/adjust module declarations for the imagetools query imports) and keep this enabled for consistency with tsconfig.node.json.

Suggested change

	"noUncheckedSideEffectImports": false
	"noUncheckedSideEffectImports": true

[Copilot]

All generated image URLs are forced to WebP (format=webp). That will render blank in browsers without WebP support. If non-WebP clients must be supported, generate multiple formats and/or use a <picture> fallback strategy so PNG/JPEG can still load.

Suggested change

	// Icons: WebP at 2× display size (displayed at 80–88px), single URL
	export { default as IconSwipeableAds } from "./icon-swipeable-ads.png?w=160&format=webp";
	export { default as IconCarouselAds } from "./icon-carousel-ads.png?w=160&format=webp";
	export { default as IconVideoAds } from "./icon-video-ads.png?w=160&format=webp";
	export { default as IconGameController } from "./icon-game-controller.png?w=176&format=webp";
	export { default as IconCheckoutProduct } from "./icon-checkout-product.png?w=160&format=webp";
	// Ad preview images: displayed at height 400px (fixed CSS), width ~300px
	// Generates two sizes and returns a "url 300w, url 600w" srcset string
	export { default as PreviewSwipeableAdSrcSet } from "./preview-swipeable-ad.png?w=300;600&format=webp&as=srcset";
	export { default as PreviewCarouselAdSrcSet } from "./preview-carousel-ad.png?w=300;600&format=webp&as=srcset";
	export { default as PreviewVideoAdSrcSet } from "./preview-video-ad.png?w=300;600&format=webp&as=srcset";
	export { default as PreviewCheckoutProductSrcSet } from "./preview-checkout-product.png?w=300;600&format=webp&as=srcset";
	// Game preview images: displayed at exactly 200×250px with object-fit: cover
	// Generates two sizes and returns a "url 200w, url 400w" srcset string
	export { default as PreviewSwipeableGameSrcSet } from "./preview-swipeable-game.png?w=200;400&format=webp&as=srcset";
	export { default as PreviewCarouselGameSrcSet } from "./preview-carousel-game.jpg?w=200;400&format=webp&as=srcset";
	export { default as PreviewVideoGameSrcSet } from "./preview-video-game.jpg?w=200;400&format=webp&as=srcset";
	export { default as PreviewCheckoutGameSrcSet } from "./preview-checkout-game.png?w=200;400&format=webp&as=srcset";
	// Icons at 2× display size (displayed at 80–88px), single URL
	export { default as IconSwipeableAds } from "./icon-swipeable-ads.png?w=160";
	export { default as IconCarouselAds } from "./icon-carousel-ads.png?w=160";
	export { default as IconVideoAds } from "./icon-video-ads.png?w=160";
	export { default as IconGameController } from "./icon-game-controller.png?w=176";
	export { default as IconCheckoutProduct } from "./icon-checkout-product.png?w=160";
	// Ad preview images: displayed at height 400px (fixed CSS), width ~300px
	// Generates two sizes and returns a "url 300w, url 600w" srcset string
	export { default as PreviewSwipeableAdSrcSet } from "./preview-swipeable-ad.png?w=300;600&as=srcset";
	export { default as PreviewCarouselAdSrcSet } from "./preview-carousel-ad.png?w=300;600&as=srcset";
	export { default as PreviewVideoAdSrcSet } from "./preview-video-ad.png?w=300;600&as=srcset";
	export { default as PreviewCheckoutProductSrcSet } from "./preview-checkout-product.png?w=300;600&as=srcset";
	// Game preview images: displayed at exactly 200×250px with object-fit: cover
	// Generates two sizes and returns a "url 200w, url 400w" srcset string
	export { default as PreviewSwipeableGameSrcSet } from "./preview-swipeable-game.png?w=200;400&as=srcset";
	export { default as PreviewCarouselGameSrcSet } from "./preview-carousel-game.jpg?w=200;400&as=srcset";
	export { default as PreviewVideoGameSrcSet } from "./preview-video-game.jpg?w=200;400&as=srcset";
	export { default as PreviewCheckoutGameSrcSet } from "./preview-checkout-game.png?w=200;400&as=srcset";