How to Resize and Crop Images Online
If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Photo editing software can be ridiculously expensive and oftentimes intimidating for folks who are new to the web. However, as the web is a visual medium, the true key to capturing and engaging your audience is an aesthetically appealing website. So, if you’re not a graphic designer, an illustrator or a photographer — what do you do to make a visually appealing website? And how do you make the images you do find look good?
Luckily, you’re not alone in this — and as demand begets supply, there are myriad options out there for finding free photos. But let’s talk about what FREE means before we get too far along in this.
Types of Free Images
For Royalty Free Images of a high quality, I recommend Istockphoto.com — their system is easy to use, it’s credit-based, so you can spend less for smaller images vs. larger ones, and there are tons of photos.
For Creative Commons images, Flickr has a great resource here.
Do not, under any circumstances, simply do a google image search and toss the photos up online. Most images are protected under copyright law and it’s a good way to get someone mad at you. ;)
So — now that you have the images, how do you size them correctly?
I recommend FotoFlexer. It’s a powerful, free online image editor. Doesn’t require any downloads, works with all browsers and operating systems, and it’s one of the less cumbersome that I’ve seen.
So let’s go through a little resizing project, step-by-step.
For this example, let’s use this one –
http://s3.amazonaws.com/estock/fspid11/81/71/02/neon-burbank-tolucalake-817102-o.jpg
I got it from Flickr’s Creative Commons section.
First, download this image and save it to your hard drive where you can find it. (right-click over the image and save) Then go to fotoflexer.com.
Click ‘Upload Photo” on the right-hand side.
Find the image on your hard drive and upload it.
Let’s say that, for this exercise, we want our image to be 600 pixels wide by 250 pixels tall.
Click to go fullscreen, as this will make things a little easier.
Click the Resize button.
Make sure the “Keep Proportions” button is checked and change the width to 600, then hit Apply.
Once back on the main screen, click the Crop button.
Make a rectangular shape on the image. You will see little measurements as you drag the edges to change the size of the window.
Stretch the sides until it’s at 600pixels wide, and then use the top and bottom sliders to isolate an area of the picture you want that is 250 pixels tall.
Once satisfied, hit ‘crop selected area’
Play around with any of the other settings you like, and when you’re ready, click Save and save it as a .JPG.
Done! Easy as that. you now have a free, legal-to-use image that’s the right size for your website!
Upload it to your site, add the photo credit, and go!











Leave your response!