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. Optimizing your images isn’t required, 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 72,000 and image resolution isn’t affected.

1) Image Width

If you upload images that are too wide for your content area, ProPhoto will automatically downsize those images for you. But, as we mention in our Images Don't Look Right tutorial, downsized images can sometimes have noticeable quality issues. Avoid these problems by uploading your images at the intended display size, or a multiple – like 2x for Retina screens.

How wide should your images be? ProPhoto tells you in each post/page editor screen, in the upper right corner, in the Recommended Image Size box, based upon your design’s settings.

Recommended Image Size box

This box appears when you’re working on a page or post in WordPress, suggesting ideal image width

 

Recommended images widths are given for both retina displays (discussed below) and non-retina displays. If your images are created at the suggested width, they should look awesome. Use your favorite image software to downsize images on your computer before uploading into ProPhoto. Read about batch processing images in large groups to save time – just search online for tips, based on the software you use.

Retina Displays

If you do upload images that are pretty tall (common for ‘portrait’ orientation photos) be aware of ProPhoto’s “Image Height Constraint” option, which helps prevent portrait orientation images appearing too tall:

2) Image File Size Optimization

File size is critical when dealing with images posted on the web. This is not an image’s actual pixel dimensions, as discussed in tip #1 above, but the actual storage an image file requires. More data on a web page means longer loading time, and this can even affect your search ranking. While you can upload and insert full size images right from your camera to your site, those 10MB files are going to take much 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 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 with the same coloration as when viewed in your photo editor. If your images are saved with a different color profile, such as “CMYK” or “Adobe RGB” or “ProPhoto RGB” (no relation) 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. Optimizing your images isn’t required, 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 72,000 and image resolution isn’t affected.

1) Image Width

If you upload images that are too wide for your content area, ProPhoto will automatically downsize those images for you. But, as we mention in our Images Don't Look Right tutorial, downsized images can sometimes have noticeable quality issues. Avoid these problems by uploading your images at the intended display size, or a multiple – like 2x for Retina screens.

How wide should your images be? ProPhoto tells you in each post/page editor screen, in the upper right corner, in the Recommended Image Size box, based upon your design’s settings.

Recommended Image Size box

This box appears when you’re working on a page or post in WordPress, suggesting ideal image width

 

Recommended images widths are given for both retina displays (discussed below) and non-retina displays. If your images are created at the suggested width, they should look awesome. Use your favorite image software to downsize images on your computer before uploading into ProPhoto. Read about batch processing images in large groups to save time – just search online for tips, based on the software you use.

Retina Displays

If you do upload images that are pretty tall (common for ‘portrait’ orientation photos) be aware of ProPhoto’s “Image Height Constraint” option, which helps prevent portrait orientation images appearing too tall:

2) Image File Size Optimization

File size is critical when dealing with images posted on the web. This is not an image’s actual pixel dimensions, as discussed in tip #1 above, but the actual storage an image file requires. More data on a web page means longer loading time, and this can even affect your search ranking. While you can upload and insert full size images right from your camera to your site, those 10MB files are going to take much 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 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 with the same coloration as when viewed in your photo editor. If your images are saved with a different color profile, such as “CMYK” or “Adobe RGB” or “ProPhoto RGB” (no relation) 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