Resize images quick and easy to upload to your website

I want to show you how to resize images without Photoshop as larger images will slow downloading speed and affect your visitors’ experience.

What is meant by ‘image size’?

This refers to the pixel density instead of the actual ‘length or breadth’ of the image. So to re-size an image means that you will have to use less pixels per inch or centimeter while still maintaining the best quality of the image.

Let me explain what this means:

When you right click with the mouse on an image and then click on properties you will see the properties menu open up. Firstly, if the image was taken with a high quality camera phone or SLR you will notice that the image is physically large, maybe10MB(Megabytes) or more.

You need images to be less than 2 MB to use on your website. Also when you click on ‘Details’ on the properties menu screen you will see the dimensions (width and height) are high. “Width x height” can be up to 5000 each.

ice_screenshot_20160323-151044ice_screenshot_20160323-152433

 

When using WordPress it will not allow you to upload images larger than 2MB. In this tutorial I will explain how you can make an image smaller than 2MB without affecting the quality of the image at all. Graphic design software is rather expensive and if you can resize images without Photoshop, why not?

This quick tutorial will show you how to resize images without Photoshop

For Microsoft Windows Users

You can use any program you prefer and there are free online tools available.

Microsoft Paint is a very easy program to use and available to all if you’re a Windows user without the need for an internet connection, and will thus be used in this tutorial. Sometimes by simply opening the image and then re-saving it without changing anything you can reduce the physical (megabyte) size by more than 80% without losing any quality.

  1. Right click on the images —> Open With —> Choose Paint from the drop down.
  2. When the image has successfully opened up in the page choose File —> Save
  3. You will see that the physical size has changes without changing the dimensions.

If the image is still larger than 2 MB you can follow these steps:

  1. Open the image in paint again as instructed above. You will now see the actual photo size displayed by Paint, probably larger than you will ever need.
  2. Click on ‘Resize’ in the Image section of the Home tab, or use the shortcut Ctrl + w to see this screen:

3. Click on Pixels. Here you will see the same width and height parameters as in the image properties, but now it’s in horizontal and vertical measurements.

ice_screenshot_20160323-134918

4. Ensure that the box next to “Maintain aspect ratio” is ticked so that if you change the horizontal value the vertical value automatically changes, and visa versa, so as to keep the image in proportion. Click OK. PLEASE NOTE: You will see I’ve changed the horizontal value to 1200px (pixels). It’s not preferable that you go smaller than that. Going a little larger will not be a problem. If you’d rather change the vertical value, minimum preferred size is 600px.

You will see that the image will view considerably smaller on your screen but might still be much bigger than you would like it to be on your website. Don’t worry about this because WordPress has it’s own generic sizes which will be used to fit images.

5. When saving: Clicking save will overwrite the original image, so if you want to keep both the original and re-sized images you should click file —> Save As —> Choose preferably PNG of JPEG —> Type in the new name and click Save. After saving you’ll notice when looking at the image properties that your image should be much smaller than 1MB.

Your image is now ready to be uploaded to your website without a problem.

For more information on this you can go to these links: Rowboatmedia and How to save images optimized for web.

 

For MAC Users

How to resize pictures on Mac.

Step 1: Select the image you want to re-size.

Step 2: Right click and select “Open With” —> “Preview”.

AuWtgwJPi2j9GTA_nnjDDhVYpREMHUCHA0EdkSFcr7uG

Step 3: In Preview, go to Edit —> Select.

Step 4: Once the images is selected, go to Tools —> Adjust Size.

AjUYlxHayvv3mkodSRCiLTRqYJEvm_rnptRsoOQxesiU

Step 5: Enter the width or height value to re-size your image. Make sure “Scale Proportionally” is selected if you’re only going to re-size the width for example. This will ensure that your image is proportionally re-sized.

As_X23bkgsNblafnh-CJGonbGX1jWApkX-fVjZb0HLbj

Step 6: Save and close.

ArJmLGr1EoOuENBev6Qbm02VERiW-gronJyfkEc2Udw8

There you have it. For more information feel free to contact us. It’s very easy, and you can also get extra information if on Wikihow.

Website Design & Maintenance by Lenomedia.
web design potchefstroom