Is WebP safe to use now?

Yes. Every current browser supports it, including Safari since 2020. For older clients, a element with a JPEG fallback covers the remaining edge cases.

Why does my screenshot look blurry?

It was almost certainly saved as JPEG. JPEG's compression is designed for photographic detail and smears the sharp edges of text. Use PNG or lossless WebP for anything containing text or UI.

Can I make a small image bigger without quality loss?

No. The detail was never captured, so upscaling interpolates and softens. AI upscalers invent plausible detail, which is convincing but not recovery — always start from the largest original you have.

What quality setting should I use for JPEG?

Around 80 for web photography. Above 90 the file grows sharply for differences almost nobody sees; below 60 artefacts become obvious in smooth areas.

Does resizing an image remove its GPS location?

Usually yes — re-encoding typically drops EXIF metadata, including coordinates. That's a privacy benefit, but verify it rather than assuming, especially with tools that preserve metadata deliberately.

Image formats and compression for the web

Web8 min readPublished 17 September 2026

Images are usually the largest thing on a web page by a wide margin — routinely more bytes than the HTML, CSS, JavaScript and fonts combined. They are also the easiest thing to fix, because most oversized images are oversized for one of three specific and avoidable reasons.

This guide covers choosing a format, the resize-before-compress order that does most of the work, and the settings where extra effort stops paying off.

Pick the format by what the image contains

Format choice isn't a matter of taste — each one is built around assumptions about its content, and using the wrong one produces a file that is both larger and worse.

JPEG discards detail the eye is poor at noticing, which works beautifully for photographs and badly for sharp edges. That's why a screenshot saved as JPEG gets fuzzy halos around text and ends up larger than the PNG would have been. PNG stores exact pixels losslessly, which is right for screenshots, logos and line art and catastrophic for a photograph.

Content	Use	Not	Why
Photograph	WebP or AVIF, else JPEG	PNG	Lossless storage of noise is enormously wasteful
Screenshot with text	PNG or WebP lossless	JPEG	JPEG smears sharp edges and text
Logo or icon	SVG, else PNG	JPEG	Vector scales perfectly at any size
Image needing transparency	WebP, PNG, AVIF	JPEG	JPEG has no alpha channel
Animation	WebP or video	GIF	GIF is enormous by modern standards

WebP is the sensible default across the board — it does both lossy and lossless, supports transparency and animation, and is supported by every current browser.

Resize first — it does most of the work

The single most common cause of a slow page is an image served at far larger dimensions than it's displayed at. A 4000×3000 photo from a phone, dropped into a slot 800 pixels wide, is carrying about twenty-four times more pixel data than the page can use. No quality setting recovers that; only resizing does.

The rule: export at the maximum size the image will actually be displayed, multiplied by two for high-density screens — and no more. An 800px-wide slot wants a 1600px image. Going to 3200px is invisible to every user and costs them four times the bytes.

Do the resize before the compression. Compressing a huge image and then scaling it down in the browser wastes the compression entirely; the browser still had to download all of it.

Where quality settings stop paying

JPEG and WebP quality settings are not linear. Between 100 and 85 the file shrinks dramatically with almost no visible difference. Between 85 and 75 it shrinks further with differences most people won't spot. Below about 60, artefacts become obvious in skies, skin and any smooth gradient.

Quality 80 is the usual sweet spot for photography on the web. Going from 95 to 80 often halves the file; going from 80 to 70 saves perhaps 15% and starts costing you visibly. The effort is better spent on dimensions.

Check results at full size, not in a thumbnail — compression artefacts are invisible when scaled down and obvious when a user zooms.
Smooth gradients — skies, sunsets, studio backdrops — show artefacts first. Test on your worst-case image, not your best.
Never re-save a JPEG repeatedly. Each save re-applies lossy compression and the degradation accumulates. Always export fresh from the original.
Photographs with heavy grain or noise compress badly. Slight noise reduction before export can meaningfully shrink the file.

Things that aren't about the file itself

Always set width and height attributes in your HTML. Without them the browser doesn't know how much space to reserve, and the page jumps as images load — a real ranking factor through Cumulative Layout Shift.
Use loading="lazy" on images below the fold so they aren't fetched until needed. Never put it on your main above-the-fold image, which should load as early as possible.
Serve different sizes to different screens with srcset. Sending a desktop-sized image to a phone wastes most of the bytes and the user's data allowance.
Write real alt text. It's what screen readers announce and what search engines read, and 'image1.jpg' serves neither.
Strip EXIF metadata before publishing. Photos from phones frequently carry GPS coordinates of where they were taken.

When inlining an image makes sense

An image can be embedded directly into HTML or CSS as a Base64 data URI, which removes one network request at the cost of roughly 33% more bytes and the loss of separate caching.

That trade is worth it for very small assets — an icon under a couple of kilobytes, a tiny background pattern — where the request overhead exceeds the size penalty. It is a poor trade for anything larger, and a bad one for an image used across many pages, since each page then carries its own uncacheable copy. For SVG icons, pasting the markup directly is better than Base64: smaller, and styleable with CSS.

Frequently asked questions

Is WebP safe to use now?: Yes. Every current browser supports it, including Safari since 2020. For older clients, a <picture> element with a JPEG fallback covers the remaining edge cases.
Why does my screenshot look blurry?: It was almost certainly saved as JPEG. JPEG's compression is designed for photographic detail and smears the sharp edges of text. Use PNG or lossless WebP for anything containing text or UI.
Can I make a small image bigger without quality loss?: No. The detail was never captured, so upscaling interpolates and softens. AI upscalers invent plausible detail, which is convincing but not recovery — always start from the largest original you have.
What quality setting should I use for JPEG?: Around 80 for web photography. Above 90 the file grows sharply for differences almost nobody sees; below 60 artefacts become obvious in smooth areas.
Does resizing an image remove its GPS location?: Usually yes — re-encoding typically drops EXIF metadata, including coordinates. That's a privacy benefit, but verify it rather than assuming, especially with tools that preserve metadata deliberately.