Image Resize Width - Balancing Image Quality with Data Lightness

When you upload images with large dimensions, IoGT keeps the original image but serves users a resized version with smaller pixel dimensions. This reduces the file size of the images for users, which makes them:

  • Load faster for the user
  • Use less data transfer, so IoGT is less expensive on mobile networks
  • Take up less space on a device when the content is downloaded offline

The downside of this resizing is that the image quality may look lower on some devices.

Here is an example of how resizing works:

  • The IoGT platform is set to resize images to be 360px wide, maximum
  • An Admin uploads an image which is 1000x428 pixels and assigns it as Lead Image for an article Page
  • When users access the article Page, the server sends them an image which is 360x150 pixels
  • This image is shown in their browser, which stretches or shrinks it as needed depending on the size of the device and the browser settings
    • If the user is on a featurephone, the image might be shrunk to 240x103 pixels - the image is shown slightly smaller than the original resized image
    • If the user is on a smartphone, the image might be stretched to 460x197 pixels - the image is shown slightly larger than the original resized image
    • If the user is on a computer, the image might be stretched to 533x228 pixels - the image is shown 50% larger than the original resized image

By default, IoGT resizes images to be 360px wide when it serves them to users. This size is a good balance for both featurephone and smartphone screens, while keeping filesize low. However, when images are shown on computer screens they are stretched and may not look high quality.

If your users have affordable or free internet access, you might consider increasing the resize width so images look better on computers. You can change this in the Admin Panel under

Settings > Site Settings > Default image resize width

If you have a zero-rating agreement with an MNO you should consider what impact increasing the file size of your images will have. If you are paying, your costs will be higher; if your MNO partner is providing zero-rating for free then they will see an increase in data used by IoGT.

Technical details on resizing are available in the Wagtail CMS Documentation.

© The Internet of Good Things