How to Resize & Crop an Image Using Mac’s Preview
Before you upload an image to a website, it’s best to resize it to an optimized size and crop it as much as possible to the look you’re going for. In this simple tutorial, I will show you how to resize and crop an image using Mac’s Preview (no need to upload to photoshop, Canva, or anywhere else!). I use this CONSTANTLY for client projects & it will be your new secret weapon.
We know everyone learns differently – if you prefer video, please watch the video tutorial below! If you’re more of a step-by-step person, we’ve written out the steps under the video.
Watch the Tutorial:
How to Resize & Crop an Image Using Mac’s Preview – Step by Step
*Note: In our video tutorial, we’re using images provided by ColorJoy Stock.
1. Crop your image
Open the image in Mac’s Preview. Click the image and begin dragging the dotted cropping line with your mouse until you reach the desired format.
TIP: hold down the Shift key as you drag your mouse so you can crop a perfect square.
Next, select Tools > Crop or hit Cmd+K keys.
2. Resize your image
Select Tools > Adjust Size.
In our video example, we reduced the image size from 3563 pixels squared to 800 pixels squared.
Before you add your image to your website, make sure you’ve optimized your image to improve loading speed. You can check out our Image Optimization tutorial for guidance.
Get Nerdy about Business, Websites & Tech with Us!
The Making Website Magic Community (hosted on Mighty Networks!) is a place where women web designersand developers can meet, mingle and make meaningful connections with industry collaborators. See you inside!
Article by
Sam Munoz
Sam is the CEO and lead web developer of Sam Munoz Consulting, LLC. Through years of coding, development & design experience - she is all about simplicity, minimalism & making websites that align with her client's business models & goals.
Keep Learning & Reading
How to Add a Top Call to Action Bar in WordPress
A top call to action bar can be a great way to easily direct visitors to convert. Learn how to add a Top Bar Call to Action in Wordpress
How to Position a Background Image in Divi
Ensure the background image you use on your site shows up the way you want it to! Learn how to position a background image in Divi.
How to Add reCAPTCHA to the Divi Contact Form Module
Stop spam in its tracks! Learn how to add reCAPTCHA to the Divi Contact Form module.