I'm trying to optimize images for mobile without making them look compressed, any advice?

Absolutely — the key is to reduce file size without sacrificing perceived quality. For mobile, users mostly care about fast loading and clarity on small screens, so you can usually get a lot of savings without visible degradation.

Practical tips

1) Use the right format

• JPEG: Best for photos and complex gradients.
• WebP: Usually smaller than JPEG/PNG with similar quality; great default for the web.
• AVIF: Often even smaller than WebP, but check browser support and encoding speed.
• PNG: Use only when you need transparency or crisp line art; it’s usually larger.
• SVG: Best for logos, icons, and simple illustrations.

2) Resize to the display size

A common mistake is uploading huge images and shrinking them with CSS.

• If an image displays at 400px wide, don’t ship a 2000px version unless needed for retina.
• Create multiple sizes for responsive delivery.

3) Use responsive images

Serve different image sizes based on the device:

• srcset / sizes in HTML
• responsive image components in frameworks

This lets mobile devices download smaller versions automatically.

4) Compress carefully

• Use lossy compression for photos; it usually gives the best size savings.
• Aim for a quality level where artifacts are not noticeable on mobile screens.
• For JPEG, quality around 70–85 is often a good starting point.
• For WebP/AVIF, you can often go lower while keeping good visual quality.

5) Strip unnecessary metadata

Remove:

• EXIF data
• camera info
• GPS coordinates
• color profiles if not needed

This can reduce size a bit with no visible impact.

6) Use modern delivery techniques

• Serve images through a CDN
• Enable lazy loading for below-the-fold images
• Cache aggressively when images don’t change often

7) Be careful with transparency

Transparent backgrounds usually cost more:

• If transparency isn’t needed, flatten the background.
• For icons, SVG is often better than PNG.

8) Check on real devices

An image that looks fine on desktop may show artifacts on a phone screen, especially with:

• text inside images
• faces
• subtle gradients
• screenshots

Always test on an actual mobile screen if possible.

Good workflow

1. Export original image at the correct dimensions
2. Convert to WebP or AVIF if supported
3. Create multiple sizes for responsive use
4. Compare visual quality on mobile
5. Choose the smallest version that still looks clean

If you want, I can also give you:

• a recommended compression setting guide
• an example of responsive image HTML
• or a workflow for Photoshop/Figma/ImageMagick