SAVE TIME BY SIZING & UPLOADING IMAGES IN BULK


It is essential that you reduce the file size of your image before you upload them to the web. This will help to keep your visitors and Mr Google happy and by enhancing the page speed of your website pages.

When images are first taken by a photographer, they are naturally much larger than for what is required for the web. Your web pages will load faster when the images on your web page have a smaller file size. This is important for your user experience and also because search engines like Google prefer websites that load quickly.

To save laborious manual work, it is essential for web designers to size images in bulk.  Here we show you how web designers save time when resizing and uploading images by introducing three tools to size images in bulk.


In this interactive tutorial, we look at:

  • ensuring you have good software for resizing images, then,
  • resizing your images in batches, before,
  • uploading your batch images to MOBLE CMS in bulk.

Upload Images in Bulk to MOBLE

MOBLE CMS allows you to import images in the 'Files' area. You have the option to import images individually or in bulk.

You can upload in bulk by following the steps below:

  1. Browse your computer and place all of the images that you would like to upload into a folder.
  2. Compress the folder as a .zip file:
    • PC: Press and hold (or right-click) the file or folder, select (or point to) Send to, and then select Compressed (zipped) folder. A new zipped folder is created in the same location.
    • Mac: Right mouse click and select "Compress Folder Name". A new zipped folder is created in the same location.
  3. Rename the zipped folder to: import_files.zip.
  4. Go to MOBLE CMS.
  5. Go to the 'Files' area from the Main Menu.
  6. In the top right hand corner click 'Add File'.
  7. Choose the zip file named import_files.zip.
  8. Set the file 'Type' to 'Image'.
  9. Add any other information you would like to assign to all of the images, alternatively you can later add information for each image individually.
    • E.g. Create new Tags for the images and/or select from the existing list of Tags.
  10. Click 'Save' in the top right, your images will now start to upload.
  11. Depending on the size of your file, uploading images in bulk might take some time. Wait until the file has finished uploading. Do not close your browser.
  12. Once uploaded, your images will now appear in the 'Files' area. You may now edit images individually, should you wish to.

If you do not already have and software to resize your images, you can choose from the free and paid software platforms below, then follow the steps to resize and upload your images. After this tutorial, you will be able to resize images and upload them to your website extremely quickly. 

Lightroom

PAID | PC | MAC

Pixelmator

PAID | MAC

iResize

FREE | PC | MAC


Lightroom for Batch Image Resizing

Lightroom is premium digital photography software that can be used for editing photos in bulk before uploading a batch of images to MOBLE CMS.

Lightroom is available as part of Adobe's Creative Cloud photography plan for a low monthly subscription. It is recommended for Content Managers with a passion for photography, or if you are frequently adding new photos to your website.

Go to Lightroom 

MOBLE CMS IMAGE SPECS

MOBLE CMS will automatically size your images to fit many locations around your website. Therefore, it is recommended, though not essential, that you upload an image with the following dimensions:

Type: .jpg (.jpg will be a smaller file size than .png)
Dimensions:1440px x 810px

Ratio: 16x9
Size: < 200kb (more than 250kb will effect your website speed)

PRO TIP:

When you resize your image to 1440px by 810px it has a 16x9 ratio. MOBLE CMS will automatically crop your image so that is can be used throughout your website in many locations e.g. as squares (1x1 ratio) or portfolio rectangles in widgets (e.g. 3x4 ratio).

Once you have prepared your images at 1440px x 810px, you really should focus on 'Size. You will notice that converting your images from a .png to a .jpg, will reduce the file size to around 200kb. If your image is still much higher than 200kb (i.e. above 250kb), you really should consider lowering the quality of the image to bring the file size nearer to 200kb.

The larger the image size the slower your page load time will be. Pages with faster load times have lower bounce rates (i.e. the rate of users leaving the page before making an action) and therefore convert better. Search Engines also prefer web pages that load faster.


LIGHTROOM CAPABILITIES

Lightroom can size images via a combination of the following:

Type: YES Lightroom can resize by Type
Dimensions: YES Lightroom can resize by Dimensions
Max Length: YES Lightroom can resize by Length
Ratio:
 YES Lightroom can resize by Ratio
Size: YES Lightroom can resize by Size. This is a key time saving premium feature


RESIZE IMAGES IN BULK USING LIGHTROOM

  • Open Lightroom.
  • From the 'File' menu select 'Import Photos and Videos' or click the 'Import' button in the 'Library' tab.
  • Browse your computer and 'Check' the photos that you would like to resize.
  • Click 'Import' to bring the images into Lightroom.
  • Next, from the 'Library' tab, check the images that you would like to resize and click 'Export'.
  • A pop up will appear:
    • In 'Export Location' choose the location where you would like to Export the files to, if unsure select 'Same as original photo'.
    • In 'File Settings' choose JPEG.
    • In 'File Settings' check 'Limit file size to' and write '200' in to the 'K' field.
    • In 'Image Sizing' check 'Resize to fit' and select 'Long Edge'.
    • In 'Image Sizing' check 'Don't Enlarge'.
    • In 'Image Sizing' write 1,440 and select 'pixels'.
    • In 'Image Sizing', for 'Resolution' write '72' and select 'pixel per inch'.
    • Finally click 'Export'.
    • The images will now be saved to your computer in the 'Export Location' that you chose above.

Pixelmator for Batch Image Resizing

Pixelmator is premium digital photography alternative to Adobe's Photoshop Lightroom. The huge advantage of Pixelmator is that it is available for the low one-time fee of US$29.99 (at the time of writing). Pixelmator is only available for Mac users via the App Store.

Go to Pixelmator
 

MOBLE CMS IMAGE SPECS

MOBLE CMS will automatically size your images to fit many locations around your website. Therefore, it is recommended, though not essential, that you upload an image with the following dimensions:

Type: .jpg (.jpg will be a smaller file size than .png)
Dimensions:1440px x 810px

Ratio: 16x9
Size: < 200kb (more than 250kb will effect your website speed)

PRO TIP:

When you resize your image to 1440px by 810px it has a 16x9 ratio. MOBLE CMS will automatically crop your image so that is can be used throughout your website in many locations e.g. as squares (1x1 ratio) or portfolio rectangles in widgets (e.g. 3x4 ratio).

Once you have prepared your images at 1440px x 810px, you really should focus on 'Size. You will notice that converting your images from a .png to a .jpg, will reduce the file size to around 200kb. If your image is still much higher than 200kb (i.e. above 250kb), you really should consider lowering the quality of the image to bring the file size nearer to 200kb.

The larger the image size the slower your page load time will be. Pages with faster load times have lower bounce rates (i.e. the rate of users leaving the page before making an action) and therefore convert better. Search Engines also prefer web pages that load faster.


PIXELMATOR CAPABILITIES

Pixelmator can size images via a combination of the following:

Type: YES Pixelmator can resize by Type
Dimensions: YES Pixelmator can resize by Dimensions
Max Length: YES Pixelmator can resize by Length
Ratio:
 NO Pixelmator can resize by Ratio
Size: NO Pixelmator can resize by Size. 


RESIZE IMAGES IN BULK USING PIXELMATOR

As Pixelmator is a Mac product, Automator can be used to resize your images in bulk. You can create an image resizing workflow as follows (or click here to use an Automator Workflow we've prepared earlier):

  • Create a folder on your desktop and call it 'Image Resize'.
  • Open Automator.
  • Chose 'Workflow'.
  • Select the 'Ask for Finder Items' task and put it in your workflow.
    • Set Type to 'Files'.
    • Check 'Allow Multiple Selection'.
  • Select the 'Fit Images' task and put it into the workflow.
    • Set Width to 1440.
    • Set Height to 810.
    • Check 'Constrain Proportions.
  • Select the 'Change 'Type of Images' task and put it into the workflow.
    • Set Type to JPEG.
  • Select the 'Copy Finder Items' task and put it into the workflow.
    • Choose the 'Image Resize' folder by selecting 'Other' from the drop down and finding the folder.
    • If you only want the new resized image in the folder check 'Replacing existing files'.
  • Hit Run.
  • 'Choose' the files that you would like to resize from your computer.
  • Your resized images are in the folder called 'Image Resize'.
  • See steps below to bulk upload the folder in to MOBLE CMS.

iResize for Batch Image Resizing

iResize is a free resizing tool that is available on Mac and PC. It is a go to free tool as you can resize large batches of images in one go. 

MOBLE CMS IMAGE SPECS

MOBLE CMS will automatically size your images to fit many locations around your website. Therefore, it is recommended, though not essential, that you upload an image with the following dimensions:

Type: .jpg (.jpg will be a smaller file size than .png)
Dimensions:1440px x 810px

Ratio: 16x9
Size: < 200kb (more than 250kb will effect your website speed)

PRO TIP:

When you resize your image to 1440px by 810px it has a 16x9 ratio. MOBLE CMS will automatically crop your image so that is can be used throughout your website in many locations e.g. as squares (1x1 ratio) or portfolio rectangles in widgets (e.g. 3x4 ratio).

Once you have prepared your images at 1440px x 810px, you really should focus on 'Size. You will notice that converting your images from a .png to a .jpg, will reduce the file size to around 200kb. If your image is still much higher than 200kb (i.e. above 250kb), you really should consider lowering the quality of the image to bring the file size nearer to 200kb.

The larger the image size the slower your page load time will be. Pages with faster load times have lower bounce rates (i.e. the rate of users leaving the page before making an action) and therefore convert better. Search Engines also prefer web pages that load faster.


IRESIZE CAPABILITIES

iResize can size images via a combination of the following:

Type: YES iResize can resize to JPEG
Dimensions: YES iResize can resize by Dimensions, though either as max length or as max height
Max Length: YES iResize can resize by Length
Ratio:
 NO iResize can resize by Ratio
Size: NO iResize can not resize to max kb in bulk. However, it can compress by % quality and allows you to test the quality
Renaming: YES iResize does allow you to rename your images in bulk with a name extension and can also apply sequential numbering


RESIZE IMAGES IN BULK USING IRESIZE

  • Open iResize.
  • Drag and Drop a Folder of images on to the list.
  • At the bottom of the list you can also select 'Add one folder of images'.
  • In 'Size in Pixels':
    • Type '1440'.
    • Check 'Width'
    • Check 'Do not enlarge images'.
  • You have the option to rename the image also add sequential numbering (leave if unsure).
  • You have the option to add an extension to the file name e.g. 'web' or 'copy'.
  • Once set select all images and click 'Resize All'.