What is image optimization?
Image optimization is everything that happens to a picture between the retoucher's final export and the moment it appears on a visitor's screen. That includes choosing the right format (JPEG for photographs, PNG for flat graphics with transparency, SVG for logos and icons, WebP or AVIF for almost everything on a modern site), compressing to the smallest file that still looks right, resizing so that a phone is not downloading a billboard, lazy-loading pictures below the fold, serving them from a content delivery network, and giving each one a descriptive filename and alt text.
It is both a performance discipline and a search one. The file work makes pages fast; the naming and alt text make the images findable, in image search and in the accessibility tools that read pages aloud.
Why it matters
Why image optimization matters
Because images are usually the heaviest thing on a page. On most sites they account for more than half of the bytes a visitor downloads, and the largest image above the fold is very often the element that decides the Largest Contentful Paint score, one of Google's Core Web Vitals. A page that is slow because of its pictures ranks lower, converts worse and costs more to serve.
For a fashion house, a beauty brand or anyone whose site is mostly photography, the stakes are higher and the trade-off is real. The pictures are the product, and optimization that leaves them soft or banded is a failure. The job is to find the point where the file is as small as it can be and the image still looks the way the photographer intended.
In practice
How image optimization works in practice
- 01
Set the pipeline once. Masters are kept at full resolution; the site generates the sizes it needs from them automatically, in modern formats with JPEG fallbacks, and the markup uses srcset so each device gets the size that fits its screen. Compression is tuned by eye on real images from the brand, not by a default slider, and hero images are checked on a phone over a slow connection. Below-the-fold images lazy-load; the hero never does, because it needs to be first.
- 02
Then the metadata. Filenames say what the image is in plain words. Alt text describes the picture for someone who cannot see it, which is also what search engines read. Width and height attributes are set so the layout does not shift as pictures arrive. And an image sitemap, where the site is large, tells Google which images matter.
Watch out
What people get wrong about image optimization
Compressing by number. A quality setting of 60 looks fine on a product on white and terrible on a dusk sky, so the setting has to be judged on the images the brand actually uses. The other mistake is uploading the export straight from the retoucher, so a 6000-pixel file is squeezed into a 400-pixel column and every visitor pays for the difference. The third is lazy-loading the hero image, which delays the one picture the page is measured on. And a common fourth: alt text stuffed with keywords instead of a description, which helps nobody and reads as spam.
