Large images are one of the most common reasons websites load slowly. A single unoptimized photo from a modern smartphone can be 5–10 MB. Put three of those on a page and you've added 20–30 MB that every visitor has to download before they can see your content. Google's Core Web Vitals score tanks, bounce rate goes up, and conversions go down — all because nobody resized an image.
The fix is compression, and done right it is invisible to the eye. Here is how to do it.
Lossy vs. lossless compression — what's the difference?
Lossless compression removes redundant data without discarding any image information. The file gets smaller, but the pixel data is identical to the original. PNG files use lossless compression by default. This is ideal for logos, screenshots, illustrations, and anything with flat colours or sharp edges.
Lossy compression discards some image data to achieve much smaller file sizes. JPEG is the most common lossy format. At quality settings of 75–85%, the difference is imperceptible to most people, but file sizes shrink by 60–80% compared to the original.
Our free Image Compressor supports both JPEG and PNG, runs entirely in your browser, and never uploads your files to a server.
What quality setting should you use?
For photos on a website or social media, quality 75–80 is the sweet spot. At this range, the human eye cannot detect the compression on a typical screen. At quality 60 or below, you start to see blockiness (called JPEG artifacts) in areas of smooth colour gradients, like skies or skin tones.
For product photos where detail matters — jewellery, textures, technical diagrams — stay at quality 85. For thumbnails and preview images that display at small sizes, quality 65–70 is fine.
What image dimensions should you use?
Compression alone is not enough if your images are the wrong size. A 4000 × 3000 pixel photo displayed at 800 × 600 pixels on screen is still sending four times as many pixels as needed. Always resize to the display dimensions before compressing.
Common sizes to target:
- Hero images / full-width banners: 1920 × 1080 px maximum
- Blog post featured images: 1200 × 630 px (also matches Open Graph social previews)
- Product thumbnails: 600 × 600 px
- Profile photos: 400 × 400 px
Resize first, then compress. This order matters — compressing then resizing adds an extra generation of quality loss.
PNG vs. JPEG — which to choose?
Use JPEG for:
- Photographs and images with many colours and gradients
- Hero images, product shots, article photos
- Anything where file size is a priority over perfect edge crispness
Use PNG for:
- Logos, icons, and illustrations
- Screenshots with text
- Images that need a transparent background (JPEG does not support transparency)
- Anything where edge sharpness matters
There is a third option worth knowing: WebP. It achieves 25–35% smaller files than JPEG at the same visual quality, and it supports transparency like PNG. All major browsers have supported it since 2020. If you're building a web project, WebP is the right choice for photos.
What about SVG?
For logos, icons, and simple vector illustrations, use SVG instead of PNG or JPEG. An SVG file is resolution-independent (it looks sharp at any size), usually under 10 KB, and can be animated with CSS. Our Image Compressor works with raster images (JPEG and PNG) — for SVG optimization, a separate tool like SVGO is the right choice.
The practical workflow for web images
Here is the exact workflow used by performance-focused web developers:
- Export from your design tool at 2× the display size for retina screens (so if the image displays at 800 px wide, export at 1600 px).
- Compress using the Image Compressor — JPEG at quality 80, or PNG with maximum compression.
- Check the result — if the compressed file is still over 200 KB and it's a photo, lower quality by 5 and repeat.
- Add width and height attributes to your
<img>tags in HTML to prevent layout shift while the page loads. - Add
loading="lazy"to images below the fold so the browser doesn't download them until the user scrolls to them.
Following these five steps consistently will cut your page weight by 70–80% and measurably improve your Lighthouse scores.
How much difference does it actually make?
Here is a real example: a homepage hero image exported from Figma at 3200 × 2000 px was 8.4 MB as a PNG. After resizing to 1920 × 1200 and compressing as JPEG at quality 80, it was 187 KB — a 97.8% reduction with no visible difference on screen.
At a typical mobile connection of 10 Mbps, the original took 6.7 seconds to download. The compressed version took 0.15 seconds.
Start compressing your images with our free Image Compressor — it runs in your browser, your files never leave your device, and there's no sign-up required.