What size should images be for a website?
Match the image to the space it occupies on the page, then double it for retina screens: a 600px-wide slot wants a 1200px image. Serve it as WebP, keep most images under 200 KB, and keep the hero image under 500 KB. Anything larger is bandwidth spent on pixels nobody can see.
The doubling rule, and where it stops
A retina display packs roughly twice the physical pixels into the same space, so an image shown at 600 CSS pixels needs 1200 real pixels to look sharp. Below that it looks soft on any modern phone or laptop.
Doubling again does nothing. A 2400px image in a 600px slot is four times the bytes of the 1200px one and indistinguishable from it, because the screen has nowhere to put the extra detail.
Sizes worth memorising
Full-width hero: 1920px wide, under 500 KB. Blog body image: 1200px, under 200 KB. Card or thumbnail: 600–800px, under 100 KB. Avatar: 256px square. Logo in a header: twice its displayed height, as WebP or SVG.
Open Graph share cards are fixed at 1200×630. Anything else gets cropped unpredictably by whichever platform renders it.
Why this is a ranking issue, not just a speed one
Largest Contentful Paint measures when the biggest element finishes rendering, and on most pages that element is an image. It is a Core Web Vital, so an oversized hero image directly costs you on a signal Google actually uses.
Resize first, then compress. Compressing before resizing spends effort on pixels you are about to throw away.