Edit Your Photos With Software Already on Your Computer
If you have just finished reading our blog How to Upload Images to Squarespace (So That They Don’t Break You Website), you have probably been nodding your head and mumbling “yes, quite right” to yourself in agreement while reading over all the sage advice that we gave you. Then you finished reading and said out loud “Wait! How do I do these things?” possibly waking up a small dog or cat slumbering at your feet.
Well, soothe Rover/Fluffy back to sleep, because we will now explain step-by-step how to do all those things, preserving your pet’s future rest.
To resize and convert your images to the appropriate file types, there is software already built into both the Windows and Mac operating systems that will do the job. And, in a pinch, you can even upload photos straight from your iPhone, iPad, or Android device to your website if you grab the Squarespace app from Apple’s app store.
Right now, though, let’s get back to the walkthroughs using the software that is already on your computer. The application for the Mac is called Photos, while the application for Windows is called (wait for it...wait for it...) Photos.
If you have a Mac
If you use a Mac, then you have access to Apple’s photo editing application Photos. This is all you need to get your images ready for your website.
Cropping
Cropping allows you to save an image in the aspect ratio (the relationship between the width of an image and its height) that you need, and lets you trim away any excess from the outer edges of the photo.
Open up the Photos App, and double click on the image that you want to work with.
After the image opens in the Photos app, click the Edit button in the top right corner of the app.
You will go to a screen where, at the top center, there are three buttons all squished together to look like one long button. Click the Crop button segment. (It is the segment all the way to the right.)
Once you have clicked the Crop button, the crop options panel will appear at the right side of the Photos app. Here you can select from a few common aspect ratio presets, or create your own by selecting Custom. You can also crop your image by dragging the crop handles at the corners of your image. It is simpler to just select a pre-set ratio.
Preset Crop Aspect Ratios
Crop Edit Handles for Freeform Crops
Once you have selected a ratio or created your own, you will see two boxes at the bottom of the aspect ratio panel below the word Custom. Here you can change the orientation of your photo from horizontal to vertical or the other way around.
Custom Horizontal Layout Selection
Custom Vertical Layout Selection
Since you have selected your aspect ratio and chosen a vertical or horizontal orientation, the photo itself will be inside of your chosen crop area. If you click on the image itself, you can drag it around inside the designated crop area to make sure your crop is showing the part of the image you want to show.
Once you are happy with your crop, click the yellow Done button in the top right corner of the Photos app.
If you are unhappy with the result of the crop and want to start over, simply select Original from the list shown in the crop options panel on the right. It is the very top option shown under Aspect.
Don’t worry about not having access to your original photo. The Photos app makes what is known as non-destructive edits to your photos. You can come back at any time, select any edited photo, then select Image from the menu bar at the top of your screen, then come down about a third of the way in the drop-down menu to Revert to Original. This will remove all of the edits you have made to your image in the Photos app.
Exporting
Exporting allows you to save an image in the format (gif, png, jpeg) you want, size your image, and alter the file size.
Select the image in Photos that you wish to export by clicking on it.
From the menu bar at the top of your screen, select File
In the drop-down menu that appears select Export
In the fly-out menu that appears to the right of Export, select Export 1 Photo
You will then come to a screen that asks you to make some choices about how your photo is saved. Select the following:
Photo Kind: JPEG
JPEG Quality: Medium
Color Profile: sRGB
Size: Custom
Under the Custom Size selection
if your image is horizontal in orientation, select Max: Width and type in 2000 in the space below to the right of the word “of”
if your image if vertical in orientation, select Max: Height and type in 2000 in the space below to the right of the word “of”
There is no need to include Titles, Keywords, and Description or Location Information, but you can if you like.
For File Name we recommend selecting Use File Name, as it will make it easier to come back to the Photos app and find the image again should you need to.
For Subfolder Format you can leave the selection at None, although it doesn’t hurt anything if you like organizing your photos into subfolders on export.
Click the Export button. Select a location to save the photo on your computer and click the Export again button to save.
Checking Your Image Before Uploading it to Your Website
Now we can double-check that everything was saved the way we wanted. Locate the image in your finder, and select the image by clicking on it.
Go to the menu bar at the top of your screen and select File
Select Get Info about half way down the drop-down menu that appears
In the General section near the top of the Get Info window you will see Kind and Size
Here you can verify that the image was saved as a JPEG image and is smaller than 500 KB.
You can also change the name of you image in this window in the Name & Extension section about half way down the Get Info window. When you change the name, make sure you keep that .jpeg file extension as part of the image name.
If you have a PC using Windows
If you use a Mac, then you have access to Apple’s photo editing application Photos. This is all you need to get your images ready for your website. If you are using a PC running Microsoft Windows as the operating system, you also have a built-in app for editing photos. It is also named Photos. Photos will allow you to crop, resize, and export your photos for website duty.
Cropping
Cropping allows you to save an image in the aspect ratio (the relationship between the width of an image and its height) that you need, and lets you trim away any excess from the outer edges of the photo.
In the Photos App, click on the image that you want to use.
Once the image opens, click the Edit button above the image.
Once you have clicked the Edit button, the Crop & Rotate panel will appear at the right side of the Photos app. Here you can select a from a few common aspect ratio presets, or create your own by selecting custom and dragging the crop handles at the corners of your image. It is simpler to just select a pre-set ratio.
Select the Aspect Ratio button to show presets.
Preset Crop Aspect Ratios
Crop Edit Handles for Freeform Crops
You can also click and drag your image around inside the crop highlight area to make sure your crop is showing the part of the image you want to show.
If you are unhappy with the result of the crop and wish to start over, simply click the Reset button in the Crop & Rotate panel and try again.
Once you have the image cropped the way you want it, click the Save a Copy button at the bottom of the Crop & Rotate panel. By saving a copy you will be creating a copy and not overwriting your original file.
Exporting
Exporting allows you to save an image in the format (gif, png, jpeg) you want, size your image, and alter the file size.
Select the image you wish to export by clicking on it.
At the top right of the Photos app window, click the three dots just to the right of the printer icon.
Select three dots icon to open drop-down menu.
Select Resize from the drop-down menu that appears.
Select Resize from the drop-down menu.
Select Define Custom Dimensions from the Resize Image popup that appears.
Make sure the Maintain Aspect Ratio is checked on the pop-up just below the Width and Height measurements.
Change the dimensions of the longest edge of your photo to 2000.
Adjust to quality slider so that the quality falls between 70% and 80%.
Click the Save Resized Copy button at the bottom of the Resize Image pop-up.
Select a location to save the photo on you computer and click the Save button at the bottom right of the Save as pop-up.
Checking Your Image Before Uploading it to Your Website
Now we can double-check that everything was saved the way we wanted. Locate the image on your computer and select the image by clicking on it.
Right click on the image and select Properties from the pop-up menu.
Select the General tab in the properties window that appears.
Near the top of the properties window you will find the type of file and the size of the file. Here you can verify that the image was saved as a JPEG image and is smaller than 500 KB.
You can change the name of your image in this window near the top of the properties window just below the tabs.
You can also see this information in the Windows Explorer app if you select Content View under View in the application toolbar menu.
And, that is it! Our original cheat sheet blog How to Upload Images to Squarespace (So That They Don’t Break You Website), gives you all of our recommendations on image aspect ratios, formats, and sizes, along with file sizes and names, and legibility.
