How to Resize Images for Web Applications

One of the most frequent problems we hear about from our Support teams (and not just here at RP Data, it’s been a consistent problem for our customers throughout my technical life), is resizing images for uploading to websites or web applications, or even just emailing a picture to a friend.

How to Resize Photos for Web Applications
How to Resize Photos for Web Applications

Most websites or web applications that real estate professionals use (or any industry, for that matter), typically require you to upload photos – whether it be for your profile picture, images of properties, a photo of a contact etc.

Depending on the website or application, there’s usually a file size limit – sometimes very small like 250 kb (kilobytes), or sometimes larger, such as 4 mb (megabytes). The problem comes about because when we use our digital cameras to take photos, they usually produce jpeg files that are 5 to 8 mb in size, depending on the number of megapixels in your camera. It’s a problem that is only going to get worse, as each new digital camera release has more pixels crammed onto their CCD or CMOS chip – so it’s not uncommon to get 12 or 14 mp (megapixel) cameras at the consumer level.

So in order to convert our 8 megabyte jpegs into a size that can be uploaded into websites or web applications, we need to resize the photos and re-save them.

There’s a lot of different tools out there that can resize photos – some web based, and some Windows applications. I’ve tested quite a few of them and will now present you with my two favourites – the ones I found easiest to use to resize your digital photos and reduce their file size.

I’ll describe the how-to for using both applications to resize your digital images for uploading to your CRM, Facebook, rp.connect or any other tool that requires you to upload photos.

If you understand the basics about web applications and photo sizes, skip right down to the how-to’s below.

Web-Based versus Windows Applications

First, an explanation of the differences between web-based and Windows applications. It may influence your decision on which one to use, depending on how and when you need to resize images.

Web-Based Applications

  • The application lives on the internet, and requires a connection to the internet to access and use
  • Typically nothing is stored locally on your computer (with the exception of some preferences/settings)
  • Can usually be used on any computer, anywhere in the world as all you need to access it is a web browser and connection to the internet
  • Images must first be uploaded so the online software can process it. The final images will then need to be downloaded. This can take time depending on the speed of your internet connection and the size of your original images.
  • The software can be enhanced and upgraded over time without requiring you to re-install software or do anything.

Windows Applications

  • The application is first downloaded (or bought on CD) and installed directly on your computer
  • Can be used ‘offline’ and doesn’t require an internet connection
  • Can integrate with your Windows Explorer or other applications to give you ‘context menu’ access (eg: right-click on an image to resize it)
  • Can be faster to use as you don’t need to upload the photo anywhere else first.
  • The software generally remains static over time, and any updates or enhancements will require you to re-install the software.
  • Can only be used on the computer it’s installed on. You can’t go to another computer and use the application unless it’s installed there as well.

In general, it’s a good idea to become familiar with both types and both methods. Depending on your circumstances and the scenarios when you need and want to resize images, sometimes you may need to use a web-based application, and if you’re at your home or office on your normal computer, then a windows application might be the fastest and easiest way.

Photo Sizes

You will have to think about what size you need the resized photo to be – it will depend entirely on how you plan to use the photo. For uploading to Facebook, it needs to be under 4 megabytes. Your CRM or other office tools may require the photos to be under 1 megabyte.
The two main factors that will influence the final file size of the photo, are:

  1. The image dimensions (how wide and how tall in pixels)
  2. The level of compression (higher compression reduces file size, but also reduces quality)

In general, for uploading to most websites or web applications, the image dimensions should be approx 1000 pixels wide. This will allow the file size to be reasonably small (around 500kb depending on the compression/quality).

If you need a smaller file size, you will need to reduce the image dimensions more (maybe 800 pixels wide) and also reduce the quality (where the tool allows it) to 80% (for example). You should generally resize your photos as jpeg or png format.

Your situation may be different and you may need to speak to your application providers to find out their ideal/preferred size and format for uploading. [hr]

Tools and Software to Resize Photos

The two tools I like the best are PicResize (web-based application) and VSO Image Resizer (Windows Application).

[box type=”info”]For the how-to’s below, I’ll need to assume you have transferred the pictures from your digital camera to your computer, and you know the file/folder location and file name of the image you want to resize.[/box]

[hr]

PicResize

PicResize main screen
PicResize main screen

PicResize is great because it can be really simple and easy to use, or can give you more complexity and more functions if that’s what you need. It’s a web-based application, so is useful if you’re not on your home computer and need to resize some images.

Basic Method (Quick Resize)

Basic Options for PicResize
Basic Options for PicResize

Click the “Or Quick Resize” link to expand down the minimal set of options for the basic method. All arguments are optional and you don’t actually need to change anything, but the ones you’ll need to think about are highlighted in yellow above.

  • Custom Size: You should generally set this to around 800 or 1000 pixels wide, but this will depend on your circumstances (remember to change the dropdown from ‘Percent’ to ‘Pixels’).
  • Rotation: You may or may not need to resize the photo, but it’s worth knowing the options are there.
  • Save As: JPEG as the default is fine, but if you need PNG or another format, this is where you do it
  • Remember my settings: This is handy if you use the tool often, and it will save your settings for the next time you use it.

Click ‘Choose File’ and browse to the file on your local computer, set your options, and click “Resize Pic!”.

Once your picture is resized, you’ll be shown the screen below:

After resizing, need to save to your computer
After resizing, need to save to your computer

The important areas are highlighted:

  • New Image Size (highlighted green): This shows your image dimensions and the final image size in kilobytes (KB).
  • Preview Image (highlighted yellow): Click this to see what your resized image looks like, to make sure the quality is ok
  • Save to Disk (highlighted pink): Click this to save the image to your computer, so you can upload it to the required website or application.

Advanced Method

If you simply choose your file and click “Continue”, you’ll be presented with the advanced options screen where you can crop your image as well as resizing it, if you choose.

Advanced Options for PicResize
Advanced Options for PicResize

Again, the important functions are highlighted yellow but you may wish to play around with all of them.

  • Crop Menu: If you need to crop the photo, drag your crop area using your mouse and click “Crop Selection”.
  • Resize Your Picture: Choose one of the defaults from the dropdown, or choose “Custom Size” to set a custom size
  • Save as: Jpeg or PNG is best
  • JPG Quality: It’s generally a good idea to choose “Best” to avoid compression artefacts, but if you need a smaller file size you can select “Better”.
  • When done, click “I’m Done, Resize My Picture!”

Multiple Pictures

The instructions above were for selecting a single image and resizing it, but PicResize also has a handy “Multi Picture” option where you can resize a number of pictures in batch mode.

You just need to select the “Multi Picture” tab from the top, add your files, click “Upload”, set your resize options and click “Batch Resize”.

[hr]

VSO Image Resizer

VSO Image Resizer is a Windows application that gives you extra right-click context menus and powerful options to resize your images one at a time, or in bulk. It has to be installed on each computer that you want to use it on. It’s a free-to-use application with some nagware (popup) if you don’t register it, but it’s only $20 to buy – a small investment for something you’ll use over and over again.

[box type=”info”]It is assumed you have downloaded and installed VSO Image Resizer, and have navigated to the folder location where your image(s) exist.[/box]

The beauty of VSO Image Resizer, is that it’s the same process to resize a single image or multiple images. You simply select the file(s) you want to resize using standard Windows Explorer functionality – left click for to select the first file, and ctrl-select or shift-select to select multiple files.

The file I want to resize is over 3000 pixels wide and 2.59 MB
The file I want to resize is over 3000 pixels wide and 2.59 MB

Once your files are selected, right-click on choose “VSO Image Resizer”.

Right click on the file and select "VSO Image Resizer"
Right click on the file and select "VSO Image Resizer"

Once you click past the nagware screen (in the free version), you are presented with the main VSO Image Resizer screen, where you are presented with many powerful options. I’ve highlighted the ones you need to care about most, however feel free to investigate all the options.

VSO Resize Options
VSO Resize Options
  • Images Tab: Here we only have 1 image selected, but using the Images tab we can add other files or folders to resize in batch.
  • Profile: You can select from a preset list of default profiles. Easy ones include 800×600 or 1024×768.
  • Width: You can set a custom width here
  • Format: Select the output format (JPEG, PNG etc). “As Original” is usually ok unless you’re converting from one type to another.
  • Quality / Size: These are very powerful and help you to specify the quality or final size you desire for your resized picture. If you need your final resized picture to be under 200kb, then you can select that button and change it to 200kb.
  • Action: Here you can choose to override the original photo, or create copies. I’d recommend to Create Copies (default).
  • Destination: Usually it is best to create your resized copies in the same directory (default) but you can choose to save them to a sub-folder or anywhere else.
  • Process: Start the resizing!

 

Showing the file after resize. The "800x600" is added automatically.
Showing the file after resize. The "800x600" is added automatically.

The image above shows the image after using the settings above. You can see it’s been reduced to only 49 KB at 800×533 pixels.

I’ve only touched the surface with these options – it’s a very powerful program that can do a lot more, but if all you need is basic image resizing, it’s great for simple right-click actions to resize your photos quickly. You can even go into the settings to stop it displaying the “close” screen when it’s finished resizing, and you can even setup additional shortcuts for your right-click context menu so you can have quick access to any of your profiles.

Quick access to your favourite profiles
Quick access to your favourite profiles

This makes it even simpler to use, and can turn your 10 megabyte digital camera JPEG’s into web-ready 1024×768 images for uploading into your web application, in literally 1 click, while still preserving your high-resolution files if you want to use them for printing.

[hr]

Conclusion

VSO Image Resizer is my favourite when I’m using my regular laptop. Quick and easy to use when I want single-click actions, but extremely powerful when I need the extra features.

Out of the web-based products I investigated, PicResize is the best of them – intuitive enough to use with powerful cropping functionality if you need it.

I hope you’ve found these reviews and how-to’s useful. I’d love to hear your thoughts – have you used these programs, or do you use any other programs to resize your images?

3 thoughts on “How to Resize Images for Web Applications

  1. Linda Stringer Reply

    Hi Mike

    I have been reading your article on re-sizing photos. It is a shame that RP only allow for 800×600 size photos. Unfortunately this is only useful for point and shoot cameras as all professional cameras shoot a a different size – 800×533. When professional photos are loaded on to the RP site they are stretched to fit and are therefore distorted. We overcome this problem for our clients by placing a white border at the top and bottom of each photo ( which blends into the white background), but some real estate agents don’t like the fact that the photo is then smaller than the frame.

    Is there any way RP can have 2 different sizes – one for point and shoot cameras and one for professional photography as a high percentage of real estate is shot by professional photographers these days?

    Kind regards
    Linda Stringer

    • Mike Salway Post authorReply

      Hi Linda

      Thanks for your comment.

      I’m not 100% familiar with the way RP Data processes images for RP Classic and RP Professional, so I’m doing some research and talking to the product managers and developers to get an understanding so I can reply with more information.

      I’ll get back to you soon!

      Cheers and thanks.
      Mike

    • Mike Salway Post authorReply

      Hi Linda

      Sorry for the delayed reply.

      The standard image size for RP Data images is 768×512, which is a 3:2 image ratio.

      That’s the same ratio as 800×533 (professional DSLR’s), so you should not need to letterbox your images at all. When you upload your photos, it should resize them to 768×512 without squishing them.

      Is that not what you are experiencing? Please give us some more details if you’re still having trouble and we can look into it.

      Cheers and thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail. You can also subscribe without commenting.