You’re responsible for the website content and you want to swap in a new image. You’ve found the image, you know where you want it to go, yet you need to crop and resize it. There’s no budget for a designer, you don’t know how to use Photoshop and this problem is really annoying.
So is there a way to crop and resize images without needing Photoshop or a similar application? Of course. And it’s free.
Let’s take the WPF Therapy site as an example.
It’s time to update this right hand image (highlighted in red).
How to resize your image
1. Find out what size your image needs to be.
Click and drag the image onto your desktop. Left click on it and ‘Get Info’ on the pop that appears.
This gives you all the information you need. The section you need to look at specifically is the ‘More Info’ section where it tells you the dimension.
In this case, dimension is 200 x 110.
This means it is 200 pixels wide and 110 pixels high.
2. Click here to open up PicResize in your browser. This is a free online application.
3. Click on Load a Picture
4. Follow the instructions and when you have chosen your image, click on ‘Load Picture’.
5. Your image will load. You will be able to see in the top right hand corner the following:
Selection – what size of image you choose
Size – the size of the image uploaded
Position – the position of your cursor over the image
In this instance, the image is 1024px x 1024px large which means it is best to make this smaller first before you crop it to the right shape. Otherwise, you will only see a part of the image when you crop it.
6. Click on the Resize button on the left and choose your dimensions. Click on the percentages in the pop up, or make it a custom size. Ensure that the ‘Lock Aspect Ratio’ button it ticked. Then click on ‘Apply’. Remove the pop up by clicking on the small cross in the corner of it.
7. Now to resize your image. Click and drag on your image. This will bring up a bounding box. Keep an eye on the top right hand information area as this will tell you when you’ve when you’ve got your size correct.
You can click and drag on any of the corners of the bounding box to adjust the size. You can also click and drag the whole box (position the cursor inside the bounding box) to position it over another area of the image.
When you have the bounding box positioned and sized properly, click on the Crop button on the left to finalise this.
The screen will show you the finished product. You can also add ‘extras’ such as text to this image.
8. Save it. When you’re happy with your image, choose from the options on the bottom left.
Choose Format: Select JPG if it’s a photo or image with a lot of gradients. Select GIF if it is an image made up of block clour.
Save to :Choose ‘Save to Disk’ to save it onto your computer. This will most likely be saved in your Downloads Folder.
And there you have it. Your image resized and cropped and ready to be uploaded!