📚 EVEDAYS Guide Book
[Image Optimization]•6 min read

Shrinking Images the Right Way: Resize First, Then Compress

1. Order determines the outcome


Most people reach for the quality slider first. The effective order is the opposite.

  • Resize to the dimensions you actually display

  • Choose the right format

  • Then tune the quality value


  • If a 4000 px-wide photo is displayed at 800 px, the other 3200 px carry bytes without contributing anything visible. Cutting the width to one fifth reduces pixel count to one twenty-fifth. No quality setting delivers a saving of that magnitude.

    2. Lossy versus lossless


  • Lossless (PNG, lossless WebP): original pixels are restored exactly. Right for screenshots, diagrams, and images containing text.

  • Lossy (JPEG, lossy WebP, AVIF): discards information the eye is least sensitive to. Right for photographs.


  • Lossy compression is irreversible. Re-saving a JPEG accumulates loss with each generation. Keep the original and compress a copy.

    3. Picking a format


    | Format | Best for | Notes |
    |---|---|---|
    | JPEG | Photographs | Universal support, no transparency |
    | PNG | Screenshots, logos, diagrams | Lossless, transparency, oversized for photos |
    | WebP | Most web imagery | 25–35% smaller than JPEG, supports transparency and animation |
    | AVIF | Photographs | Smaller than WebP, slower to encode |

    Saving a screenshot as JPEG is a common mistake: text edges pick up visible artifacts and the file is not much smaller than PNG anyway.

    4. How far to lower quality


    For JPEG and WebP, the 0.75–0.85 range is the practical balance point.

  • Above 0.9: much larger files with barely visible benefit

  • 0.75–0.85: degradation is hard to spot in most photographs

  • Below 0.6: banding appears in smooth gradients such as sky or skin


  • The right answer varies per image, so compare visually at the actual display size.

    5. Compression and privacy


    Phone photos carry EXIF metadata: capture time, device model, and — depending on settings — GPS coordinates. Uploading a photo taken at home can disclose your location.

    Compressors that redraw the image through a canvas generally drop EXIF. Behaviour differs between tools, so verify the output file's properties when it matters.

    6. The web performance angle


    The largest image on a page is usually the LCP element, which means image weight is perceived load time.

  • Prepare at most twice the displayed size for high-density screens.

  • Add loading="lazy" to images below the fold.

  • Set width and height to prevent layout shift (CLS).


  • 7. Tool


    The EVEDAYS Image Compressor compresses and converts between PNG, JPG, and WebP inside the browser. With no upload step, the file is never exposed in transit — though this does not protect against malware already on your device.

    8. Sources


  • web.dev — Optimize images

  • MDN — Image file type and format guide
  • EVEDAYS Editorial Team