Skip to main content

Web Optimization Techniques

The smallest file that still looks great

In This Lesson

Why Web Optimization Matters

On the web, file size is speed. Every kilobyte is time a visitor waits, bandwidth they spend, and — for search and mobile users — a real cost. An unoptimized 6 MB camera JPEG dropped onto a page can be replaced by a 200 KB version that looks identical on screen. Optimization is the discipline of finding the smallest file that still looks great at the size it's actually displayed.

🎨 An Analogy

Serving a full-resolution master on a web page is mailing a wall-sized poster to show someone a postcard. Send the postcard — it's all the screen can display anyway.

Right Dimensions First

The biggest saving is dimensional, not compression. Resize to the pixels the page actually shows before anything else — a photo displayed at 800 px wide has no reason to be 6000 px:

  • Full-width hero: ~1600–2048 px is plenty for most screens.
  • In-article image: ~800–1200 px.
  • Thumbnail: 200–400 px.

💡 Resize Beats Compress

Halving an image's dimensions removes about three-quarters of its pixels — a far bigger file saving than any quality slider, with no visible loss when it's shown at the smaller size. Size it right (Thursday's batch resize) first, then compress.

Formats for the Web

ContentFormatWhy
PhotographsJPEG (or WebP)Small files for continuous-tone images
Logos, flat graphics, transparencyPNG (or WebP)Lossless edges, alpha channel
Either, modern browsersWebP25–35% smaller than JPEG/PNG at similar quality

WebP is the modern default when your audience's browsers support it — which today is nearly all of them — giving noticeably smaller files at the same visual quality.

Smart Compression

With dimensions handled, tune compression. In GIMP's JPEG export, use the preview to push quality as low as you can before artifacts appear — usually landing around 75–85% for web. For PNG, GIMP's export offers a compression level (lossless — safe to max it) and, for flat graphics, you can reduce the color count to shrink the file further.

flowchart LR A[Full-size master] --> B[Resize to display dimensions] B --> C[Pick web format: JPEG or WebP] C --> D[Compress with preview: 75-85 percent] D --> E[Strip metadata, sRGB] E --> F[Small, fast web image]

The web-export pipeline: resize, choose format, compress, strip, ship.

Strip Metadata, Use sRGB

  • Strip metadata — uncheck EXIF/XMP on export. It trims kilobytes and, per Tuesday's lesson, protects your privacy (no GPS on public images).
  • Convert to sRGB — browsers assume sRGB. Images in a wider space (Adobe RGB, ProPhoto) look dull or wrong online. Use Image → Color Management → Convert to Color Profile and pick sRGB before exporting.

⚠️ Wrong Color Space Looks Washed Out

The classic "my colors look flat on the web" bug is an Adobe RGB image shown as if it were sRGB. Always deliver web images in sRGB so they display as you intended everywhere.

Retina and Responsive

High-density ("Retina") screens pack extra pixels, so an image can look soft if delivered at exactly its display size. A common approach is exporting at 2× the display dimension for crispness, or providing multiple sizes so the page can pick the right one for each device. Balance sharpness against file size — a 2× image is larger, so still resize and compress sensibly rather than shipping the full master.

🎓 Optimize the Whole Set at Once

Web-ready output is a perfect batch job: take a folder of masters and, in one BIMP run, resize to display size, convert to WebP/JPEG, strip metadata, and export. Consistent, fast, and done in seconds.

Practice Activities

  1. Right-size it. Take a 6000 px photo, resize to 1200 px, and compare file sizes before and after.
  2. Compress smart. Export it as JPEG using the preview to find the lowest quality that still looks clean.
  3. Ship it right. Convert to sRGB, strip metadata, and (if supported) export a WebP to compare against the JPEG.

Summary

✅ Key Takeaways

  • Web optimization finds the smallest file that still looks great at display size.
  • Resize to display dimensions first — it saves more than any quality slider.
  • Use JPEG/WebP for photos, PNG/WebP for graphics; WebP is the modern default.
  • Compress with the preview (≈75–85% JPEG), strip metadata, and convert to sRGB.
  • Consider 2× for Retina, and batch the whole set for consistent, fast output.

➡️ What's Next

The other destination: Print Preparation Basics.

Additional Resources