Guides / Web performance

Images and web performance

Large images are one of the most common reasons pages feel slow. A hero photo straight from a phone or camera might be several thousand pixels wide and several megabytes on disk, far more than most visitors’ screens can display at once. Browsers still download those bytes, decode them, and resize them for layout, which costs time and battery. Shipping the right dimensions and format is a core part of performance and of a good experience on mobile networks.

Match dimensions to layout

Start from the maximum display width your design uses. If content is capped around 800 CSS pixels wide, exporting a 4000-pixel-wide bitmap rarely improves what people see; it mostly inflates file size. MiniMagnify lets you export to explicit widths and heights so your assets align with breakpoints or art direction choices. Combine that with responsive markup on your site (for example srcset in HTML) so smaller viewports receive smaller files when you generate multiple sizes.

Compression and quality

Lossy formats like JPEG, WebP, and AVIF throw away fine detail to shrink files. A slightly lower quality setting often looks identical to humans while saving a large percentage of bytes. PNG is lossless and preserves sharp edges and transparency, but file sizes grow quickly for photos. Use PNG when you need alpha or crisp graphics; prefer modern lossy formats for photographs when browsers in your audience support them.

Modern formats

WebP enjoys broad support in current browsers and usually beats JPEG at similar visual quality. AVIF can be even smaller but is not universally encodable in every browser yet; MiniMagnify exposes AVIF when the visitor’s browser can encode it. Always keep a fallback strategy for older clients if you rely on cutting-edge formats on the server. For your own exports, picking the best format your stack accepts is enough.

Workflow with MiniMagnify

Use the app as a privacy-focused step in your pipeline: crop to the subject, set dimensions that match your layout, tune quality, then upload the result to your CMS or static host. Because resizing happens locally, you can experiment with quality sliders until byte size and clarity meet your budget without repeatedly posting originals to a third-party converter.

For framing and network-specific targets, read Social image sizes and aspect ratios. Open the MiniMagnify editor to apply these ideas to your next export.