Image tools for web design and development

Images are usually the heaviest part of a web page. These tools cover the everyday jobs of getting them small, correctly sized and in the right format.

Modern formats

Serving WebP or AVIF instead of JPG and PNG is one of the easiest ways to cut page weight.

JPG to WebPPhotos 25 to 35 percent smaller at the same look, supported by every current browser.
JPG to AVIFSmaller again for hero images and galleries, if you can live with slower encoding.
PNG to WebPTransparent product shots and illustrations at a fraction of PNG size.
JPG to JPEG XLTry JPEG XL for high-quality photography where the audience’s browsers support it.

Sizing and weight

A 4000-pixel photo in a 800-pixel column wastes most of its bytes.

Resize imageMake the widths you list in srcset, in one batch.
Compress imageSee the before-and-after size of every file and keep the originals when re-encoding would make them bigger.
Remove EXIF dataStrip camera data losslessly. It is dead weight on a web page and can reveal where a photo was taken.
Compress to a file sizeSet a byte budget per image, such as 150 KB, and let the tool find the quality.

Icons and small assets

The bits every site needs and nobody enjoys making.

Favicon generatorThe full favicon set, a web manifest, and the HTML to paste into your head.
Image to Base64Inline a tiny icon or placeholder as a data URI, with the size overhead shown.
SVG to PNGPNG fallbacks and social preview images from SVG artwork.

Social previews

Link previews on social platforms and chat apps use an Open Graph image, usually 1200 × 630 pixels.

Crop imageCrop to the 1.91:1 shape by typing 1200 and 630 into the size boxes.
Compress JPEGKeep the preview image light; some platforms time out on heavy ones.

What matters for page speed

The Largest Contentful Paint on most pages is an image, often the hero. Three things help it most, in order: serve it at the size it is displayed (with a 2× version for high-density screens), use a modern format, and do not lazy-load it, since it is visible immediately. Everything below the fold should have loading="lazy" and explicit width and height attributes to prevent layout shift.

A sensible default stack for photos is AVIF with a WebP or JPG fallback in a <picture> element. For icons and logos, inline SVG beats any raster format.

For format trade-offs in more depth, see choosing between JPG, PNG, WebP and AVIF.

Questions people ask

Should I use WebP or AVIF?

AVIF is usually smaller; WebP encodes faster and has a longer support history. Many sites serve AVIF with WebP as the fallback.

What size should website images be?

The largest size they are displayed at, doubled for high-density screens. A full-width hero is typically 1920 to 2400 px wide.

Is Base64 inlining good for performance?

Only for very small images. It adds about a third to the size and cannot be cached separately.