Most slow websites are not slow because the HTML is large. They are slow because someone uploaded a 5 MB hero photo where a 300 KB image would have looked identical. Modern cameras create files for printing, cropping and archiving. Websites need files that match the visitor's screen. Those are different jobs.
A good image optimization workflow answers three questions before upload: how large will this image appear on the page, what format fits the content, and how much compression can it take before a real visitor notices. If you answer those three questions consistently, page weight drops quickly without redesigning the site.
Match pixels to the layout
For a full-width hero on a modern desktop layout, 1600 to 2000 pixels wide is usually enough. For blog images inside a content column, 900 to 1200 pixels wide is often plenty. For thumbnails, cards and related-post images, 400 to 800 pixels is usually enough. Uploading a 4000-pixel image for a 360-pixel card just wastes bandwidth.
High-DPI screens complicate this slightly. A card that displays at 400 CSS pixels may benefit from an 800-pixel source image for sharpness. But that still does not justify a 4000-pixel upload. Think in terms of display size plus a sensible retina buffer, not the largest file your camera produced.
Choose format by content
Use JPG or WebP for photographs, gradients and product shots. Use PNG for logos, UI screenshots and images with transparency. Use WebP when your CMS and audience support it, because it often delivers smaller files at similar quality. Keep PNG only when its strengths matter; otherwise it can become the heaviest option on the page.
Compression is where the biggest savings usually appear. Photos can often be exported at quality 75 to 85 with little visible difference. UI screenshots need more care because text edges reveal artifacts quickly. Always inspect the final image at the size it will appear on the page, not zoomed to 300 percent in an editor.