How should I resize & save my images?

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.

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.

The standard configuration of ProPhoto is best-suited for images that are somewhere around 900 pixels wide. However, since different ProPhoto Designs may use different widths, the max width for images will vary depending on your settings.

Determining Image Width

You’ll want your images to be no wider than your content width, which is determined by subtracting your content margins and your total sidebar width (if enabled) from your overall blog width. Find the settings used by your design in these ProPhoto areas:
“ProPhoto” > “Customize” > “Background” > “Site width and content left/right margins”
“ProPhoto” > “Customize” > “Sidebars & Footer” > “Sidebar” > “Sidebar appearance”
Calculate by looking at these areas and do this simple calculation:

Site widthContent MarginContent MarginSidebar Width =
[Your Image Width]

Retina Displays

Apple forged a new path in display technology by effectively doubling the number of pixels-per-inch on their latest devices like iPad, iPhone, and MacBook which allows for more pixels to fit in the same space for a clearer screen. Websites normally display images and graphics at normal size, and web browsers on these devices scale the images to take the same space on-screen. We talked about this in our blog post about Retina and have since added support for Retina displays for your photos in your posts/pages.

To take advantage of the higher resolution when using ProPhoto 5, do one simple thing: upload your images twice the normal width after calculating your ideal width in the section above. For example, if your ProPhoto Design uses width, margin, and Sidebar settings that allow you to display content at 900px wide, upload at 900 x 2 = 1800px wide and that’s it! ProPhoto does the rest. Here’s what will happen:

  • Retina devices: shows the highest resolution that will fit in the content area.
  • Non-Retina devices: shows a downsized copy of the original that will fit in the content area.

Since downsized images are processed by your web server, not using a tool like Photoshop, some detail softness might be seen – this is because the server does not apply post-sharpening to your photos. If you see other troubles with downsized images, see this added info:

Option 1: BlogStomp

Let’s face it; not everyone uses Photoshop.  And that is increasingly true for ProPhoto users who have 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 will 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)




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.

 A note on “DPI” or “PPI”: When working with graphics for the web, DPI does not matter so you can use 72 or 7000 with no change in image resolution.

The standard configuration of ProPhoto is best-suited for images that are somewhere around 900 pixels by 600 pixels (landscape orientation). However, since ProPhoto Designs have different widths,  the max width for images will vary, depending on your settings. You’ll want your uploaded images to be no wider than you content width, which is determined by subtracting your content margins and your total sidebar width (if enabled) from your overall blog width. These options are set here in “ProPhoto” > “Customize” > “Background”.  Your sidebar width is set in “ProPhoto” > “Customize” > “Sidebars & Footer” > “Fixed Sidebar”.

Option 1: BlogStomp

Let’s face it; not everyone uses Photoshop.  And that is increasingly true for ProPhoto users who have 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 will 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)



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