hiraeth node.studio
Knowledge
ENDE

Home / Guides / Shrink an image

Guide · Squoosh, in the browser, nothing to install

Shrink an image before you upload it

A hero image of several megabytes takes seconds to load on a phone, and for those seconds your visitor sees nothing. Cameras produce images sized for print, not for a website. Shrinking them is the task with the best ratio of effort to effect.

Why this matters is explained in Why your website is slow on mobile (and what helps).

How to do it

  1. Open squoosh.app and drag your image into the window. The file name then sits bottom left under „Original Image“, with the current size below it.
  2. On the right, under „Compress“, pick the format. „MozJPEG“ for photos, „OxiPNG“ for graphics with few colours, and „WebP“ is smaller than both.The full list is AVIF, Browser JPEG, Browser PNG, JPEG XL (beta), MozJPEG, OxiPNG, QOI, WebP and WebP v2 (unstable). The three named above cover everything that belongs on a website.
  3. Drag the „Quality“ slider down from 75 and watch the size bottom right. On photographs there is usually no visible difference between 75 and 60.The vertical line in the middle can be dragged: original on the left, result on the right. That is how you see where it starts to hurt.
  4. If the image is wider than it will ever be shown, switch on „Resize“ on the right under „Edit“ and cap the width at 2000 pixels. For an image filling a single column, 1200 is plenty.
  5. Bottom right you now have the saving in percent and the new size next to it. Under 400 KB is a good figure for a large image.
  6. Download the result with the round blue button bottom right, the one with an arrow pointing down into a box. A button of the same shape bottom left downloads the original. Upload that new file to your site, not the original.

How you can tell it worked

Right-click the downloaded file to check its size. Then swap the image on your site and reload the page on a phone, ideally on mobile data rather than wifi.

Squoosh shrinks a file, nothing more. If your site is slow for other reasons, a pile of embedded scripts for instance, a smaller image will not change that.