Published 2026-07-22
Understand the difference between image dimensions (pixels) and file weight (KB/MB). Learn when to resize, when to compress, and how formats affect page speed.
Two different numbers
Pixel dimensions describe width × height (visual resolution). File size describes bytes on disk (download weight). A 4000×3000 image can be 8 MB as a PNG or 400 KB as a compressed JPEG at the same pixel count.
Page speed tools care about bytes transferred and decode time. Shrinking dimensions reduces both pixel count and often file size; compression reduces bytes without changing displayed size.
Resize first for oversized photos
Camera and screenshot exports are often wider than any screen that will display them. Resizing to the maximum display width (plus retina multiplier) removes wasted pixels before compression even starts.
Example: a hero displayed at 1200 CSS pixels on retina needs roughly 2400px source width, not 6000px. Image Resizer drops excess pixels quickly in the browser.
Compress for format and quality
JPEG and WebP use lossy compression - quality sliders trade visual fidelity for KB. PNG is lossless and heavy for photos but good for flat UI and transparency. GIF is rarely the right choice for photos.
Image Compressor on FindMeTool previews savings side by side so you can stop before banding appears in skies or skin tones.
Format choice matters
WebP and AVIF often beat JPEG at similar visual quality. Legacy email clients may still want JPEG. PNG with transparency should stay PNG unless you flatten to a solid background.
Image Format Converter helps when your CMS only accepts JPG but your design export is PNG - convert, then compress.
Measure in the field
Use browser devtools Network tab to see transferred KB. Lighthouse flags oversized images relative to displayed size. Fix the worst offender first: usually the largest above-the-fold photo.
Combine resize + compress + modern format for the biggest wins without visible quality loss on typical laptop screens.
Auditing your site
Sort the Network tab by transferred size during a cold load - images usually dominate. Fix the top three assets before tweaking JavaScript bundles.
Compare intrinsic image dimensions (in file metadata) to rendered size in devtools. If intrinsic is 4× rendered, you are shipping waste.
Document target max widths in your design system so writers and marketers know what to export before uploading to the CMS.
Retest on a real phone over LTE - not just desktop Wi-Fi - because image bytes hurt most on slow connections.
Summary
Think in two steps: right-size pixels for how the image displays, then squeeze bytes with format and quality choices.
Lighthouse and real devices tell you whether the next optimization dollar is worth spending.
Hero images deserve the most attention because they load first and shape first impressions of speed.
Related tools
More guides
Browse the full Learn hub or open a related tool above to try the workflow in your browser.