You don’t need fancy or expensive photo editing software for optimizing images and save photos for the web. Both Windows and macOS have free built in tools that crop, resize, and save images for the web.
In this guide, I’m using the Windows Photos App.
Always work on a copy, not the original.
Never edit the original image, always work on a copy of your photo. Always keep the original image so you can start afresh if you need to. You will need that original image more often than you think!
Make a folder for the images you’re working on so you know where to find them.
Make a folder in My Documents, Pictures, or on your Desktop. Make sure you know where you’re storing the images you’re working on. When you know exactly where you’ve stored your images you know where to find them later.
Use your own images where possible.
Free photo sites such as Unsplash or Pexels are great for general purpose images, but your own photos show the real you. Photos of you, your staff, your premises, and your products or services show the real you. Stock photos don’t generate the same level of connection and trust that your own photos bring.
Always get permission before taking or using photos of people. And never pressure people into being in photos if they’re not happy to be photographed. And never use photos you “found” on the web without express permission from the image owner. You could get sued for copyright infringement.
Using Windows Photos App.
Before optimizing images, first make a folder for this project and make sure you know where that folder is. Then place a COPY of your image in that folder.
Right-Click the image and choose: Edit with Photos.
In the Photos App.
- Crop is the first option in the top toolbar. If it’s not already selected, select crop.
- At the bottom of the screen, click: Free.
Cropping and Positioning the image.
- I’m making a website hero image, so I select 16:9 crop aspect ratio. If you were making an image to use in the body of your page, you might select a square or rectangular crop.
- I want my hero image to be 1920 pixels wide, so I drag the crop handles until my crop area is 1920 pixels wide. It can be fiddly to get the width just right.
- When my crop box is 1920 x 1080 pixels, I drag the image so the focal point of the image is in the center vertically and horizontally.
Save as Copy
Now, in the top right corner of the screen I choose: Save Options > Save as Copy. I save the cropped image into a folder where I’ll be able to find it later.
Optimizing the image.
The cropped image is now open in Windows Photos app, I’ve cropped it, and now I want to optimize the image so it downloads quickly when visitors view my website.
In the top left corner, click the three dots button and choose: Resize Image. I am not going to change the pixel dimensions of the image, but I am going to reduce the image file size. I am going to compress the image, or save for web.
Three dots > Resize Image.
I do not change the image width or height.
I drag the quality slider to 60% and make sure photo files are saved as JPG file type. If I was optimizing a line drawing I might choose to save it using the PNG format.
I click Save and make sure I know where I’ve saved the image.
The image is now cropped, resized, and optimized for the web. Optimizing images only takes a minute, but it’s time well spent.
Extra tip Edit Mode
If you can’t find the crop settings, make sure you’re in edit mode, it’s the big blue button in the top left corner of the screen.
Next page : Blog or Videos?
You can watch starter videos or view the blog.