How Do I Resize Images Before Uploading Them?

Note: This tutorial only works for users running Windows 7, 8, or 8.1. This will not work in Windows Vista and any Windows version older than Vista.

Occasionally you will upload an image only to find that it is too large for the area where you put it. It's possible to resize the image if you are using the Internal HTML Editor, but a better solution is to resize the image before you upload it to your website.

Advantages of sizing an image before uploading include:

1. Reducing the image size before uploading reduces the load time of your site. If you resize an image using the HTML editor then anyone browsing your website is still loading the data for the entire image even if it's been reduced in size on your page.

2. Reducing the image size before uploading ensures that the image will be the same size across all web browsers. Not all web browsers render HTML in quite the same way which can result in images resized in HTML not displaying correctly, but they work every time if you've already sized before uploading.

3. Resizing before uploading is future-proofing. Sure the image looks fine now being resized with HTML, but who knows when a future browser change or code tweak might break that sizing? Uploading an image that's already at your desired resolution fixes this problem before it can develop.

The good news is that resizing an image is ridiculously easy and can be accomplished with a program that's already on your computer: our old friend Paint!

Resize01.PNG

Follow these easy steps to resize your images:

1. Open Paint. You can find Paint by clicking on the start bar, searching for Paint, and hitting Enter or right clicking on it.

Resize02.PNG

Resize03.PNG

2. Open the file that you need to edit.

3. Click on the Resize button along the top bar.

Resize04.PNG

4. Select the "Pixels" radio button at the top of the Resize dialog box and make sure that the "Maintain aspect ratio" checkbox is checked.

Resize05.PNG

5. Type in the desired width (Horizontal) or height (Vertical). Please note that editing one of these will automatically change the other to keep the image proportional as we checked the "Maintain Aspect ratio" checkbox in the previous step. This ensures that the image doesn't get stretched.

Resize06.png

6. Hit OK.

7. Save your image. It's a good idea to Save As and give this newly resized image a new name (perhaps add "web" or "resized" to the end of the file name to indicate this is the changed file). That way you have the new image and the original image at full size if you need to make future edits.

Your newly resized image is now ready to be uploaded to your website and is guaranteed to stay at that size no matter what.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.

Want some training on WebLink Connect? Sign up today for one of our upcoming online training classes.