An online course rarely contains just one kind of image. A single module might need a catalog thumbnail, a wide lesson header, a process diagram, several interface screenshots, and a downloadable worksheet. Export all of them with the same settings and you usually get one of two outcomes: soft instructional details or unnecessarily heavy files.
The problem gets worse when a learning designer hands a folder to an LMS administrator without explaining which file belongs where. The admin compresses a few images again, uploads the wrong ratio for a card, and discovers after publishing that labels are unreadable on mobile.
This workflow treats course images as a small publishing system. It helps instructional designers decide dimensions, formats, names, and quality targets before exporting from Figma with TinyImage.
Start with the places where images will appear
Do not begin by exporting every frame at 2x. First list the actual destinations in the learning management system:
- Course catalog cards
- Module and lesson headers
- Inline diagrams
- Product or software screenshots
- Instructor portraits
- Completion certificates
- Downloadable PDFs
Record the displayed dimensions or aspect ratio for each placement. If the LMS documentation gives only a recommended upload size, test how that image is cropped on desktop and mobile. A 16:9 catalog card may become a shorter strip in a sidebar, while an inline diagram may be allowed to retain its natural height.
This placement inventory prevents a common mistake: using one large “master” PNG everywhere and leaving the browser or LMS to resize it.
Set useful budgets, not arbitrary compression percentages
A quality slider is an input, not a publishing requirement. A better target is the largest file size that still keeps the learning experience fast and readable.
For example, a team might start with:
| Asset | Working target | What must survive |
|---|---|---|
| Catalog thumbnail | 80–150 KB | Title mark and clear subject |
| Lesson header | 150–250 KB | Brand detail at wide ratios |
| UI screenshot | 120–300 KB | Labels, fields, and cursor detail |
| Diagram | 80–200 KB | Lines, annotations, and small type |
| Portrait | 80–180 KB | Natural facial detail |
These are starting points, not universal limits. A dense analytics screenshot may need more data than a flat illustration. The useful rule is to spend bytes where they teach something.
For a wider performance framework, see the website asset compression budget for design teams. The same reasoning applies to course pages, especially when learners may be on mobile connections.
Match the format to the teaching job
Choose formats asset by asset:
- JPG works well for photographs and screenshot-heavy compositions when transparency is unnecessary.
- PNG is useful for transparency, very sharp flat graphics, and diagrams that show visible artifacts under lossy compression.
- WebP or AVIF can substantially reduce web image weight when the LMS accepts them.
- SVG is a good fit for simple vector diagrams or icons if the platform allows SVG uploads safely.
- PDF is appropriate for printable worksheets and reference documents, not for ordinary images embedded in a lesson.
Before adopting a newer format, upload a real test. Some LMS interfaces accept a file but later transform it, strip transparency, or fail to create thumbnails. WebP versus AVIF for Figma exports provides a more detailed decision process.
Build export frames around reading conditions
Keep one Figma section per course or module, then separate source design from export-ready frames. Name the latter by placement rather than by visual concept:
course-analytics/catalog-card
course-analytics/module-02-header
course-analytics/lesson-02-03-funnel-diagram
course-analytics/lesson-02-03-filter-panelCheck text size at the image’s displayed dimensions. A diagram that looks elegant at 1440 pixels wide may become useless in a 680-pixel lesson column. Instead of shrinking the whole diagram, simplify it or split it into two instructional steps.
For software screenshots, crop around the action the learner needs to recognize. Keep enough surrounding interface to establish context, but remove unrelated navigation and blank space. If a cursor, tooltip, or selected control matters, make it unmistakable without relying only on color.
Export and compress in a controlled pass
With the final frames selected, use TinyImage to export compressed images from Figma and adjust output settings to the format and target you established. Export a small representative set first: one photo, one diagram, and one detailed screenshot.
Review those files before processing the complete course. This catches incorrect assumptions while the batch is still cheap to change.
Avoid repeatedly compressing an already compressed image. Keep the editable Figma source and make each delivery export from that source. If an LMS administrator returns a downloaded JPG for revision, find the original frame instead of treating the delivery file as the new master.
Use filenames that survive the handoff
The LMS administrator should not need to open six files called Frame 482.png. Use a predictable scheme:
course-module-lesson-placement-version.extFor example:
analytics-02-03-filter-panel-v2.webp
analytics-02-catalog-card-v1.jpg
analytics-02-funnel-reference-v3.pdfPut the placement and lesson identifier before the version. That makes related assets stay together when sorted and reduces the chance of placing a module header in the wrong lesson.
Include alt-text guidance in the handoff sheet rather than embedding it in the filename. The image alt text handoff checklist for designers explains how to distinguish informative images from decorative ones.
Review inside the LMS, not only on your desktop
An exported file can be technically correct and still fail after upload. Publish a hidden test module and check:
- Catalog crops at every supported card size.
- Diagram labels on a typical phone.
- Screenshot detail at the lesson column’s real width.
- Loading behavior on a throttled or ordinary mobile connection.
- Dark-mode or themed backgrounds if the LMS supports them.
- Alt text and captions in the rendered lesson.
- Whether the LMS recompressed the source into visible artifacts.
Ask someone unfamiliar with the Figma file to complete one lesson. If they must zoom an image to follow the instruction, change the composition rather than merely increasing export quality.
A compact course-image handoff checklist
Before delivery, confirm:
- Every image maps to a named LMS placement.
- Ratios reflect actual catalog, header, and lesson containers.
- Small instructional text remains readable at display size.
- File formats are accepted by the LMS.
- Files meet a documented weight target.
- Filenames identify course, module, lesson, and placement.
- Informative images include suggested alt text.
- Source frames remain editable in Figma.
- A representative module has been reviewed after upload.
TinyImage can make the compression and multi-format export work much faster, but it cannot decide whether a diagram teaches clearly or whether the LMS’s crop removes the important detail. Keep those decisions with the learning team. The best export workflow is not the one that creates the smallest folder; it is the one that lets learners understand the lesson without waiting or squinting.
Read as Markdown Related resource index Site index for AI agents
Pro Bundle