Compress Images for Website Performance

Images are usually the heaviest part of a web page. Upload a 5 MB, 4000-pixel photo into a layout that shows it at 1200 pixels, and every visitor downloads the full thing for nothing. On mobile data, they feel it.

Speed shows up in Core Web Vitals, the page experience measures Google reports on. The one images affect most is Largest Contentful Paint (LCP): how long the biggest visible element, often a hero image, takes to appear. A lighter hero image is one of the most direct ways to improve it, and faster pages tend to keep visitors around longer.

It helps behind the scenes too. Your CMS uploads go quicker, your media library takes less space, and backups shrink. For most content images, compressing to 200KB is a good starting point, while thumbnails can usually go down to 50KB or less.

WebP is the default because it's typically a lot smaller than JPG at the same visual quality, and every modern browser supports it. Switch to JPG only if your platform or theme won't accept WebP uploads. PNG is best kept for logos and icons with transparency.

Width matters as much as file size. A file's weight depends heavily on how many pixels it has, so capping the width does a lot of the work before quality even comes into it. The max-width option offers 800, 1200, 1600 and 2000 pixels, a custom value, or the original size. Pick the largest width the image is actually shown at, or about double that if you want it crisp on high-density screens.

As a rough guide: 800px for blog thumbnails, 1200 to 1600px for images inside an article, and 2000px for a full-width banner. Images narrower than your max width aren't enlarged. Client photos and unreleased product shots stay private while you work, since everything is processed on your device and never uploaded to a server.