How to Optimise Images and SVGs for the Web
A practical guide to image compression, WebP conversion, SVG optimisation, favicon generation, and Base64 embedding — all without sending files to a server.
Images are consistently the largest contributor to page weight on the web. A page that loads in 1.2 seconds with optimised images often loads in 4 or 5 seconds without. For most sites, image optimisation is the single highest-return performance improvement available — and it requires no code changes, only tooling.
This guide covers practical image and SVG optimisation for developers, with browser-based tools that process everything locally without sending your files to a server.
Why WebP should be your default output format
WebP is a modern image format developed by Google that produces significantly smaller files than JPG or PNG at equivalent visual quality. A typical WebP image is 25 to 35 percent smaller than a comparable JPG and 25 to 50 percent smaller than a comparable PNG. WebP supports transparency (like PNG) and lossy compression (like JPG) in a single format.
Browser support for WebP is now effectively universal — all modern browsers on desktop and mobile support it. If you are still defaulting to JPG for photographs and PNG for graphics with transparency, switching to WebP is the simplest optimisation you can make.
The Image Compressor and Converter converts JPG, PNG, GIF, BMP, and SVG files to WebP, JPG, or PNG directly in your browser. Adjust the quality slider, optionally set a maximum dimension to resize during conversion, and see the before/after size comparison. Everything runs via the HTML5 Canvas API — your images never leave your device.
Choosing the right quality setting
The quality slider controls the trade-off between file size and visual fidelity. The right setting depends on the use case:
For hero images and portfolio photography where quality matters most, use 85 to 90 percent. At this range, the visual difference from 100 percent is imperceptible to most viewers, but the file size reduction is significant — typically 40 to 60 percent.
For blog post images, product thumbnails, and general content images, use 75 to 82 percent. This is the sweet spot for most web use — good quality, substantially smaller files.
For preview thumbnails, avatars, and images where detail is less important, use 60 to 72 percent. Files become very small at this range. Check the preview carefully since compression artefacts can appear on sharp edges.
SVG optimisation
SVG files exported from design tools like Illustrator, Sketch, or Figma contain significant amounts of editor-specific metadata that browsers do not need. A typical Illustrator export includes XML declarations, DOCTYPE definitions, Adobe namespace attributes, editor-specific metadata blocks, empty groups, and attributes set to their default values. This overhead can double or triple the file size compared to a clean SVG.
The SVG Optimizer removes this overhead with configurable options. You can strip comments, metadata blocks, editor namespaces, empty groups, default attribute values, and the XML declaration. Minifying whitespace collapses the file to a single line for the smallest possible output. Decimal rounding reduces float precision from six digits to two. For a typical Illustrator export, savings of 40 to 70 percent are common without any visual change.
The tool includes a side-by-side preview so you can confirm the optimised SVG renders identically to the original before downloading.
Favicons
A favicon is the small icon that appears in browser tabs, bookmarks, and search results. Getting favicons right used to require generating a dozen different sizes manually. The Favicon Generator takes a single image and produces all the sizes you need — 16x16, 32x32, 48x48, 180x180 for Apple touch icon, and the manifest icons for Android PWAs. It also generates the HTML <link> tags to paste into your document head.
Embedding images as Base64
For small images like icons and logos that appear on every page, embedding them as Base64 data URIs eliminates an HTTP request. The trade-off is that Base64 increases file size by about 33 percent, so this technique is only worthwhile for very small images — typically under 2 to 3 KB.
The Image to Base64 tool converts any image to a data URI, CSS background-image rule, or HTML img tag with one click. It shows the original and encoded sizes so you can decide whether embedding is worth it for a particular image.
A practical workflow
For new images going into a project: convert to WebP at 80 percent quality, set a maximum dimension appropriate to the display size (there is no reason a 400px wide thumbnail should be a 2400px image), check the before/after preview, and download. For SVGs from a designer: run through the SVG Optimizer with all options enabled, check the preview matches, then download the optimised file.
Tools
- Image Compressor & Converter — compress and convert to WebP, JPG, or PNG in your browser
- SVG Optimizer — strip editor metadata and minify SVG files with side-by-side preview
- Favicon Generator — generate all favicon sizes from a single source image
- Image to Base64 — convert images to data URIs for CSS and HTML embedding