Images for websites: smaller, with care

A useful image should be as sharp as it needs to be and as light as practical. Here is a straightforward workflow.

Measure the space it will occupy

Before exporting, decide where the image will appear: a wide cover, a product card or a thumbnail. An oversized source displayed in a small box can transfer unnecessary data. Exporting too small can look blurry on high-density screens. Suitable dimensions depend on the layout and the audience’s devices.

Prepare multiple versions when needed

A responsive website can serve different images for different screens. PixelSvelto exports individual files: for example, create an 800 px version and a 1600 px version, then let your website choose the appropriate resource. Simply uploading a WebP file does not configure responsive images automatically.

Compare actual content

Try WebP and JPG at a moderate quality setting. Open the result and inspect gradients, edges and lettering at the intended display size. For logos and transparent graphics, consider PNG or WebP. Do not select only by the highest compression percentage: the smallest file is not always the best fit.

Filename, description and context

A filename such as “green-backpack-front.webp” is easier to understand than a random string. On the website, add alternative text when it helps communicate the image’s meaning. Alternative text belongs to the HTML page: this tool does not embed it into the file. Decorative images do not need unnecessary descriptions.

Keep the originals before replacing production images. Check the new versions on both a phone and a computer.

File size alone cannot promise speed

Lighter images can reduce transferred bytes, but page speed also depends on the network, server, scripts and layout. Real improvements need measurements on the actual website. PixelSvelto reports file dimensions and size; it does not measure your page’s performance or guarantee search ranking results.

An image that needs work?
Your little studio is ready.

Open the tools ↗