Optimise Sketch-exported assets for production: compress PNGs, convert to WebP and AVIF, configure SVGs for inline use, and implement responsive srcset patterns for fast-loading UIs.
Sketch produces correct but unoptimised assets. A 2x PNG exported from Sketch might be 150 KB; after optimisation it can drop to 30 KB with no perceptible quality change. For a page with 20 images that is the difference between 3 MB and 600 KB — a 5x improvement in load time for mobile users.
Sketch PNG exports use lossless compression but not the most aggressive settings. Run exported PNGs through imagemin-pngquant (lossy, typically 60–80% size reduction) or oxipng (lossless, 10–30% reduction) as a post-export step. For JPEG, use imagemin-mozjpeg at quality 80–85. These tools run on the command line or inside Vite and webpack plugins.
1# Lossy PNG compression with pngquant (recommended for photos/illustrations)
2npx imagemin './exported/*.png' \
3 --plugin=imagemin-pngquant \
4 --out-dir=./optimised
5# Typical: 150 KB PNG -> 35 KB
6
7# Lossless compression with oxipng (for icons where every pixel matters)
8npx oxipng --opt 4 --strip all './exported/*.png'WebP provides 25–35% smaller files than PNG at equivalent quality; AVIF provides up to 50% smaller than JPEG. Sketch does not export WebP or AVIF natively — convert via sharp, squoosh CLI, or cwebp after export. Serve modern formats with an HTML picture element so older browsers fall back gracefully.
1<!-- Hero image with modern format fallbacks -->
2<picture>
3 <source srcset="hero.avif" type="image/avif">
4 <source srcset="hero.webp" type="image/webp">
5 <img
6 src="hero.png"
7 alt="Platform dashboard"
8 width="1200" height="800"
9 loading="eager"
10 fetchpriority="high"
11 >
12</picture>
13
14<!-- Below-fold images: lazy load -->
15<picture>
16 <source srcset="card.avif" type="image/avif">
17 <source srcset="card.webp" type="image/webp">
18 <img src="card.png" alt="Course card" width="343" height="220"
19 loading="lazy" decoding="async">
20</picture>Inline SVGs avoid an HTTP request and allow CSS and JS access to the SVG DOM. After exporting from Sketch and running svgo, remove the width and height attributes from the root svg element so CSS controls sizing. Add role="img" and aria-label for accessibility. For icon systems, combine all icons into one SVG sprite file and reference each with use href="#icon-id" — one HTTP request for the entire icon set.
1<!-- Inline SVG icon sized by CSS -->
2<svg role="img" aria-label="Close" viewBox="0 0 24 24" fill="none">
3 <path d="M18 6L6 18M6 6l12 12"
4 stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
5</svg>
6
7<style>
8 /* Controlled entirely by CSS -- no hardcoded width/height on the SVG */
9 .icon { width: 24px; height: 24px; }
10 .icon-lg { width: 32px; height: 32px; }
11</style>Use srcset for photographs and UI screenshots exported at multiple densities so the browser downloads the resolution appropriate for the device. The sizes attribute tells the browser the rendered width at each viewport breakpoint — without it the browser assumes 100vw and may download a needlessly large image.
1<img
2 srcset="
3 dashboard-400.webp 400w,
4 dashboard-800.webp 800w,
5 dashboard-1200.webp 1200w,
6 dashboard-1600.webp 1600w
7 "
8 sizes="
9 (max-width: 640px) 100vw,
10 (max-width: 1024px) 80vw,
11 1200px
12 "
13 src="dashboard-800.webp"
14 alt="Analytics dashboard"
15 width="1200" height="800"
16 loading="eager"
17 fetchpriority="high"
18>Manual optimisation breaks down at scale. Integrate into Vite or Next.js so compression runs automatically on every build.
1// vite.config.ts -- automatic PNG and SVG optimisation
2import { defineConfig } from 'vite';
3import imagemin from 'vite-plugin-imagemin';
4
5export default defineConfig({
6 plugins: [
7 imagemin({
8 pngquant: { quality: [0.65, 0.8], speed: 4 },
9 svgo: {
10 plugins: [
11 { name: 'removeViewBox', active: false },
12 { name: 'removeUnknownsAndDefaults', active: true }
13 ]
14 }
15 })
16 ]
17});
18
19// Next.js: use next/image for automatic WebP conversion + srcset
20import Image from 'next/image';
21<Image src="/hero.png" alt="Hero" width={1200} height={800} priority />
22// Next.js converts to WebP automatically and generates srcsetYour progress is saved in this browser, on this device only.