A customer case study rarely ships as one web page. The same story may need a customer logo, portrait, product screenshot, quote card, social preview, sales slide, and downloadable PDF. If each asset is exported ad hoc, the launch folder quickly fills with soft screenshots, mismatched crops, unexplained filenames, and images far heavier than the page needs.
TinyImage can export and compress the image and PDF outputs from a controlled set of Figma frames. The important work is deciding what belongs in that set, which source is authoritative, and how every crop will be checked before the customer sees it.
Start with permission, not pixels
Create an asset register before designing the page. For every logo, portrait, screenshot, and quote, record its source, owner, usage permission, approved context, expiry or review date, and any restrictions. A customer approving a logo on a webpage has not automatically approved an executive portrait in paid social ads.
Separate three kinds of truth:
- approved customer facts and quotations;
- supplied brand assets, including the correct logo variant;
- product imagery created by your team.
Do not retouch a customer logo, invent a testimonial attribution, or show private product data just to improve the composition. Use realistic but approved demo data when a screenshot cannot safely show a real account.
This workflow is narrower than a general press kit asset export workflow. A press kit provides reusable company assets. A case study pack combines two brands, customer evidence, product UI, and channel-specific crops under a single approval.
Define the deliverables as slots
Turn every publishing destination into a named slot rather than an informal request for “a few images.” A useful manifest might include:
- customer logo for light and dark backgrounds;
- article hero at desktop and mobile proportions;
- one or more readable product screenshots;
- portrait with a documented focal point;
- quote card for organic social;
- open graph image;
- thumbnail for the resource index;
- compressed review PDF for customer approval.
For each slot, record dimensions or aspect ratio, intended format, transparency requirement, maximum useful file size, naming convention, and fallback. Build one Figma section containing the exact export frames. This makes omissions visible and prevents a teammate from exporting an obsolete exploration elsewhere in the file.
Match format to the visual job
Use SVG for simple logos when the publishing system accepts it. Export photographic portraits in a photographic format rather than forcing them into a large PNG. Product UI needs a visual check: a compressed photographic format may work for a large, image-heavy screen, while crisp interface text and transparency can justify PNG or WebP.
Do not choose a format because it won one generic benchmark. Check the actual asset at its displayed size. The SVG, PNG, and WebP guide for Figma exports is a useful starting point, but customer-supplied logos and publishing platforms may impose their own constraints.
If the CMS transforms uploads, test the complete path. A sharp local export can still become blurry after an automatic resize, a second compression pass, or an incorrect responsive-image rule.
Design crops around what must survive
Mark the non-negotiable content in each source image. For a portrait, that may be the face and comfortable headroom. For a product screenshot, it may be a result, chart, or interaction rather than the entire application window. For a logo, it includes clear space and the approved lockup.
Create crops intentionally for wide, square, and narrow placements. Do not stretch one master frame until important UI becomes unreadable. If the mobile hero cannot preserve the evidence in a desktop screenshot, use a different approved detail rather than a microscopic version of the same image.
Check quote cards with the longest approved attribution. A short name can hide layout problems that appear when a job title, company, or translated quote is inserted later.
Export a versioned package with TinyImage
Name exports so a publisher can identify them without opening each file. For example:
case-study-acme-hero-1600x900-v03.webp
Include the customer slug, asset role, dimensions when relevant, and version. Avoid filenames such as final-final-2.png. Use TinyImage to export and compress the selected frames, then keep the manifest beside the outputs so filenames can be matched back to approvals.
Review compression on difficult details: small interface text, thin strokes, gradients, facial features, and logos over textured backgrounds. Compare at the intended display size and at high-density rendering. The smallest file is not a win if the customer name or product evidence looks damaged.
Run a customer-facing QA pass
Review the assets in context, not only on the Figma canvas. Upload them to a draft page or representative CMS environment and check:
- crop behavior at real breakpoints;
- logo contrast in light and dark modes;
- screenshot legibility on a phone;
- portrait treatment and focal point;
- visible customer or personal data;
- alt text and nearby captions;
- filename-to-slot mapping;
- page weight and layout movement;
- social preview crops in a preview tool;
- PDF links, pagination, and image quality.
Ask the customer to approve the composed usage, not a folder of detached source images. Record exactly which page, quote, logo, portrait, and social treatments were approved. If the story changes later, preserve the approved package rather than silently replacing its contents.
TinyImage removes repetitive export and compression work from this process. It does not decide whether an image is truthful, permitted, readable, or appropriate for a particular channel. A strong case study asset workflow makes those decisions explicit, then produces a small, predictable package that web, sales, and social teams can use without improvising.
Read as Markdown Related resource index Site index for AI agents
Pro Bundle