Skip to content

docs: add image byte-budget tutorial - #3985

Draft
MarshallBear1 wants to merge 1 commit into
Shopify:mainfrom
MarshallBear1:agent/add-image-byte-budget-tutorial
Draft

docs: add image byte-budget tutorial#3985
MarshallBear1 wants to merge 1 commit into
Shopify:mainfrom
MarshallBear1:agent/add-image-byte-budget-tutorial

Conversation

@MarshallBear1

Copy link
Copy Markdown

Summary

Adds a written tutorial showing how to use React Native Skia's imperative API to decode a local image, resize it on an offscreen surface, and search across JPEG quality and dimensions until the decoded output fits a strict byte budget.

The tutorial includes:

  • a complete reusable TypeScript implementation;
  • exact Base64 decoded-byte accounting;
  • explicit disposal of Skia data, image, paint, snapshot, and surface objects; and
  • production notes on alpha, EXIF orientation, memory, request overhead, and server-side validation.

The example was extracted from production use, rewritten without application-specific dependencies or data, and checked against @shopify/react-native-skia 2.6.2. It is published under the MIT license.

Validation

  • branch is based on the current upstream main commit
  • tutorial and source resolve from the public default branch
  • tutorial implementation passes a strict TypeScript no-emit check against React Native Skia 2.6.2
  • known-value checks pass for Base64 byte accounting
  • this PR changes only apps/docs/docs/tutorials.md
  • git diff --check passes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

1 participant