The Export That Fails the Web Spec
A marketing team needs the same hero image as: a 1200 × 628 px JPG under 150 KB for a social post, a transparent-background PNG for a slide deck, and a 2× retina WebP. The working file is a 4000 × 2000 px PSD in sRGB, 8-bit, with a text layer and two Smart Objects. The first export attempt produced a 900 KB JPG and a PNG with a white box behind the logo.
1. Why did the PNG show a white box, and how do you fix it?
Read the worked answer
The background layer is likely a filled white layer or the logo sits on a non-transparent layer, so the PNG exports the white pixels. Fix: hide or delete the white background so transparency is real, and export with Transparency enabled (Export As or Save a Copy to PNG). Confirm the layer stack - a white Background layer with a lock icon cannot be transparent; convert it or hide it. Also check the logo's Smart Object doesn't include a white matte.
2. How do you hit under 150 KB at 1200 × 628 without visible artifacts?
Read the worked answer
Use File > Export > Export As or Save a Copy to JPG: set quality around 60–70, enable Convert to sRGB, and embed the profile. If still over budget, lower quality in small steps and inspect at 100% - banding in gradients and mosquito noise around text are the failure signs. Do not downsample below 1200 × 628; the dimension is a spec. Alternatively, export a WebP at similar quality, which typically hits the size with fewer artifacts, if the platform accepts it.
3. What must be true before exporting the 2× WebP?
Read the worked answer
The document must be at the 2× pixel size (2400 × 1256) or exported with a 2× scale setting so the browser renders it crisply. Keep it in sRGB, 8-bit; WebP does not need 16-bit. Text and Smart Objects should be rasterized at final size for the export (or use Export As, which handles this). Verify the exported file's actual pixel dimensions and that transparency is preserved if the WebP is used over a variable background.