Skip to the tool
OnPageKit

Images & performance

Compress images and convert them to WebP without uploading them, build every favicon file a site needs, and measure the DOM size that slows a page.

Images are usually the heaviest thing on a page, and the largest one above the fold is often the element that sets Largest Contentful Paint. The tools in this group cut that weight before it reaches your server, and they do it in your browser: files are decoded and re-encoded locally, so unreleased product shots and client photography never pass through somebody else's upload endpoint.

The image compressor re-encodes at a quality you choose and tells you when the result is no smaller than the original. The right setting depends on the picture: around 80 is a sound start for photographs, while a screenshot full of text shows artefacts much sooner. The WebP converter batch-converts images to WebP, usually a quarter to a third smaller than a JPEG of similar appearance and supported by every current browser; lossless WebP is the natural replacement for PNG graphics. Resize before you compress: a 4,000-pixel image displayed at 800 pixels wastes more bytes than any quality setting can recover, and srcset lets each screen download the size it needs.

The favicon generator builds the small set of files a site actually needs from one source image — a favicon.ico for tabs, bookmarks and the bots that request it from the root, a 180-pixel Apple touch icon with an opaque background, and the 192 and 512-pixel PNGs declared in the web manifest — and writes the tags that reference them. Google shows the favicon beside mobile results, so a missing one leaves the site with a generic globe in search.

The DOM size checker counts elements, nesting depth and inline bytes in pasted page source. Lighthouse starts warning at around 800 elements and fails the audit at 1,500, and a large DOM makes every style recalculation and layout more expensive, which shows up as sluggish interaction on mid-range phones. The usual causes are page builders that wrap each block in several layers of div, menus rendered in full on every page, and long lists that could be paginated.