How should I resize & save my images?

If you want to your site load quickly and have your images look their best, you’ll want to get in the habit of sizing and optimizing your images before you upload them to your site. You don’t have to, but problems can arise if you don’t. Here are our recommendations for image sizing and optimization.

A note on “DPI” or “PPI”: When working with graphics for the web, DPI does not matter so you can use 72 or 7000 and image resolution isn’t affected.

1) Image Width

If you upload images to your posts/pages that are wider than the area provided, ProPhoto will automatically downsize those images for you.  But, as discussed in our Images Don't Look Right tutorial, whenever an image has to be downsized, there can sometimes be image quality issues.  So to avoid this problem, you will want to try and upload your images at their exact display size.

ProPhoto makes it easy for you to know what width you should upload your post/page images at.  In the post/page editor screen, in the upper right corner, there is a dialog box, showing you recommended width to upload your images at, based upon your current settings in “ProPhoto” > “Customize”.

Screen Shot 2014-04-24 at 3.04.07 PM

Recommended images widths are given for both retina displays (discussed below) and non-retina displays.

Retina Displays

And if you do upload larger images for Retina display, be aware of ProPhoto’s “Image Height Constraint” option to avoid issues with portrait style images appearing too large on your site:

2) Image File Size Optimization

The name of the game with web images is file size.  This is not an image’s actual pixel dimensions, as discussed in tip #1 above, but the actual memory an image file requires.  The more bytes a web browser has to load, the longer it’s going to take.  You can upload and insert raw images right from your camera to your site if you want to, but those 10mb files are going to take A LOT LONGER to load on your site than an optimized version of that same image that is say 300kb.  And on a photography site with lots of images, you can see how this file size issue becomes critical.

So, when editing your images, you’ll want to try get that file size as small as you can, without losing too much of the quality of your original image.  In our “Image Editing Software Tips” section below, we give some further guidance on how to do this in Photoshop.  While there isn’t a hard and fast rule for image file size, we recommend trying to keep your images in the 300-400kb range or less.  If some of your images end up over this, it’s not the end of the world.  Just try and keep as many of your images as trim and tight as possible.

3) Color Profile

As mentioned in the same “Images Don’t Look Right” tutorial, linked to above in tip #1, the color profile of your images will affect how your actual image is rendered by a web browser.  Generally, web browsers work in the “sRGB” color profile, which is in the RGB color space.  So if you save your image with this color profile, they should display exactly the same on your site, as when viewed in your photo editor.  But if your images are saved with a different color profile, they may render differently.  The easiest way to ensure they have the correct color profile is to use “Save for Web and Devices” (or whatever equivalent your editor has) when saving your images in your editor.

Image Editing Software Tips

If you focus on the 3 above areas when editing your images above, it should help avoid various issues that can plague a site not following those recommendations.  If you need further tips on how to edit your images according to the recommendations above, see our Image Editing Software Tips tutorial.



If you want to your site load quickly and have your images look their best, you’ll want to get in the habit of sizing and optimizing your images before you upload them to your site. You don’t have to, but problems can arise if you don’t. Here are our recommendations for image sizing and optimization.

A note on “DPI” or “PPI”: When working with graphics for the web, DPI does not matter so you can use 72 or 7000 and image resolution isn’t affected.

1) Image Width

If you upload images to your posts/pages that are wider than the area provided, ProPhoto will automatically downsize those images for you.  But, as discussed in our Images Don't Look Right tutorial, whenever an image has to be downsized, there can sometimes be image quality issues.  So to avoid this problem, you will want to try and upload your images at their exact display size.

ProPhoto makes it easy for you to know what width you should upload your post/page images at.  In the post/page editor screen, in the upper right corner, there is a dialog box, showing you recommended width to upload your images at, based upon your current settings in “ProPhoto” > “Customize”.

Screen Shot 2014-04-24 at 3.04.07 PM

Recommended images widths are given for both retina displays (discussed below) and non-retina displays.

Retina Displays

And if you do upload larger images for Retina display, be aware of ProPhoto’s “Image Height Constraint” option to avoid issues with portrait style images appearing too large on your site:

2) Image File Size Optimization

The name of the game with web images is file size.  This is not an image’s actual pixel dimensions, as discussed in tip #1 above, but the actual memory an image file requires.  The more bytes a web browser has to load, the longer it’s going to take.  You can upload and insert raw images right from your camera to your site if you want to, but those 10mb files are going to take A LOT LONGER to load on your site than an optimized version of that same image that is say 300kb.  And on a photography site with lots of images, you can see how this file size issue becomes critical.

So, when editing your images, you’ll want to try get that file size as small as you can, without losing too much of the quality of your original image.  In our “Image Editing Software Tips” section below, we give some further guidance on how to do this in Photoshop.  While there isn’t a hard and fast rule for image file size, we recommend trying to keep your images in the 300-400kb range or less.  If some of your images end up over this, it’s not the end of the world.  Just try and keep as many of your images as trim and tight as possible.

3) Color Profile

As mentioned in the same “Images Don’t Look Right” tutorial, linked to above in tip #1, the color profile of your images will affect how your actual image is rendered by a web browser.  Generally, web browsers work in the “sRGB” color profile, which is in the RGB color space.  So if you save your image with this color profile, they should display exactly the same on your site, as when viewed in your photo editor.  But if your images are saved with a different color profile, they may render differently.  The easiest way to ensure they have the correct color profile is to use “Save for Web and Devices” (or whatever equivalent your editor has) when saving your images in your editor.

Image Editing Software Tips

If you focus on the 3 above areas when editing your images above, it should help avoid various issues that can plague a site not following those recommendations.  If you need further tips on how to edit your images according to the recommendations above, see our Image Editing Software Tips tutorial.


When working with websites, it’s best to size and optimize your images before you upload them to save you time, and so your visitors have the best experience with your site.

The standard configuration of ProPhoto is best-suited for images that are somewhere around 900 pixels by 600 pixels (landscape orientation). Some ProPhoto Designs have different widths, so if that’s the case (or if you have made your blog wider or narrower) the max width for images may be different, so be sure to check out the specific settings (look for blog width as well as the margin – remember margin numbers are for one side of your site, so double this number) in this ProPhoto area:

“Appearance” > “P3 Customize” > “Background”

Option 1: BlogStomp

Let’s face it; not everyone uses Photoshop.  And that is increasingly true for our users as ProPhoto becomes popular for all kinds of non-photography sites. For those that don’t have image editing software, or that just find the process too complex, there is a easy, low-cost solution.

We highly recommend BlogStomp. Not only can you sharpen, compress, resize and watermark your images, but it also gives you rich customization options for image collages.  It is an excellent tool for quickly and easily preparing your images for web display.  Watching their video tour below give you a good idea of its capabilities.  You can download a trial version to give it a test-ride.

Option 2: Photoshop

Go to “File” => “Save for Web & Devices…”
photoshop-save-web-menu
Optimizing images for the web is the easiest way to prepare photos for websites. In one step, you can:

  • reduce the file size (not the dimensions–how big the file is in terms of memory used to store it and download it) as much as possible without compromising the final image quality
  • set the color profile for good web browser compatibility (see below)
  • downsize images to fit your blog
  • apply sharpening to the downsized image
  • change file types/formats/extensions

Make sure that “JPEG” is selected as file format, (unless you are creating images with transparency, then pick PNG) Set your image output size (width & height dimensions) and turn down the quality value. Keep an eye on the file size in the lower left corner and watch how the quality looks on the “optimized” tab preview. Try to get the file size as small as possible without noticeably sacrificing image quality – don’t be afraid to set it low! Let your eyes be your guide – if you can tell that quality is lost in the image preview, bump it back up until you’re satisfied.
Save your setting, as a Preset at the top in case you want to use it quickly and easily later!


Click save, and the image will be ready to upload to the blog!
You can even use ‘batch processing’ to apply your saved Preset to a large group of images in one step – now there’s a time-saver!

Color Profiles

If uploaded images look dull or the colors appear to be off when viewed in certain web browsers, it may be because they are saved with a “color profile” that cannot be displayed by web browsers. Modern browsers will typically display your images properly if saved in the sRGB IEC61966-2.1 color profile – automatically selected when exported with the “Save for Web & Devices…” Photoshop tool, described above. For extra info, click here to read more.

Downsizing Images in Photoshop

If you have a special case where you want to apply other effects or have a specific workflow which does not work with the method above, you can use the Photoshop controls to manually downsize your images to the appropriate dimensions by going to “Image” => “Image Size…”

photoshop-image-size-menu

Set the longer dimension (width for landscape orientation) and click OK. As long as you “constrain proportions” (indicated by the little link icon) the other dimension will take care of itself:

photoshop-image-size-options

Optionally, you can add a bit of sharpening after downsizing, or don’t sharpen at all, it’s up to you and what you think looks best on-screen.

Photoshop Actions

If you know your way around Photoshop a bit, you may want to create a couple of actions which automate a workflow for you — this can save a lot of time, since you can select a group of images and apply all the ‘output’ steps you like to all of your images in one or two total clicks! (hint: read about Batch Processing in your software help files)


Did you find this tutorial helpful? Thanks for helping us support our customers better! Yes No saving...

If you’ve searched the tutorials and can’t find what you need, please contact us. We’re here to help. Contact Us