A picture needs a place.

A product image helps someone examine a thing. An editorial photograph can establish a place or mood. A diagram explains a relationship. A small card cover helps identify a destination. These roles need different compositions and different levels of detail. Before exporting anything, write down what the image is supposed to contribute.

That purpose determines what can be cropped away. A close crop of a ceramic object may be convincing as an editorial detail but insufficient for a buyer trying to see its complete shape. An atmospheric image behind a heading may need quiet space around the text. A technical diagram may need every label to remain legible.

Use the actual layout as part of the review. Place the image beside the real title, not a placeholder with half as many words. Try its smallest card and its largest view. If the source does not have the composition the role needs, finding a better source is often more effective than a long chain of export adjustments.

For continuous-tone photographs, lossy encodings such as JPEG, WebP and AVIF can reduce transfer size by discarding information. Whether the loss is acceptable depends on the image and the intended display. Fine text, flat edges and subtle gradients reveal different weaknesses. A setting that works for a busy outdoor photograph may be poor for a screenshot.

PNG supports lossless raster storage and transparency. It remains useful when exact edges or pixels matter, but a large photograph saved as PNG can be unnecessarily heavy. WebP also supports lossless encoding and transparency, while AVIF provides additional capabilities of its own. Check the actual encoder options and target-browser requirements rather than inferring everything from the suffix.

SVG describes shapes rather than a fixed raster grid. It is a natural fit for many icons, logos and authored diagrams. It is not automatically the smallest choice for complex artwork, and a photograph wrapped inside an SVG does not become resolution-independent. Keep meaningful labels as accessible text where possible, and use a trusted or sanitized source when accepting SVG uploads.

There is no universal winner. Make candidate exports, compare them at their intended display size, and inspect their byte counts. Quality numbers from different encoders are not a shared measurement scale. JPEG quality 80 and WebP quality 80 do not promise equal fidelity or equal file size.

Compression is easiest to discuss when the source, dimensions and display are held constant. The examples below all begin with the same 800 × 500 illustration. Two JPEG settings and one WebP setting produce different binary sizes. Those numbers describe these particular exports, not a general claim that one format is always a fixed percentage smaller.

Look at the amber edges, the fine label marks, the diagonal light and the shaded blue surface. Low-quality encoding can introduce blocks, ringing, softened edges or simplified texture. A smooth gradient may show banding. At normal display size, some differences may be unobtrusive; under magnification they become easier to inspect. Both views are useful, but only one represents the intended reading distance.

Compare the full composition first. Then inspect the areas that carry meaning. If a product label must be read, an export that loses it is not successful merely because the total file is small. If the label is irrelevant in a tiny editorial thumbnail, preserving every mark may buy nothing for the reader.

A CSS pixel describes a layout unit, not necessarily one physical display pixel. If a card image is 360 CSS pixels wide on a display with a device pixel ratio of 2, a roughly 720-pixel-wide source is a useful planning target. That multiplication is a sizing estimate, not a promise about the browser’s final request or the viewer’s perception.

The source must also fit the crop. A very wide source placed in a tall frame may be enlarged until its height covers the frame, leaving much of its width outside the visible area. Calculating from the frame width alone can underestimate the raster size needed for that cover crop. Prepare variants around real placements, including their aspect ratios.

More pixels have costs beyond transfer. Decoded images need memory, and very large images can add work even when a compressed file looks modest. Fewer pixels can be efficient until the subject becomes visibly soft. Upscaling a small source cannot restore the detail that was never captured or retained.

Keep the original asset separate from delivery variants. A future layout may need a different crop or size. Repeatedly exporting from an already compressed derivative can accumulate loss and leaves fewer options than returning to the source.

The srcset attribute can describe alternative raster widths. With width descriptors, sizes tells the browser how wide the image’s layout slot is expected to be under the stated conditions. The browser combines this information with factors such as pixel density to choose a source. Do not describe a half-width card as 100vw unless it really occupies the full viewport.

Keep that description in agreement with the CSS. If the grid changes but sizes still describes the old layout, the browser can request a needlessly large source or one that lacks enough detail. The fallback src remains important, and every width descriptor must match its actual file.

Use picture when a breakpoint needs a different composition, or when offering alternative formats with appropriate fallbacks. Resolution switching asks which size of the same composition is useful. Art direction asks which composition is appropriate. They are related, but they do not solve the same problem.

With object-fit: cover, an image keeps its proportions while filling the container, so part of it may be clipped. With contain, the complete image fits and some container space may remain unfilled. Neither is inherently better. A complete product view and an edge-to-edge editorial cover have different requirements.

Object-position chooses how the image sits in that frame. A centered position is a sensible default only when it preserves what matters. In our illustration, the bottle sits toward the right. A tall, centered crop can lose it; moving the horizontal position can bring it back while discarding other parts of the scene.

A focal adjustment cannot rescue every composition. If a wide photograph contains several people or important details spread across the frame, a very narrow crop may never work. Provide a separately composed mobile image or change the container rather than endlessly moving a crop that cannot contain the story.

Include intrinsic width and height so the browser can establish an aspect ratio before the image is available. For a responsive image, CSS can still set inline-size: 100% and block-size: auto. Reserving the right space helps prevent nearby text from moving when the image appears. A deliberately cropped frame can reserve its own aspect ratio instead.

Images far down a long page can often use native lazy loading. The main image visible on arrival needs a different decision. Do not lazy-load an image that is the page’s Largest Contentful Paint element: delaying its request adds avoidable loading delay. Discover important images in the initial HTML when possible.

Fetchpriority is a hint about relative priority, not extra bandwidth. Use high priority sparingly for an image that genuinely deserves it. Marking every image as urgent removes the useful distinction and can compete with other critical resources. A preload also needs a concrete discovery problem to solve; otherwise it can add complexity or redundant requests.

Review the network waterfall and layout on a cold visit, then compare with a cached visit. A small file served late can still feel slow. A visually empty page can be waiting on discovery, server response, rendering or another resource rather than only on image compression. Measure the whole path before assuming an export setting is the cause.

For an informative image, the text alternative should convey the essential information needed in that context. It is not a contest to list everything visible. Our bottle illustration might need a short description in an image-handling tutorial. In a different article, the relevant information could be the placement of its subject or the relationship between its shapes.

A purely decorative image should normally have an empty alt attribute, so assistive technology can skip it. Omitting alt is different: a screen reader may announce an unhelpful filename. If an image is the only content of a link or button, its accessible name needs to explain the destination or action rather than merely describe its appearance.

A complex chart or diagram may need a nearby explanation, a table or a fuller description in addition to a concise alternative. Captions can provide visible context, but do not assume every caption automatically replaces the need to evaluate alt. Decide what information is already available and avoid making someone hear the same sentence several times.

For each important placement, record the source, aspect ratio, focal treatment, expected display widths, output variants and text alternative. Those decisions can live with the content instead of being rediscovered every time a card is added. The goal is a small, understandable image system rather than a new export ritual for every page.

Inspect the full view and the crop at real sizes. Compare encoded files without changing their dimensions halfway through the comparison. Check transparency against both themes. Confirm that a phone receives a sensible variant, that the page reserves space, and that important images are not delayed by an inappropriate lazy-loading rule.

Finally, read the page with images unavailable. Does the content still explain itself? Do links and controls still have names? A good image adds something worth seeing, while the document keeps its meaning when that image cannot be seen or has not arrived yet.