Pixels versus file size
Image dimensions and file size are different properties. A 3000 × 2000 pixel picture contains six million pixels, while the number of file bytes depends on the format and how efficiently it is compressed. A small number of bytes does not always mean an image is appropriately sized for the layout. Both width/height and encoding quality matter.
Start from the actual container
A thumbnail displayed at 320 CSS pixels wide does not usually need to ship as a 3000-pixel image. At the same time, high-density displays can look better with approximately twice the CSS pixel count. As a practical example, a thumbnail shown at 320 × 180 CSS pixels may use a 640 × 360 source. Your actual responsive setup should determine the best export.
Hero banners and responsive images
A wide hero illustration may need a larger original than a card thumbnail, but serving exactly the same image to every device wastes bandwidth. WordPress supports responsive image sizes in many themes through srcset and sizes attributes. Generate reasonable source variants, and check that your layout communicates its intended display width to the browser.
Image shape and cropping
The aspect ratio is often more important than the raw dimensions. A square avatar, a 16:9 video preview and a portrait story require different shapes. Crop deliberately to retain faces, typography and focal points. CompIMG includes precise resizing, percentage-based cropping, social image presets and rounded-image utilities for common workflows.
Quality checks before publication
Preview on a narrow screen, on a desktop monitor and at the approximate viewing size. Avoid shipping oversize images while also avoiding heavy upscaling of small originals. Preserve source graphics separately so you can export new dimensions without recompressing an already lossy file repeatedly.