A photograph can contain thousands of pixels and still appear as a small thumbnail. The stored image has its own dimensions, while the interface chooses how much space it occupies. Confusing those two measurements makes image quality harder to explain.

A display may use more than one physical pixel for each unit of interface space. This can make a suitable high-resolution image look crisp, but extra detail is useful only if the viewer can see it at the chosen size.

Compare a picture at its actual display size before judging an export. Look at edges, small text, and fine texture. The useful question is whether the file carries enough detail for its purpose without carrying far more than the experience needs.

A few starting points
  1. Distinguish image dimensions from display size.
  2. Inspect the result at its intended scale.
  3. Keep detail that helps the viewer.

An example to consider.

Imagine checking an icon at the size it will actually appear. A crisp enlarged preview may hide how a small set of pixels communicates the shape.

Put it in perspective.

A feature becomes easier to understand when you can describe the ordinary action it supports. Start with the task, then work inward toward the mechanism.

Follow a related question

Ask which conditions the demonstration assumes.

Beyond a compelling demonstration

Choose a nonurgent source.

Choose the moment to check

Keep learning

Related background to continue exploring this subject.

MDN: how the web works MDN: image file formats
Make room for ideas