Resize & Optimize Images in Photoshop for Websites

Today I will show you 2 ways to resize and optimize images in Photoshop so they’re suitable for publishing on a website. Images taken from most cameras today are far too large to publish directly to a website, so you need to firstly reduce the total image size/DPI, then optimize to a point that does not reduce the image quality.

The first way is the quickest and easiest and is suitable for when you do not need to edit the image using filters, layers, cropping etc. The second way is a little more involved and is suitable for when you do need to use filters, layers, adjustments and cropping.

Important Note: When editing images, it’s important to never ever edit the original image. Always make a copy of the image or save it in another format like Photoshop PSD. Keep all your original images in a separate folder system, then copy to a working folder to edit.

Watch the video above or follow the text guide below.

Resize & Optimize Images in Photoshop (quick way)

1. Locate and open the image you want to resize in Photoshop
2. Go to File > Save for Web & Devices…
3. Ignore and click Yes to any warnings, it may take a while to load
4. From the top drop down box, choose JPEG
5. Choose the High preset (Quality: 60%)
6. Down the bottom, look for the Image Size boxes
7. Enter the Width you require (I suggest 1024px) then hit the Tab key
8. The Height will automatically adjust relative to the Width, if it doesn’t click the chain icon
9. Now click the Save button, choose a location and a new name for the image
10. Close the image in Photoshop and click No to Save Changes? alert box (important!)
11. All done!

Resize & Optimize Images in Photoshop (if editing)

1. Locate and open the image you want to edit in Photoshop
2. Go to File > Save As… and choose Photoshop (PSD) file format
3. Now edit the image any way you want, when finished go to next step
4. Go to File > Save for Web & Devices…
5. Ignore and click Yes to any warnings, it may take a while to load
6. From the top drop down box, choose JPEG
7. Choose the High preset (Quality: 60%)
8. Down the bottom, look for the Image Size boxes
9. Enter the Width you require (I suggest 1024px) then hit the Tab key
10. The Height will automatically adjust relative to the Width, if it doesn’t click the chain icon
11. Now click the Save button, choose a location and a new name for the image
12. Close the image in Photoshop and click Yes to Save Changes? alert box
13. All done!

• Adobe Support (official)
• Adobe Photoshop Support (official)
• Search Google for Adobe Photoshop