Export Settings for a Banner That Must Not Blur
You deliver a web banner at 970 x 250 px for a client's homepage. The design includes a photo, a logo, and small legal text at 9 px. Your first export is a JPEG at quality 60 and it looks soft: the logo edges are fuzzy and the legal text is unreadable. The client also wants a version for a high-density (2x) display and a print version for a trade show handout. The homepage runs on a light gray background, and the banner has a white panel that must blend with it.
1. Why did the JPEG at quality 60 fail, and what format should the web banner use?
Read the worked answer
JPEG is lossy and compresses in blocks; at quality 60 the artifacts hit exactly the high-contrast edges (logo) and the smallest text (legal line). It is a poor fit for flat color, sharp edges, and tiny type.
Better choice: PNG for the banner. PNG is lossless and keeps logo edges and small text crisp, and it supports transparency if the white panel needs to blend with the gray page. If file size is a concern, try an optimized PNG or an SVG for the logo portion, but do not trade legibility for bytes on legal text.
Also fix the design if possible: 9 px legal text is at the edge of legibility; consider 10-11 px or moving it to a linked page. The export cannot rescue type that is too small.
2. How do you produce the 2x version and the print version correctly?
Read the worked answer
2x web version: export at 1940 x 500 px from the vector/photo source, not by upscaling the 970 px PNG. Upscaling adds no detail and softens edges. Name it clearly (banner_web_2x.png) and let the site's srcset choose it.
Print version: this is a different medium. Set up a print document at the physical size with 3 mm bleed and CMYK, place the photo at 300 ppi, and keep the logo vector. Do not send the 970 px web PNG to a printer; it will be far below print resolution at handout size. Export a PDF with embedded fonts and marks.
Keep all three outputs in separate folders with size and color mode in the filename so no one grabs the wrong one.
3. The white panel must blend with the light gray page. What do you check before export?
Read the worked answer
Blending depends on transparency and color matching:
- Transparency: if the panel should show the page gray, export PNG with an alpha channel and make the panel transparent, or set the panel to the exact page gray. A JPEG cannot do transparency and will show a white box.
- Color match: sample the page's gray value and use that exact value, or leave it transparent. A near-gray will show a visible seam.
- Edge check: view the export on the actual gray background at 100% to catch halos or a one-pixel border.
- Consistency: confirm the 2x version uses the same approach so the panel does not shift between densities.
Document the chosen gray value and transparency setting for the web team.