How to Prep Images for Your Website Using Photoshop
How to Prep Images for Your Website Using Photoshop—Video & Transcript
Transcript for How to Prep Images for Your Website Using Photoshop.
Hey it’s Mary Maru. And today I want to show you how I crop and optimize stock images for a Divi website.
This is the first in a series of ‘how to’ videos on preparing images for the web.
In this one, I’m going to be using Photoshop Creative Cloud. And in the next two videos I’ll demonstrate how to use an amazing web-based app called Canva. And then finally, how you can use Mac Preview which comes standard as part of the software bundle on your Mac.
Right now, we’re going to get to work using Photoshop Creative Cloud.
Step One: Know what size image you need
For the demo today, I’m going to be prepping a header image for a Divi website. I know that the ideal dimensions for a full-width header image for Divi are 1920 pixels wide x 1080 pixels high.
So I want to make sure the image is AT LEAST the dimensions of 1920 pixels wide x 1080 pixels high.
The one we’re working with today is 7360 x 4912. Obviously, way larger than we actually need. And that’s perfect. Because if we want to crop the image differently, for example, if we wanted to zoom in more on the hiker, we could do that and still have our desired width of 1920 pixels.
You never want to use a source file that is smaller than the final dimensions or you’ll lose image quality and end up with a blurry or pixelated photo on your website.
In Photoshop, you can check the image’s dimensions by going into IMAGE > IMAGE SIZE. Or use the shortcut OPTION + COMMAND + I.
I chose an image from unsplash.com by photographer Ashley Knedler taking at Blowing Rock, NC. I like that it has a lot of white space around the subject. So as visitors see this header image on smaller screen sizes, they should still get a good experience without the hiker’s head getting cropped out.
You can learn more about some of my favorite stock image sites in the article, Where to Find the Best Images for Your Website, on my blog.
Step Two: Create a New Canvas in Photoshop
Now that we have our image dimensions worked out and we have a photo to work with we want to create a new canvas using our full-width header image dimensions.
1. Open a new Photoshop file by clicking on FILE > NEW or use the shortcut COMMAND + N.
2. You can name your file here. I prefer to name the file when I’m saving it.
3. Enter the full-width header file dimensions of 1920 pixels wide x 1080 pixels high.
4. You can leave the rest of the default settings as is.
5. And then click on CREATE
Step Three: Merge the Source Image File with the New Canvas
So now we have a new file ready to go and we also have the stock image file open on our desktop.
1. Then open the image file in Photoshop that you want to use as the header for your About page.
2. Separate the two Photoshop files into two independent windows by clicking on the top tab of one of them and dragging it away from the Photoshop window. When you see a new Photoshop window appearing independently from the application, release your mouse. You should now have two separate windows.
1. Arrange the two windows so you can see at least a part of the image and also part of the blank canvas at the same time.
2. Click and drag the image over to the blank canvas until you see the canvas is activated. And drop it.
3. At first, you may see only part of the image because it’s much larger than your 1920 x 1080 canvas.
4. If that’s the case, hit COMMAND + ‘0’ and make sure ’SHOW TRANSFORM CONTROLS is selected in the toolbar. Doing this let’s you see what the actual parameters are of the photo with the hiker. See, he’s here. We just need to resize the photo so it fits in the new window.
5. Holding SHIFT + dragging with your mouse, resize the image until it looks the way you want it to.
6. I’m hitting COMMAND + ‘+’ to make the new canvas larger and easier to see. And then making the window bigger than the canvas to reveal the parameters of the original photo again so I can do some fine tuning.
7. You want to keep the original image outside the new canvas so it’s covering the canvas completely. Or you’re going to end up with this white background—in this case—on the right edge.
8. Obviously, our source image has more height than we need.
9. I’m going to use the built-in guides to show me when the photo is centered on the new canvas.
10. And then hit ENTER to accept all of the changes we just made.
Since we’re not actually cropping the image, we can go back and make adjustments if we want to.
Step Four: Save Your Image in Photoshop
Now that our hike photo image is at the size we want, it’s time to save it for the web.
1. Select FILE > SAVE or use the shortcut COMMAND + S.
2. Name the file. I use a specific naming convention to help keep my images organized. You can use whatever naming system works for you.
3. Click SAVE to keep a copy of the file in Photoshop.
Step Five: Export Your Image for the Web
1. Select FILE > EXPORT > SAVE FOR WEB or use the shortcut OPTION + COMMAND + SHIFT + S.
2. in the new dialog box that pops up, I like to work in the 4-Up view which shows me the Original Photoshop file and then three versions of the file in JPG format at different levels of quality.
3. We could change the file format to a PNG or GIF file. But actually, for photos, JPG works the best for preserving quality at the more compressed file size.
4. The goal with header images is to try to keep around 100k. The smaller the file size the better for your user experience and Google ranking since Google’s algorithm includes site performance among lots of other things.
5. You can zoom in to these four views by clicking on the zoom + or – buttons. And you can re-orient the image by just dragging it around.
1. I’m going to zoom in on the hiker. We can see that there’s a little bit of artifacting happening around him. Not a huge deal in this case because the hiker is a small element in the image and even at the smallest file size presented her at 58K, the bright red color of his jacket and deep black of his hat and pants still look very crisp and sharp. And most people aren’t going to see the image zoomed in at 400%.
That said, let’s take a quick look at the background. In the file size that’s 58K, the sky has a lot of visual banding and noise happening. I can see it even at 100%. And I’m seeing it in the file here that’s at 90K and is the closest in file size to our 100K goal. We don’t want see that.
2. Let’s adjust the 90K photo using the quality slider up to about 52 and making the image size about 108K looks right to me.
3. You can also use the Preset menu to select Low, Medium, High, etc. I like being able to fine-tune my images with the slider.
4. Now that I’m satisfied with this image, I’m ready to click on SAVE.
You can follow these same steps for images that go anyplace on your website. The only real difference is going to be the photo dimensions.
And there’s more than one way to use Photoshop to prepare your images for the web.
I prefer this method of cropping images to size because I rarely receive from clients or find stock image that are the exact right size. And doing it this way lets me see how the image is going to look cropped and still have the flexibility to move the image around in Photoshop so I can frame the image exactly the way I want.
So I really want to encourage you to prep images before uploading them to your website. And I hope this video showed you why prepping images is so important. And gave you some useful tips on how I use Photoshop to crop and optimize images for the web. If you enjoyed this video, if you found it useful, please let me know in the comments. I’d also love to hear if your image prep process is similar to mine.
I’ll be making two more videos for this shorts series and will demonstrate this same process using Canva and Mac Preview. I hope you’ll come back to watch those. See you then.