Images are the heaviest part of every web page. Getting them right is the difference between a site that loads in 1 second and one that loads in 6. Here's a real workflow that the fastest sites use.
Don't serve a 4000px hero image at 1200px wide. Figure out the actual maximum width each image will be displayed at, and resize to that before doing anything else. This alone cuts file size by 60-90%.
Don't blindly "compress everything at 80%." A product photo needs higher quality than a background texture. Use our compressor's before/after view to decide per image — some can go down to 60% with no visible loss, others need 90%.
Use the <picture> element: serve WebP or AVIF to modern browsers, JPG/PNG to Safari and older browsers. This is the setup that gets you Lighthouse scores in the 90s.