This case study shows how we converted a Japanese product detail page for Korean beauty brand REBEAUTY's EMS Brush Air mini into HTML. The original was a single long vertical image; the result is a real web page with cleanly separated text, images, and layout. All metrics below were measured directly from this single conversion.
Original
- Reference canvas
800 × 9,371 px— A single, tall image-only page that spans far beyond one screen - 1 image file,
1.4 MB - Headings, body copy, pricing, reviews—every piece of text is trapped in pixels. It cannot be searched, copied, translated, or edited.
Conversion Output
| Item | Result |
|---|---|
| Document Language | <html lang="ja"> — Declared as Japanese |
| Sections | 12 |
| Heading Structure | 1 h1 · 10 h2 · 3 h3 |
| Text | 103 blocks · 865 characters restored as live text |
| Extracted Images | 15 (model shots, product lineup, before & after, review avatars) |
| Styles | Inline CSS 27 KB — Perfectly preserves layout |
Original ↔ Output
The left panel displays the original flat image, and the right shows the live, reconstructed HTML page. Both panels scroll in sync at the exact same rate.
Loading…The rendered height matches perfectly at 9,371 px on both sides—represented as height ×1.000 in the quality report below.
Quality Report
Pixel-by-pixel comparison between the reconstructed output and the original.
| Metric | Value | Meaning |
|---|---|---|
| height | ×1.000 | Total height matches the original exactly |
| rows | 0.985 | Horizontal row-by-row brightness correlation |
| struct | 6.13 | Structural error (lower means closer to original) |
| bands | 23/24 | 23 out of 24 vertical sections within tolerance |
| pxdiff | PASS | Passed pixel verification gate |
Transfer Size
| Item | Size |
|---|---|
| Original flat image (1 file) | 1,438 KB |
| Reconstructed HTML document | 48 KB |
| 15 extracted images | 403 KB |
| Reconstructed Total | 451 KB (approx. 69% reduction) |
While the total size is less than a third of the original, the real-world performance gain is even greater. An image-only page requires downloading the entire 1.4 MB file before anything displays, whereas the reconstructed page renders the 48 KB document first and loads images progressively as they scroll into view.
When Content Changes: A Maintenance Game Changer
Product detail pages are never set in stone. Seasonal pricing, promotional copy, shipping notices, ingredient lists—what changes is almost always just a few lines of text. Yet on an image-only page, changing a single line requires re-exporting and re-uploading the entire image.
| Editing a Single Line of Copy | Image-Only Page | Reconstructed HTML |
|---|---|---|
| Original Design File | Must track down PSD/AI files (or rebuild from scratch) | Not needed |
| Who Does the Work | Designer | Anyone on the team |
| Workflow | Edit → Re-export → Re-upload | Edit only the target text |
| Multilingual Updates | Re-create images for each language | Swap text in place |
| Scope of Changes | Entire image file (1,438 KB) | A few lines of text |
This page places 103 text blocks precisely in their designated HTML tags. Updating "45%" to "60%" means simply editing that single block—without touching the layout, images, or spacing.
Gumson's Text Edit Mode was built for this exact workflow. It extracts only the text from the conversion Output into an easy-to-use form, then saves changes directly back into place. Because tag structures and CSS remain untouched, you never have to worry about breaking the design.
Key Advantages
- Searchable — With 865 characters of live text, search engines and AI answer engines can index your content. Text inside images cannot be indexed.
- Translatable — Simply replace the text blocks. There is no need to rebuild layouts, making localization effortless and cost-effective.
- Editable — Modifying a price or a line of copy requires neither the original design files nor a designer.
- Accessible — Screen readers can read the content, and users can adjust text size as needed.
- Maintenance costs drop to near zero. When prices or promotional copy change, simply edit the text block instead of remaking images—and expand into new languages without redesigning layouts.
Compare Side by Side
Compare the original capture and the reconstructed result side by side, scrolling in sync at the exact same scale and progress.
