Start from the source image
Crop each image for the place it appears and export dimensions close to the largest size the design needs. A huge source file adds work even when the final card is small.
Use a modern compressed format when your image pipeline supports it, and compare the result visually so compression does not soften important details.
Reserve the image's space
Set a width and height or an aspect ratio so the browser can lay out the page before the image arrives. For a Next.js Image component, provide accurate sizes for responsive layouts.
Load the image visible at the top of the page promptly. Let lower-page images load as they approach the viewport. Avoid preloading every image in a grid.
Review delivery on real devices
Check the rendered image at mobile and desktop widths and watch for an unexpectedly large download. Use the browser network panel to confirm which asset was delivered.
Use descriptive alternative text for images that add information. Leave decorative images with empty alternative text so they do not distract from the content.