Image Optimization
What image optimization is, how it affects web performance, and mistakes to avoid.
Image optimization reduces the bytes needed to deliver an image while keeping the quality the use case needs. It combines several steps: picking a suitable format, resizing to the displayed size, compressing, removing unneeded metadata and loading images only when needed.
On the web, optimization also covers delivery. Responsive image markup (the srcset and sizes attributes) lets the browser pick a file that fits the screen. Lazy loading defers off-screen images, and a CDN serves files from a nearby location.
The result is measured in file size and in page speed metrics such as Largest Contentful Paint, one of Google's Core Web Vitals.
Convert image formats
A format change often gives the largest saving. Image Converter converts between PNG, JPG and WebP in the browser.
Why optimization matters
Images are often the largest part of a web page. Oversized images slow loading on mobile networks, use visitors' data and can lower page speed scores. Smaller files also make documentation repositories, email attachments and PDF exports easier to handle.
Optimization techniques
- Resize to the largest displayed size, for example 2× the CSS width for high-density screens.
- Pick the format by content: PNG for flat UI, JPG or WebP for photos.
- Set a lossy quality around 75-85 and compare zoomed crops.
- Strip metadata that is not needed, but keep the color profile when color matters.
- Lazy-load images below the fold.
Optimization for screenshots
A Retina screenshot of a 1440 pixel wide window is 2880 pixels wide. If a docs page shows it at 720 CSS pixels, a 1440 pixel file covers 2× screens and is a quarter of the pixel count.
In Temposhot, choose JPG Export (Adjustable Quality) with a quality from 1 to 100 (default 85) for sharing, and keep PNG Export (Lossless) for masters. Website Capture saves JPEG, PNG or WebP directly.
Common mistakes
- Uploading full Retina captures for small thumbnails.
- Compressing text screenshots so hard that letters smear.
- Converting everything to one format regardless of content.
- Optimizing the only copy and losing the original.
Have an image to fix right now?
Reduce file size with Image Compressor, and check the pixel size first with Screenshot Resolution Checker.
Common questions
Should I use WebP for screenshots on my site?
WebP usually gives smaller files than PNG or JPG at similar quality and is supported by current browsers.
How large should a docs screenshot be?
About twice its displayed CSS width covers high-density screens without wasting bytes.
Sources
Related resources
- Export formats: PNG, JPG and WebP options.
- Lazy loading: deferring off-screen images.
Taking the same screenshots again and again?
Temposhot captures a screen, window or area on a timer and exports the set as a PDF, images, ZIP or MP4. The free browser tools fix single images.
Related resources
Related terms
- Image CompressionWhat image compression is, lossy vs lossless explained, and common mistakes when compressing screenshots.
- Image ResizeWhat image resizing is, how it differs from cropping, and mistakes to avoid when scaling screenshots.
- Lazy LoadingHow lazy loading works, why it affects screenshot capture, and techniques for detecting and handling lazy-loaded content.
- Image FormatOverview of common image formats — PNG, JPG, WebP, AVIF — and when to use each.
- Lossless CompressionWhat lossless compression is, which image formats support it, and when pixel-perfect preservation matters.