For a non-pixel-monkey, adjusting a high-resolution stock image for use in a website at a specific pixel size/aspect ratio and to a limited filesize is trickier than it sounds…

Three separate functions are required

  1. cropping something compositionally decent to the correct proportions
  2. resizing the image pixel data down (never up!) to the required size
  3. compressing for web delivery

This process is second-nature to me and my weapon of choice, Photoshop, makes it a breeze. Finding another cheap/simple tool to crop and resize on macOS for a client was not a happy search.

I researched then downloaded a handful of options: Fotor, PhotoPad, Gimp, even macOS’s built-in Preview app. None of these options made it an easy job. For example, Fotor and Preview won’t allow you to change the crop-box and maintain proportions. PhotoPad I’ve put out of my mind, Gimp is too much for a normal person to grasp.

In the end, the easiest thing is to use an online tool.

Go to https://resizeimage.net/

  1. Upload your image
  2. Crop. Use Fixed Aspect Ratio: apply the dimensions of the final image you want, ie 1200 x 480. Drag over the image preview to set the crop/composition
  3. Rotate (ignored)
  4. Resize: enter the same number you had before. Now this will actually resize (shrink) the image. Ignore the “%” field
  5. Make background transparent (ignored)
  6. Select JPEG output
  7. Set Normal Compression and choose Compression level.

Click Resize Image.

Check your image for quality/size. If too big or too many JPEG compression artefacts adjust step 7…

Last updated on 11th February 2020