{ "generatedAt": "2026-09-18T09:55:47.853Z", "cases": [ { "slug": "compress-vs-resize-images", "title": "One photo, unchanged dimensions, fewer bytes", "summary": "This 960 × 860 photograph decreased from 132,366 to 57,689 bytes (56.4% smaller) at JPG quality 70. Pixel dimensions stayed the same. This is one measured example, not a typical-savings or lossless-quality claim.", "observedAt": "2026-09-18", "method": "Exported through the actual Compress images workspace in the Codex in-app Chromium browser on macOS, using a local development build based on revision 8c91a24. Recommended mode, Keep original formats, quality 70, dimension limiting off, no byte target, and Always remove metadata off. The smaller result was re-encoded, not an unchanged-original fallback. File sizes and dimensions were then read from the downloaded files.", "limitations": [ "JPG encoding is lossy. Compare the downloadable originals at 100% and at the intended display size; equal pixel dimensions do not mean equal detail.", "Savings depend on the input, browser encoder and settings. One product photo is not a benchmark across image types.", "An optimized article preview may be encoded differently for delivery. The direct file links below are the measured artifacts." ], "figures": [ { "src": "/examples/image-evidence/product-source.jpg", "width": 960, "height": 860, "alt": "Original photo of two gray sneakers against a dark background", "caption": "Original JPG: 960 × 860 pixels; 132,366 bytes." }, { "src": "/examples/image-evidence/product-quality70.jpg", "width": 960, "height": 860, "alt": "The same sneaker photo after JPEG compression at quality 70", "caption": "Downloaded JPG at quality 70: 960 × 860 pixels; 57,689 bytes. Inspect fine fabric texture before choosing this setting." } ], "downloads": [ { "href": "/examples/image-evidence/product-source.jpg", "label": "Original JPG (132,366 bytes)" }, { "href": "/examples/image-evidence/product-quality70.jpg", "label": "Quality 70 JPG (57,689 bytes)" }, { "href": "/examples/image-evidence/manifest.json", "label": "Settings and file fingerprints" } ], "credits": [ { "label": "Photograph: Zachary Keimig on Unsplash", "href": "https://unsplash.com/photos/pair-of-gray-sneakers-o_U0kPh7uu0" }, { "label": "Unsplash License", "href": "https://unsplash.com/license" } ] }, { "slug": "edit-images-in-your-browser-workflow", "title": "Fit, padding and crop for the same requested size", "summary": "A 400 × 240 request produced a 268 × 240 fit, a 400 × 240 padded canvas, and a 400 × 240 crop. These actual PNG exports show why exact dimensions and preserved framing are separate choices.", "observedAt": "2026-09-18", "method": "The same 960 × 860 original product photo was used for all three exports in the actual Resize images workspace of the local app based on revision 8c91a24. Width 400, height 240, width/height unlinked, PNG output, transparent background, enlargement off, no maximum file-size target. Padding and crop used centered positioning (50%, 50%). Each mode was exported from the original, not from a previously resized output. The Codex in-app Chromium browser on macOS performed the rendering.", "limitations": [ "Resampling changes image detail. PNG preserves its rendered pixels losslessly; it cannot undo the source JPG compression or the resize.", "These outputs use a different format from the source. Their byte sizes are not an isolated comparison of resize modes or a general compression benchmark.", "Transparent padding can look white, dark or checkered depending on the viewer. Direct downloads preserve the actual alpha channel.", "Article previews are sized to their cards and are not a comparison at identical on-screen scale. Use the dimensions and downloaded files." ], "figures": [ { "src": "/examples/image-evidence/product-source.jpg", "width": 960, "height": 860, "alt": "The complete original sneaker photograph before resizing", "caption": "Source: 960 × 860 JPG; 132,366 bytes." }, { "src": "/examples/image-evidence/product-fit.png", "width": 268, "height": 240, "alt": "Complete sneaker photograph fitted inside a 400 by 240 box", "caption": "Fit inside: 268 × 240 PNG; 122,344 bytes. The complete image remains; the width is smaller than the requested box." }, { "src": "/examples/image-evidence/product-pad.png", "width": 400, "height": 240, "alt": "Complete sneaker photo centered with transparent padding at left and right", "caption": "Fit with padding: exactly 400 × 240 PNG; 126,490 bytes. The whole image is preserved on a wider transparent canvas." }, { "src": "/examples/image-evidence/product-fill.png", "width": 400, "height": 240, "alt": "Sneaker photo cropped at the top and bottom to fill a landscape frame", "caption": "Crop to fill: exactly 400 × 240 PNG; 185,954 bytes. The output trims the top and bottom to fill the frame." } ], "downloads": [ { "href": "/examples/image-evidence/product-source.jpg", "label": "Original photograph" }, { "href": "/examples/image-evidence/product-fit.png", "label": "Fit PNG" }, { "href": "/examples/image-evidence/product-pad.png", "label": "Padded PNG" }, { "href": "/examples/image-evidence/product-fill.png", "label": "Crop-to-fill PNG" }, { "href": "/examples/image-evidence/manifest.json", "label": "Settings and file fingerprints" } ], "credits": [ { "label": "Photograph: Zachary Keimig on Unsplash", "href": "https://unsplash.com/photos/pair-of-gray-sneakers-o_U0kPh7uu0" }, { "label": "Unsplash License", "href": "https://unsplash.com/license" } ] }, { "slug": "remove-background-refine-edges", "title": "Inspect an unretouched model result", "summary": "This preserved portrait example shows the original and the model output before manual correction. Inspect the hair boundary and partially retained background pixels rather than assuming the first mask is final.", "observedAt": "2026-09-17", "method": "Preserved built-in sample documented September 17, 2026 and inspected for this guide September 18. The repository records Transformers.js 4.3.0 with onnx-community/BEN2-ONNX revision c552aa82688edce09f0ac9d2e31ad53d9d629010, fp16, native ONNX WebGPU, and graph optimization disabled. Its mask output was encoded as WebP with alpha retained and no manual retouching. This guide reuses that file; background inference was not rerun for this publication.", "limitations": [ "One selected portrait does not establish accuracy on other photographs, hair types, glass, fur or complex backgrounds.", "The output contains partially transparent residual background pixels and imperfect edges. Review it on contrasting backgrounds and refine the mask before use.", "The observation date belongs to the preserved sample, not a fresh benchmark. No processing-time or mobile-performance claim is made." ], "figures": [ { "src": "/samples/background/portrait.jpg", "width": 960, "height": 1440, "alt": "Original portrait with the subject and surrounding background", "caption": "Original portrait: 960 × 1440 pixels. Compare subject boundaries with the output." }, { "src": "/samples/background/portrait-cutout.webp", "width": 960, "height": 1440, "alt": "Unretouched model output of the portrait with transparent and partially transparent background pixels", "caption": "Preserved BEN2 output: 960 × 1440 WebP with alpha. Hair edges and residual background pixels still need inspection; this is not a manually perfected cutout." } ], "downloads": [ { "href": "/samples/background/portrait.jpg", "label": "Original portrait" }, { "href": "/samples/background/portrait-cutout.webp", "label": "Unretouched WebP output" }, { "href": "/examples/image-evidence/manifest.json", "label": "Method and file fingerprints" } ], "credits": [ { "label": "Photograph: Ayo Ogunseinde on Unsplash", "href": "https://unsplash.com/photos/woman-in-black-long-sleeve-shirt-tvQFuEZCmd4" }, { "label": "Unsplash License", "href": "https://unsplash.com/license" }, { "label": "Pinned BEN2 model revision", "href": "https://huggingface.co/onnx-community/BEN2-ONNX/tree/c552aa82688edce09f0ac9d2e31ad53d9d629010" } ] } ], "files": [ { "path": "/examples/image-evidence/product-source.jpg", "bytes": 132366, "sha256": "296112715fda51fd47f24e2dc789dafda49895abb75228fe5981670e663afc6c", "width": 960, "height": 860, "format": "jpeg" }, { "path": "/examples/image-evidence/product-quality70.jpg", "bytes": 57689, "sha256": "55836c1df9887891f581919d8aa17c7ae3e5c36c2ee2236d9e09cfb3fd1b7046", "width": 960, "height": 860, "format": "jpeg" }, { "path": "/examples/image-evidence/product-fit.png", "bytes": 122344, "sha256": "5b86f943a2f4ad2b04d0b1b9e78718981648333880c1a0fcfb66894d38068710", "width": 268, "height": 240, "format": "png" }, { "path": "/examples/image-evidence/product-pad.png", "bytes": 126490, "sha256": "f6e9bb127bd27a136288702312b85fde4ae646db7546163dfdb6031625fd871e", "width": 400, "height": 240, "format": "png" }, { "path": "/examples/image-evidence/product-fill.png", "bytes": 185954, "sha256": "d5831907bbf2133c49399af763019fa3bcd4dfbf698f36a1058c882c1b893edb", "width": 400, "height": 240, "format": "png" }, { "path": "/samples/background/portrait.jpg", "bytes": 124134, "sha256": "fae918ea26b9f5ed9fe3686a5592fc577c8629f2100038ae3e865152c73420dd", "width": 960, "height": 1440, "format": "jpeg" }, { "path": "/samples/background/portrait-cutout.webp", "bytes": 127354, "sha256": "355dba9534028237f1e57a086269578a39e22060140c5772a4e745c0f5124a3c", "width": 960, "height": 1440, "format": "webp" } ] }