Prepare photos for a website: size, format, weight
Updated October 29, 2026
A photo straight from a camera is 5 MB and 6000 pixels wide; a photo on a page is 1 to 2 million pixels at most and should weigh 100 to 300 KB. Everything between those two numbers is page speed you are giving away.
Three decisions cover it: the pixel size, the format and the quality. Here are the numbers that work in 2026, and the tools that apply them in the browser.
Size: export for the largest place it will be shown
A full-width hero on a desktop is 1600 to 1920 pixels wide; a blog image 1200; a product thumbnail 600; an avatar 256. Double those only for images that are shown small but zoomed. Resize to the longest side with the resize tool; it keeps the proportions and never upscales.
Two sizes per image (large and small) with the srcset attribute is the usual production setup; the resize tool can produce both from one drop.
Format: WebP by default, AVIF for the biggest wins, JPG when in doubt
WebP is supported everywhere and is 25 to 35 percent smaller than JPG at the same look. AVIF goes further (often half of JPG) and is supported by all current browsers; it encodes slowly, which does not matter for a few photos. PNG is for graphics with sharp edges or transparency, never for photos.
The convert image tool switches between all of them; the compress tool can do resize, convert and quality in one pass.
Quality: 75 to 82
Quality 80 on JPG or WebP is the point where further quality is invisible on a screen and the file keeps shrinking below it. Go to 70 for backgrounds and thumbnails. Use the target-size setting when a platform imposes a limit (200 KB is common for marketplaces).
Tips
- Strip EXIF unless you need it: a camera's metadata can be 50 KB and includes the location.
- Use the before/after slider in the compress tool to judge, at 100 percent zoom.
- Keep the originals; export again from them when the design changes.
Questions
- Should I use AVIF in 2026?
- Yes for photo-heavy pages; every current browser decodes it. Provide a WebP or JPG fallback only if you still support very old browsers.
- Does resizing lose quality?
- Downscaling removes pixels you cannot show anyway. The resampling used here (Lanczos) keeps edges crisp.
- What about HEIC from iPhones?
- Convert it to JPG or WebP first; browsers do not display HEIC on web pages.