Optimizing Site Images

When using images in your Wisr site, both during your initial customization or including images in Discussion threads, it’s important that the images aren’t really big from a file size perspective because it will load slowly. A lot of times, the images we received from customers or source ourselves from Google search are pretty high resolution and have a large file size. Let’s call “Large file size” as anything measured in megabytes (MB), rather than kilobytes (kB).

A good size to shoot for is 500 kB, though if it’s a bit over than that, that’s OK.

Reduce the width and height

The first thing to look for is if the image is really large from a width/height perspective. To check this, open the image in Preview and select Tools -> Adjust Size.

A good upper bound on the width is 1600. So if you’re looking at something more than that (I’ve seen 4000!), set it to 1600. Preview should adjust the height accordingly so that the aspect ratio is preserved. If you change it, be sure to save the file with File -> Save or ⌘S.

Optimize the image

The second thing is to optimize the image which will really help reduce the file size. A good tool for this is https://tinypng.com/ which can handle both JPG and PNG files. Drag and drop your image into the website and it will automatically optimize it for you, then you can download the file and use that to upload to Wisr.

Here is an example where we went from 2.6MB to 529kB in a few seconds!