Images & performance
Choosing between JPEG, PNG, WebP and AVIF, compressing files without visible quality loss, and the effect image weight has on Core Web Vitals and search rankings.
Images are usually the heaviest thing a web page loads and the most common reason it feels slow. They are also the easiest thing to fix, because most of the waste comes from two decisions made in a moment — exporting at camera resolution, and picking a format that does not match the content.
These guides explain the reasoning rather than handing you a preset. Why each format is built around an assumption about your image, and what happens when the assumption is wrong. Why compressing a PNG sometimes makes it larger. Why resizing does more for file size than the quality slider ever will. What Largest Contentful Paint actually measures, and which image decisions move it.
Where we make a claim about compression ratios or browser support, we link to the study or the compatibility data behind it.
Email has different rules from the web: hard attachment limits, encoding overhead that inflates every file by a third, and clients that cannot open WebP. Here is how to get photographs small enough to send while still looking right.
Images are the single largest lever on LCP and a common cause of layout shift. Here is what each Core Web Vital measures, the thresholds Google uses, and exactly which image decisions move which metric.
The quality slider is the third most important decision, not the first. Work through dimensions, format and quality in that order and you can routinely cut image weight by 80% with no visible difference.
The difference between these formats is not quality — it is what each one assumes about your image. Understand the assumption and the choice becomes obvious, including why compressing a PNG sometimes makes it bigger.