Benefits of cropping images with a consistent ratio
- Your images will line-up nicely when displayed horizontally.
- Image alignment will remain consistent whether you choose to display your templates at full-width, half-width or third-width.
- You鈥檒l be able to re-position templates without having to worry about image alignment.
So, how do you crop images using a consistent ratio?
Image editing tools
NOTE: With the exception of Snagit, 黑料社 neither endorses or supports the tools listed below. All tools are listed as examples only.
To start, you鈥檒l need an image editing application that will allow you to crop images to specific dimensions. Here are some options to consider:
- 鈥� A free and easy to use online cropping tool.
- 鈥� A free and open source image editing application.
- 鈥� A feature-rich image editing program, available for a monthly subscription fee.
- 鈥� An online tool that calculates image dimensions (width and/or height) based on ratio.
Steps to crop an image
Of the tools聽listed above, Croppola is probably the most straight-forward to use. Here are steps you can聽follow to crop a 聽photo using the current version of Croppola:
- Go to .
- Upload your image by browsing your computer files, or drag and drop the image.
- Under 鈥楥rop鈥� > 鈥楽cale to鈥� enter your preferred image width into the first field but聽leave the second field empty, e.g. 1400 x ____ pixels (we鈥檒l discuss this further聽 under 鈥業mage width鈥� below).
- Under 鈥楢spect ratio鈥� on the right, choose your preferred ratio (we suggest using 16:9 or 4:3).
- Drag the crop lines that appear on the image as required (crop your image to best suit what you are trying to communicate).
- Click the 鈥楧ownload this crop鈥� button.
And that鈥檚 it! Kind of鈥�
Image dimensions and file size
Another practice聽we鈥檙e promoting is to crop all your images using a consistent image width. Most WMS features will scale images to fit the application, so it isn鈥檛 necessary to crop images to the various dimensions at which they will be displayed.
Cropping all images聽for the largest possible width (e.g. the full-width of the web page) will allow you to easily adjust the size and position of your templates as you experiment with different layout options.聽 We also suggest adding a little extra width to your image, to account for upcoming expansions to the page width as well as the possibility your image might be viewed on a large display screen.
As a general rule, you should upload the largest image (width and height), at the highest quality (dots per inch/dpi) possible, that doesn鈥檛 exceed a file size of 1MB. For the time being,聽we recommend choosing a width of 1400px or greater.
How to crop an image using other image editors
Not a fan of Croppola? Here are other online tutorials that explain how to crop images using other image editing tools:
Do you have any tips or tricks or favourite tools that you use when cropping images for your WMS sites? Share your suggestions in the comments below!
