You finish a graphic, export it, and discover that the crisp lettering has acquired a fuzzy entourage. The original looked clean. The exported version looks as though the text has been lightly breaded. Before rebuilding the design, check the format and compression settings. The last step in a creative workflow can change the image you worked so carefully to make.
The everyday JPEG used on the web normally uses lossy compression: it reduces file size by discarding some image information. That can work well for photographs, where gradual changes in color and texture help conceal small differences. Sharp lettering, diagrams and hard edges are less forgiving. A format decision that suits a landscape may be a poor fit for a screenshot of a spreadsheet. [1]
PNG takes a different approach. Its compression is lossless, allowing the encoded pixels to be reconstructed exactly. It also supports transparency, which the ordinary JPEG format does not. That makes PNG a useful choice for a raster logo, a screenshot or a graphic with a transparent background. Lossless describes preservation of the image supplied to the encoder; it cannot reverse blur or missing detail already present in that image. [1]
There is a reason compression artifacts have recognizable shapes. JPEG works with blocks of image data, and lossy encoding can produce visible squares, softened edges or halos. Some compression methods also reduce color detail more aggressively than brightness detail. That trade can be difficult to notice in one picture and painfully obvious in another. A bright label against a flat background makes a very different test from a photograph of leaves. [2]
For a practical export check, keep your editable original and make two small trials from it. Use a photo with subtle gradients and a graphic with tiny text. Compare the results at the size people will actually see, then zoom in to investigate any trouble. Record both the file size and the visual result. A smaller number is useful only if the image still does its job.
Treat formats as tools with different assignments. A photo, an interface capture and a transparent sticker should not automatically inherit the same export preset. The satisfying choice is the one that preserves the details your audience needs without making them download more than necessary. Once that becomes a habit, the export dialog stops being a final mystery button and starts being part of the design.
