Resizing Images for the Web - Updated 2025

Plain-English 2025 Guide

If your pages feel slow or your pictures look fuzzy or stretched, your images are probably too big or the wrong type. Good news: a few simple tweaks can make your site load faster and look sharper.

The super-short answer (what to use)

Photos (people, places, products): AVIF first. If that’s not available, WebP. (Old fallback: JPEG.)
Logos & icons (simple shapes): SVG (stays crisp at any size).
Pictures that need a clear background (badges/overlays): WebP or PNG.
Animations (short loops): WebP (animated) or APNG (better than GIF).
Formats to skip for websites right now: HEIC/HEIF, JPEG XL (not well supported in most browsers).

If that list feels like alphabet soup, don’t stress—just remember: Photos = AVIF/WebP. Logos = SVG.

How big should my images be?

Regular page images: up to 1200–1600px wide (that covers most screens).
Big banner/hero images: up to 1920–2560px wide.
Logos & icons (SVG): no size worries—SVG scales cleanly.

Rule of thumb: Bigger than you need = slower pages. Aim for the smallest size that still looks great.

10-minute “better images” routine (any website)

Pick your max sizes

Hero: 1920–2560px.
Normal content: 1200–1600px.

Export in a modern format

Try AVIF. If you can’t, use WebP. (If your tool only does JPEG, that’s okay—it’s just not as small.)

Name files clearly

bellingham-roof-repair-cedar-shake.avif (good) vs IMG_1234.avif (bad).

Upload

Use the right spot in your builder so the site can resize for phones automatically.

That’s it. You just made your pages lighter and faster.

Tip: Only let one tool handle lazy-loading. If you use WP Rocket (provided with our hosting plans) leave lazy-load there and turn it off in any image optimizing plugin.

Two small things that make a big speed difference

Don’t lazy-load the big banner image at the top of your page (that’s the one visitors see first). Everything else can be lazy-loaded.
Always set width and height when you can. It prevents layout “jumping” while the page loads.

(If that sounds technical: we can help and your theme may handle this for you.)

Common mistakes (and easy fixes)

Uploading 8–12MB photos from your phone → Export to AVIF/WebP, max 1920–2560px. You’ll cut size by 70–90%.
Using PNG for photos → Switch to AVIF/WebP (PNG is best for graphics, not photos).
Giant logos → Use SVG so it’s tiny and always sharp.
Animated GIFs → Convert to WebP (animated). Smaller files, better quality.

Quick FAQs

Do I have to learn code?

No. In WordPress, the plugins can help with the heavy lifting.

What if my tool can’t export AVIF?

Use WebP. It’s still a big upgrade over JPEG.

Will this help my Google scores?

Yes—faster images improve the “Largest Contentful Paint” (Google’s way of judging how quickly the main content appears).

Do I need to redo old images?

Start with the pages that matter most (homepage, top services, top blog posts). You can improve the rest over time.

Tiny glossary

Format = the type of image file (AVIF, WebP, JPEG, PNG, SVG).
Hero image = big banner picture at the top of a page.
Lazy-load = don’t download images until the visitor scrolls down to them.
SVG = a file type for simple graphics that stays crisp at any size.

Want us to just handle it?

We can convert your library to AVIF/WebP, swap in SVG logos, and set WordPress to do the smart stuff (right sizes, lazy-load rules, and fast banners). Tell us your theme and hosting, and we’ll set it up.