How to crop and save an image for web and reduce page load times

How to crop and save an image for web and reduce page load times

For the optimal page speed performance for your web pages, we recommend saving your images for web. Our content team utilizes an inexpensive Mac application called Pixelmator Pro to crop and save images for web. There is a free version of this app, but we prefer the pro version to give us a little more editing power when we need it. 

Watch this quick tutorial on the simple process of cropping images for web. And remember...
  1. Match the image dimensions provided in your website's style guide
  2. Always save as .jpg unless a .png is required for a transparent background image
  3. Reduce the weight of your image as much as you can without distorting your image quality
  4. Save for web!
Once you've completed these steps, you can upload to the appropriate folder in your media library and add the image to a page on your website.




Transcript:

Hi there. In this video I'm going to show you how to prepare an image for your media library. 

I've accessed my style guide and it told me I need a 900x900 photo. 

I have this photo I would really like to use, but it's clearly not a square. So let's see what it is. I'm gonna right click open with, and we like to use Pixel Meter Pro. Open that up. You can see the size of the original image here and that it is not 900x900. All you have to do is click in this little circle, go to canvas size, and here you can input the precise size of the image that you need.

You also have the option to move this around a little bit in this view, and in this view you can see where the actual image constraints are and get that centered accordingly. 

A great feature that Pixel Meter Pro has is you can come up to the top bar here, go to file, and you can export for web.  I'll show you what this does. First of all, we always recommend using a JPEG if you can, and when you're using a JPEG, this gives you a little quality bar here. When we move this bar, it changes the number up here, which is how much storage space the photo is going to take up. We don't like to keep it at a hundred because you can still get visibly identical quality at around 85 or 90, somewhere in that range. And you can see that our number up here is quite a bit smaller, which means our pages will load quite a bit faster than if we hadn't adjusted this right here. 

Now we're going to export and we're going to name the photo something a little more intuitive. Now I've got this saved on my desktop. It should show up with its new name. 

And now this image is ready to go into your media library.