Run Lighthouse first

Inspecting images by hand works for small pages, but for most sites you'll want an automated tool. Lighthouse flags images that are candidates for resizing in its Properly Size Images audit.

  1. Open the site's preview, then press View App and Fullscreen.
  2. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
  3. Switch to the Lighthouse tab, ensure Performance is checked in the Categories list, then click Generate report.

The properly size images audit failing in Lighthouse.

In this sample, both images on the page fail the audit and need resizing.

Fix flower_logo.png

Starting with the first image in the source:

  • Select flower_logo.png in the DevTools Elements panel.

.logo {
  width: 50px;
  height: 50px;
}

The CSS caps this image's display width at 50 pixels, but the file itself is larger. Resize it to the actual rendered dimension using ImageMagick, available in the terminal.

  1. Click Remix to Edit so you can modify the project.
  2. Open the Terminal (use Fullscreen if the button is hidden).
  3. Run the resize command:

convert flower_logo.png -resize 50x50 flower_logo.png

Fix flower_photo.jpg

The second issue is the main flower photo.

  • Inspect flower_photo.jpg in the Elements panel.

.photo {
  width: 50vw;
  margin: 30px auto;
  border: 1px solid black;
}

Its CSS width is set with 50vw — half the browser width. The optimal file width therefore depends on the visitor's viewport, so pick a size that covers most screens you actually serve. Analytics data is the best guide here.

Google analytics of screen resolutions.

If 95%+ of visitors use resolutions no wider than 1920 pixels, calculate the target width like this:

1920 px × 0.5 = 960 pixels

Users on wider screens will see slight upscaling, but on a large image the artifacts will be hard to notice. Run ImageMagick to shrink the file:

# macOS/Linux
convert flower_photo.jpg -resize 960x flower_photo.jpg

# Windows
magick convert flower_photo.jpg -resize 960x flower_photo.jpg

The audit may still fail — here's why

Re-run Lighthouse and you might still see the image flagged.

Lighthouse properly size images audit.

Lighthouse evaluates pages on a simulated Nexus 5x, which has a 1080-pixel-wide screen. For that viewport, a half-width image only needs to be 540 pixels wide — well under the 960-pixel file you just created.

Adjusting further is a trade-off: smaller files load faster, but lose sharpness on high-resolution displays. Erring smaller is usually safe, since users rarely scrutinize images closely, but there are cases where quality matters more.

Responsive images avoid the dilemma entirely by letting the browser pick from multiple generated sizes, tailored to the actual device.