Resizing and cropping images

26 February 2017

Downloading, or uploading, big images is always bad news as it just takes an absolute age. Including big, oversized images in websites and marketing emails only to resize them to the correct size on the client application is a very common mistake. If you do this you will make your website and emails slower than they should be, even unusable. And with the explosion of people accessing these on smartphones often with a slow connection and data limits it is even more important to get it right.

As a rule all images should be correctly sized before uploading them into your website or email. And resizing an image is much quicker than trying to upload a big one.

Images used in FoodCommerce

In FoodCommerce there are two places to upload images:

  • the image library through products, categories and producers
  • the "media and files" tab in theming

The image library

Uploading a big image file into the image library will not cause a problem except for the time taken by the initial upload. If an image uploaded to our server is too big it is automatically scaled down to 2048px x 2048px simply not to waste valuable storage space.

The required size of a product, category or producer image is specified in the server side code on any webpage it is used on. When the webpage is requested the image is then dynamically resized at the server before being downloaded by the visitor’s browser.

<img src = "{{ SelectedProduct.ImageUrl(237, 237) }}" alt = "{{ SelectedProduct.Name }}" >

In this example the image size is specified as 237px x 237px. If the original image was smaller or not a square shape then transparent space is added. Images are never stretched.

In general uploading a smaller image will save you a lot of time so it is well worth doing. The exact size doesn’t matter as long as it is as big as the biggest instance where it is used. If you are unsure then 1024px x 1024px is an ideal size to upload.

Media and files tab

Images uploaded here are for insertion into static pages and are not changed by FoodCommerce in any way. They therefore need to be correctly sized before they are uploaded.

Images used in Online Connector

Images uploaded here for use in a marketing email are not changed in any way so they need to be correctly sized before they are uploaded.

In the context of the latest editor images are uploaded into an image library. If you do upload a big image the library will lock up until it is complete and this may give the impression that the application has crashed. Once uploaded you can click on an image and it will tell you its size. There is an "edit" option but this is very basic and can only be used to crop images. You cannot resize an image here.

As a guide to the required width of images used in the components of these emails:

  • used across the whole width: 642px
  • half width: 292px
  • two thirds width: 442px
  • one third width: 142px

If you do manage to upload an image that is too big and then insert it in an email it will still look OK. This is the responsive code at work resizing the image to fit the screen size. Unfortunately it is masking a problem and if you were to send the email out it could take a long while for some subscribers to download your images to their email client, especially those using smartphones on a slow network connection. They will not be best pleased as this will block other emails coming through until it is finished.

Image editing software

To change the dimensions or to crop an image you will need image editing software. If you are using a Mac there is one already installed named "Preview" and there is an excellent article on how to resize and crop images at www.wikihow.com/Resize-Pictures-(for-Macs).

If you are using a PC then you will need to install some image editing software and the good news is that there are some excellent free ones out there. The best place to download one from is Ninite which is a brilliant website used by IT pros to download, install and update all manner of free and open source software. Choose Gimp (or if you want something simpler Paint.Net) and click on the "Get Your Ninite" button. Double click the downloaded file and it will download the software you have chosen and install it without any fuss or unwanted junk.

Cropping an image with Gimp

  1. Click and drag the rectangular selection tool over the part of the image you want to keep. If necessary, each side can be dragged to fine tune your selection.
  2. Click on the "image" menu and then "crop to selection".

cropping an image with Gimp


Resizing an image with Gimp

  1. Click on the "image" menu and then on "scale image".
  2. Ensure the chain link is not broken so that the height remains proportional to the width.
  3. The unit of measure should be "px" (pixels).
  4. Type in the image width (or height) you require.
  5. For most images setting the interpolation to "cubic" should give the best results.
  6. Click "scale".

scale menu in Gimp

scaling an image with Gimp


Change the zoom to full size

  1. Click on the "view" menu and then on "zoom".
  2. Click on "1:1 (100%)".

changing zoom in Gimp


Export your modified image

  1. Click on the "file" menu and then on "export as...".
  2. Choose the folder, file name and file extension. If there is no transparency in the image then the file extension should be ".jpg" as this will be a smaller file. If the image has transparency then use the ".png" extension.
  3. Click "export".
  4. In the JPG dialog box set the quality at 90.
    In the PNG dialog box always set the compression level at 9.
  5. Click "export".

export menu in Gimp

export a JPG file in Gimp

export a JPG file dialog box in Gimp

export a PNG file dialog box in Gimp


Tony Fear
Tony Fear