Ricmedia PC Help

Tech guides for everyone

  • Home
  • Browsers +
    • Chrome
    • Chromium
    • Firefox
    • Internet Explorer
    • Microsoft Edge
    • Safari
    • Opera
    • Browsers (all)
  • Windows +
    • Windows 10
    • Windows 8/8.1
    • Windows 7
    • Windows Vista
    • Windows XP
    • Windows (all)
  • Other OS +
    • Linux
    • MAC OS X
    • Raspbian
    • Other OS (all)
  • MS Office +
    • Office 2013
    • Office 2010
    • Office 2007
  • Raspberry Pi
  • More +
    • Software
    • Networking
    • Hardware
    • Builds
    • Tools & Apps
    • Miscellaneous
    • Support +
      • Help
      • About
      • Sitemap
      • Contact
    • Legal +
      • Privacy
      • Terms
      • Disclaimer
      • Copyright
You are here: Home / Software / Image / Resize & Optimize Images in Photoshop for Websites

Resize & Optimize Images in Photoshop for Websites

September 10, 2015 By Richie Leave a Comment

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

Filed Under: Image, Software, Web Tagged With: Adobe, Export Image, Image Editing, JPEG, JPG, Optimize Image, Photoshop, PSD, Re-size Image, Resize Image, Save for Web

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Help & Support • Legal, Terms & Privacy • Contact Details • Copyright ©2006- Ricmedia • Part of the Ricmedia group of websites   Part of the Ricmedia group of websites