Gallery Management: Step by step instructions on how to resize images for your website
Good images are the chief asset on any art website. With this tutorial you are going to learn how to optimize your images, while keep them looking great and loading fast. We will be using Photoshop, but you can do this in Photoshop Elements as well. There is also information on how to use a free on line tool to reduce the size of your images.
Optimizing is a term used to indicate a change to a photo, reducing both visually and in file size. For an Artbiz website I ask clients to resize visually to 800 to 1000 pixels, with a file size no larger than 100 to 150 kilobytes. This will create an image that fills the screen of most monitors and loads fast.
Your job is to try to get the image file size down, while retaining acceptable image quality. The lower the quality the more compression is applied to the JPEG. And the more the amount of compression, the smaller the file size will be. But if you go too far, reducing the quality by compressing the image too much, it will also reduce the photo quality. Balance is the key, it is better to have a smaller image with good quality, than a larger image with poor quality.
Before we start the resize process we are going to embed our copyright and image information into our photos using Photoshop. By attaching copyrights, image descriptions, your name and or contact info, you are helping to protect your images where ever they go.
How to create and save file descriptions and metadata
To access the image metadata in Photoshop or Photoshop Elements, go to File > File Info.
You need to have an image open in editor in order for the File info link to be accessible
As you may want to enter the same or similar information for every image, you can create a metadata template.
On the screen shot above, I have filled in the information I want attached to this image, including keywords. You can also fill in your contact information under the IPTC tab. This could include your website, email and can go so far to include your address and phone number.
Export and save it as template, then later import, to use with other images. Once imported, just change the name of the piece in the Document title and Description.
First we will create and save the Metadata Template
1) With an image open in Photoshop – Go to File > File Info.
2) Enter the information that you want in the metadata template, and delete any existing unwanted data. For example, enter your name, description of the piece (name, size, medium) and copyright information. Copy and paste the copyright symbol (©).
3) Export the metadata using the Export option in the drop-down menu at the bottom of the window.
5) You can change the name of the template file, such as your_name_template.xmp.
6) Click Save.
Now to apply the Metadata Template to another image
1) Open the image in Photoshop, that you want to apply the template to and then go to File > File Info.
2) Select Import on the drop-down menu at the bottom of the window.
5) Select the template file, such as your_name_template.xmp.
6) Click Okay and save your image.
Your information is now attached to the jpeg where ever it goes. The image title and descriptions will be automatically extracted and filled into the title and description boxes when uploaded to a NextGen Gallery.
While you are able to add image descriptions in earlier versions of Photoshop Elements, depending how old the version is, you may not be able to export and save a template. You should, however, be able to add File Info to images individually.
Resizing Images
Using Photoshop or Photoshop Elements
Open the original full size photo you want to resize in either Photoshop or Photoshop Elements editor workspace. If you have not already done so now would be the time to apply the metadata template and save your image so that the data is embedded into your original jpg. To start, we will be working with your original full size image.
Go to Image>Resize>Image Size OR Image>Image Size depending on your version.
A window similar to the screen shot below will open.
Make sure the three options shown, Scale Styles, Constrain Proportions, and Resample Image are all checked.
By default, the resample type is Bicubic; if your Image Size window shows a different option, click the drop-down arrow and choose Bicubic or Bicubic Sharper (best for reductions).
Type either the width or height you desire into either the Width or Height fields shown above. Typically I select 800 for the largest dimension and then the other will automatically be inserted because I checked the Constrain Proportions box.
Click OK.
Tip: while you are resizing keep an eye on the file size and try to reduce as much as possible without losing image quality.
Remember we are working with your original full size image and saving will over write the image size!
Save your image using SAVE AS from the file menu and rename it to something like Your-Name-art-name.jpg. Save it to a new folder that you created to store the images you will be using on the web.
When performing the Save As you will prompted to select options. The only thing you have to check here is that the Quality slider is set to 12 by sliding the bar as far right as possible. Then click okay and name your newly resized image.
Your newly named image will now be open in the editor and your original, safely tucked away.
OPTIONAL: Since resizing a photo almost always reduces its clarity a bit, it’s a good idea to use the Unsharp Mask filter to sharpen it a bit.
Go to Filter >Sharpen > Unsharp Mask
Enhance> UnsharpMask in Photoshop Elements
Start with the values show above: an Amount of 58%; a Radius of 0.9 pixels; a Threshold of 1 levels. Be aware that you can definitely overdo the sharpening process; if you start to see white lines (halos) around objects in your photo, you know you’ve gone way too far.
Click Okay, then with the image still open, move on to optimizing the image
Optimizing Images for the Web
Choose File>Save for Web & Devices (Photoshop)
Choose File>Save for Web (Photoshop Elements)
The Save for Web dialog box (shown below) allows you to preview the effects of the optimization options, while comparing it the the original.
The screen shot above is the image open in the Save for Web screen.
The original is on the left and a preview for the optimization is shown on the right.
You have already resized and sharpened the image but if you want to reduce the pixel size again, you may do so by entering in the size in pixels.
Select jpeg from the drop down menu, this is the best image format for photographs.
Work with the drop down menu to choose a level of quality (low to maximum) while previewing your resized image on the right. You can also use the “Quality” slider to drag the bar for reduction.
While you are resizing keep an eye on the file size and try to reduce as much as possible with out losing image quality.
Select the metadata you want to have embedded in the image. I usually select “All Except Camera Info”. If you are a photographer you may wish to include this. In that case select “All” from the drop down menu.
Click save and on the next popup, navigate to the folder that you created for your website images and over write the image file of the same name. Photoshop will prompt you to “replace” the file with the new one, click replace.
When the screen closes you are taken back to the main screen where you can close the image. There will be no prompting to save this image because you just did.
Saving the File Info in older versions of Photoshop
Older versions of Photoshop will not embed your file during the “Save for Web” process.
After you have optimized your image, open it again in Photoshop and add your file info. This process will bloat your image size sometimes doubling it. We need to reduce the file size by using the “Save As” command under the file menu.
- Open the resized image that has the meta data
- Under File click on “save as”
- You will be prompted to overwrite the existing file, click ok
- the next dialogue box allows you to reduce the file size – see image below
- In the image options set the quality to 9 or 10
- Check the file size number which you can see under the preview text on the right.
- Leave the other settings as they are.
The link to purchase the latest version of Photoshop Elements and easily optimize your images
Photoshop Elements $119
You do not need the full version of Photoshop ($600).
Resize your images online
Online free photo editors that you can use for free to resize your image and add a watermark.
This is an online tool provided by shrink pictures
- Browse your computer and select your image/photo to resize
- Select the new size for your picture –choose a custom size and enter 800 (it will keep the aspect ratio)
- Optionally, add an effect to your image
- Select output image/picture quality Lower quality means a smaller file- select “Better”
- Click “Resize” and wait for the processed images to be displayed, depending on the file size it may take a few minutes.
Once complete, you will be prompted to download the file. I recommend that you use “save as” and rename the file with your name and the name of the piece and put it into a separate folder away from your original images.
Now that we have perfectly optimized images we can upload and manage them in NextGen Gallery.
Hi Kim,
Hoping you’re still out there!
I’m updating my website, one baby step at a time.
I’m resizing images, and I have Photoshop Elements.
Is it recommended to watermark the images? At what stage should I do that…after they are resized?
Thank you!
Cynthia
Still here, Cynthia
I recommend watermarking the resized image not the original, and yes after they are resized so you can better control the size.
Hope this helps.
Hi Kim,
I’ve carefully followed the directions in the tutorial, (using CS3), making sure the metadata is reinstalled on the optimized image. I’ve kept the image as close to 150kb as possible which meant usually reducing the ppi to 72. In all cases, the uploaded images to the gallery are extremely pixelated. Whether I started with a 300ppi image or a 72ppi image of very large dimensions (say 26″ x 34″) there should have been enough information from the original file to keep the image intact after reduction. What am I doing wrong? Also, when I am in the galleries page and click on a thumbnail, it appears fine. It’s only pixelated when I visit the actual site.
Many thanks, Susan
Hi Susan
There were some settings missing which I just configured. Then I tried to create new thumbs using the batch process menu but something was creating an error. So I had to uninstall the plugin and delete everything and start over. I managed to save your galleries but you will have upload the images in the dementia gallery again as they were way to big (up to 1.5mg).
Since I had to recreate the galleries the gallery ID number on the individual pages will be incorrect and have to be changed to the new one.
Hi Kim,
I export my images through Lightroom and the full sized (1000px on long side, 150 kb) looks great on WordPress. When I import an image onto the individual image page (I am using FooGallery rather than Next Gen Gallery) and try to make it smaller using custom size, the image look blurry. This doesn’t seem to happen with every image. What am I doing incorrectly?
Resizing doesn’t work the same with media library images. WordPress creates 3 sizes of images when you upload. If you insert a smaller image and then make it larger it will be blurry. If you make a larger image smaller it will not be blurry. Make sure you insert a larger image if you’re going to make a custom size from it.
Hi Kim,
You go over in detail how & why to reduce the image sizes to a max of 800 pixels in the largest direction of the image but I can’t find if you mention anything about “resolution”. For some reason I was under the impression that these images should be saved at 72 resolution when reduced in side but your tutorial shows the box at 240 pixels/inch. Does it matter? Or what do you suggest?
Thank you
When you resize an image in Photoshop by just reducing the resolution, Photoshop decides the best pixel size, which can be a lot less than 800px. What to watch for is the file size in kilobytes. Aim for 100-200kbs.
Kim,
I re-sized images of several large paintings, each one from a large image file down to 800 pixels in the longest dimensions. After re-sizing, each one of these ended out being between a 600 & 750 kbs in file size which is way over the 100 – 200kbs you recommend I aim for. In order to get them close to that optimal size (100-200), I have to re-size that longest dimension from 800 pixels down to 400 pixels which gets me closer to the 200 kbs size. The problem I see with reducing this much is the images do not look very clear when presented large on the screen.
My work is very large in scale, many 6 to 8 foot canvases. Is this why I’m running into this problem? Or does the original size of the art not matter when determining how much to reduce the file size?
Thank you
Did you use the “Save for Web and Devices” command from the File menu? Or did you just reduce the pixels and save?
Thanks. Worked perfectly.
Hi Kim,
After resizing my images and importing a metadata template, a window pops up which says “important questions” and asks that I choose one of the following:
I’m using Photoshop CS6 (64 bit)
1. Clear existing properties and replace with template properties
2. Keep original metadata, but replace matching properties from template
3. Keep original metadata, but append matching properties from template
Which one do I choose?
Thank you,
You want to do either 2 or 3 Gordon as both will import your saved template info. The trick is to import the template first before you fill in anything, then just change what’s needed.
I keep one template only and use it over and over, just changing what’s needed. I do not export it everytime I use it so it keeps the original info in tact.
Hope this helps
I just got Photoshop Elements 11 and it is saving everything but the description and keywords.
With Photoshop Elements you have to open the image again after saving for the web and then add your file info and save again. Do not use save for web on this second step, just a simple save.
Hi Kim:
– I have Photoshop Elements 9. When I try to save the image after “saving it for the web”, I don’t get a dialogue box to let me choose the type of metadata I want for the image, consequently I can’t get rid of the camera info.
– When I enter data for the image, (File – > File Info), there isn’t any place to cut out camera info either.
– After going through the above two steps, I go to Manage Gallery and my album, and select an image to look at. The metadata for the image still does not reflect any of the info I entered. Am I checking this at the wrong place?
– When entering data for my image, I still don’t know when I can use comma and when I have to use hyphen, at least for the title of my image.
Looking forward to seeing your answer
Clement
In older versions of Photoshop Elements you will have to open the image again and apply your file info after it is resized and simply save the image. Do not go through the optimization process again, Elements doesn’t apply the file info there.
You can never use a comma in the jpg name. Add your commas in the file info only.
Once you add your file info as I mentioned above it should populate the image description box in NextGen Gallery. But your version of Elements is older so it may not???
Hi Kim! I’m on to the gallery part of the website, and more confusion for me. I get that the original photos need to be resized, but I don’t have Photoshop. Will these other programs do the same job? And, about the watermark: if I set up the NextGengallery with the watermark, do I also have to add a watermark from the site I’m resizing at? Is there overlap if I do? Help!
Dora
Hi Dora
Yes those other sites will resize your images but they don’t embed the file info like Photoshop does. So make sure you name your images as noted in the tutorial.
There’s no need to watermark in both places, one or the other.
Another question: when putting images of multiple sizes into a gallery, do you recommend showing as the same pixel size. What I mean is… an image of a 24 x24″ painting should be the same pixel size as image of a 8 x 8″ painting? Or not?
Absolutely, the same pixel size. You want to show your images as large as possible and at a consistent size, it makes it easier to navigate through the images as well.
I’m also cropping the images, which were shot on a black cloth. It seems like the best option is to actually crop out all backgroun — is that your recommendation?
What if the image is already framed? Show or don’t show?
Thanks for all of this!
Hi Susan
Yes crop out the back cloth background. Typically cropping out the frame is also recommended. You can show one with and one without if you think the frame is important and as long as there is no distortion.
Hi All,
Had a hard time downloading files from Shrink Pictures.
So I found another site that worked for free and fast batch optimizations too:
http://www.nchsoftware.com/imageconverter/index.html?gclid=CM3bo4W10bECFWYbQgodEToAJA
hmm… I’m using PhotoShop CS2. I followed your instructions on creating file info, saving the meta template etc., save for web, replace… however when I open the newly formatted file just to check to see if the “file info” shows up on the jpg, nothing appears and it’s a blank document again. Is this common? Shouldn’t I be able to see the file info on any jpg that has it?
It is common on older versions of Photoshop and Photoshop Elements. You will have to insert your file info again on the resized image.
Hi,
I’m using CS3 and the same happened. Most, but not all the info had to be replaced. However, re loading the template meant saving, hence the jpeg dialogue box. The pixels went from 236 to 417. Is there any way round PS increasing the file size again on save?
Regards, Penelope
Hi Penelope (welcome to school)
Are you opening the resized image or the original? The pixel size shouldn’t increase once the image has been saved and closed. The file info can increase the file size in kilobytes but not the pixel size.
Hi Kim,
Yes sorry, I worded that wrong. I was opening the resized image > adding the template > then saving with the new file information included. I should have said the file went from 236KB to 417KB. So adding the information made it bigger I suppose. Silly me!
Regards, Penelope
That make more sense, yes the file info does add to the kilobytes. Before trying to reduce the size again why not upload the image to your site, view it on the front end and see how long it takes to load. If it shows up in 6 seconds or less you’re good. If not then open the image in Photoshop and do a “save as” (not save for web). You’ll be prompted to adjust the image quality which will reduce the file size. See “Saving the File Info in older versions of Photoshop” near the bottom of this post above.
HI – this is a follow up to my question above, before Kristen’s question….I use Photoshop CS3, and when you optimize for web, there isn’t any control to indicate you want to save the metadata. I compared two files in Bridge, and indeed the optimized file doesn’t have any metadata associated with it but the original one does. Is there any way around this within CS3? thank you!
Kit, see #4 on “Optimizing Images for the Web” above, this is were you choose what file info to include. Just to clarify, are you saying that your CS3 is not showing the Metadata dialogue box at all?
Yes, I looked and looked and couldn’t find a dialog for Metadata for CS3 in this step. I also did a general search around the Internet and it’s possible that I would need to upgrade, or duplicate entering all the info with each optimized image. Let us know if you find a work around. Thanks!
I know that older versions of Photoshop and Photoshop Elements won’t bring in the metadata and you have to add it to your optimized image after the fact. If I see anything on my travels I will certainly post it back here. Just so you all know I used Photoshop CS5 for this tutorial.
Hi Kim. When I resize my images in the Adobe Lightroom software to 800pixels x 639, at 100%quality the file size is 960 kb. At 50% quality they are 300kb, and at 25% they are 220kb. I think I read you ‘d like them to be 50-100 kb, but the best quality possible while small.. Should I decrease the resolution?
Hi Kristen
800 pixels is only a guideline. If your images are still too large try 600px and yes reduce the resolution.
Thanks. Kristen
Great tutorial. If you add the metadata to the original image file, will that metadata go along with all the other versions of the image you might create, i.e. optimized, resized, thumbnails, etc.?
Hi Kit
Yes the metadata will travel with your image, however it will no longer be embedded with images that are taken by screen captures or snipping tools.
If you added the file info using older versions of Photoshop Elements you will have to add it again after “Saving for Web”.