FIELD NOTE / 03
Smaller files. The same first impression.
A practical workflow for format, size and compression.
Resize before compressing
Exporting a huge image at very low quality is rarely the best first step. Identify the largest rendered width, account for high-density displays where necessary, then resize. For a card displayed at 500 CSS pixels, a 1000-pixel image may be a reasonable starting point for a 2× display. Measure the actual layout; do not apply that example as a universal requirement. Keep the source separate from your delivery files.
Match the format to the content
JPEG is useful for photographic scenes without transparency. PNG preserves sharp graphics and transparency but can produce large photographic files. WebP supports transparency and can be effective for web delivery. Our tool encodes using your browser, so results vary. JPEG exports flatten transparent areas onto white. Animated images are outside this tool’s scope; converting one may retain only a single frame.
Compare visual defects, not just percentages
Start with a moderate quality setting and compare the export at its intended viewing size. Inspect gradients for banding, edges for ringing and fine textures for smearing. A quality number is an encoder control, not a universal score shared by all formats. PNG does not use the same lossy quality setting. If the output is larger than the source, keep the source or change the format instead of assuming every conversion is a saving.
Keep the image understandable
Write alternative text that explains the image’s purpose in context. Decorative images may use empty alt text; informative images need a useful description. Do not stuff keywords into alt text. The local tool creates a new canvas export and does not intentionally copy source metadata; this is not a certified metadata-sanitization service. Check the final file if privacy or provenance is important.