Web publishing PSD to JPEG: bake LCP, srcset, and CDN cache keys into the brief instead of renaming files the night before launch
Largest Contentful Paint often dies on an oversized hero JPEG, and if design only optimizes for beauty while ignoring layout width and DPR, engineering absorbs all the pain. `web-psd-jpg` fits after creative freeze: encode a master JPEG to the content team’s long-edge and quality budget, then let the image CDN or build pipeline derive widths. Bad cache keys also strand users on stale art, so URLs must change when pixels change. Writing those three concerns into one brief cuts email loops between design, frontend, and platform ops.
How to Use
- Read the component’s real CSS width, multiply by the audience DPR you target, decide whether the PSD needs extra safe margins, and upload with separate “above-the-fold vs lazy” presets for the pipeline.
- Prototype in Lighthouse or WebPageTest to see whether the hero JPEG size matches the LCP budget; when overweight, shrink pixels before endlessly raising quality because JPEG returns diminish at excessive resolution.
- Publish through fingerprinted filenames or query versions, avoid year-long max-age on unversioned paths, and log when old URLs sunset so ops knows a cache purge is not the same as shipping new bytes.
PSD to JPG (web) FAQ
Hero JPEG for LCP—how do we pick long edge and quality?
Size to real layout width × DPR with a visual gate; codify separate presets for above-the-fold vs lazy assets.
Responsive srcset—does one PSD export suffice?
Responsive pages usually need 2x/3x or continuous w descriptors; the PSD is the visual master while a CDN or build step derives widths. Export one high-quality master with frozen color and sharpening policy, then codify srcset and sizes in the component repo instead of scattering ad-hoc exports across designers’ laptops.
Is progressive JPEG always better?
Better perceived loading on slow nets but encoding cost/size shifts; toggle per template backed by metrics.
CSS filters on top—what should JPEG export avoid?
Leave headroom on contrast/sharpen to prevent double halos; mark regions as “front-end filter only” in the PSD.
CDN shows stale JPEGs after release—why?
Fingerprint filenames or paths; never long-cache unversioned URLs.