How to Resize Images Using Save for Web
Legacy Save for Web is Recommended
There are lots of ways to resize images you want to use on a website. The method we prefer uses Adobe Photoshop’s Legacy Save for Web. It seems to be the perfect balance between reducing file size without reducing quality.
Keyboard Shortcut:
Mac: [ shift + option + cmd + S ]
PC: [ alt + shift + ctrl + S ]
Menu Path:
File → Export → Save for Web (Legacy)
Here’s a quick walkthrough of how it works.
Save for Web (Watch a quick video)
How It Works:
You'll want to find a Goldilocks resolution for any images you use online. While you want images on your site to be high resolution enough to look good, you don't want them so large that they slow down the loading of the site. Around 2MB is the absolute largest a file should be when you upload it. Ideally, even a very large image shouldn't be more than 500kb.
WordPress and/or SquareSpace will also compress the image files you upload a little. But it's always best if you can keep it as close as possible to the final dimensions and orientation you want it to be. If you want the image to be square on the website, it's best to make it square before you upload it. WordPress actually creates versions in a few different sizes. Sometimes those new sizes are all you need in WordPress, sometimes not.
Photos taken on a phone or similar device will frequently be small enough that they shouldn't need additional compression in order to upload them, but other images (i.e. professional photos) will usually need to be optimized for web use.
Properly optimizing images means the compression happens on your computer rather than on the website platform. Images with smaller file size helps the page load faster. Exporting them using the Save for Web, reduces the file size without compromising the resolution or clarity in the process. We highly recommend the Legacy Save For Web function in Photoshop (keyboard shortcut [ctrl + alt + shift + s] or [cmd + option + shift + s] on Mac).
Step by Step:
Open your image in Photoshop.
Open Save for Web (Legacy) using the keyboard shortcut or menu path above.
Select JPEG from the dropdown near the top right corner. (Use PNG-24 if your image has a transparent background and you need to keep it that way. PNG-24 will produce a larger image than the JPEG option.)
Select Maximum in the dropdown right below JPEG.
Near the bottom right, set your Image Size. Make sure the linked chain indicates that the width and height are connected, and type in either a width or height and the other dimension will change in proportion. We recommend starting with a max width around 1200px - 1500px, or a max height about 800px - 1000px.
Look at the bottom left corner below the rendering of the image. It will show the estimated file size if you were to export the image at the current settings. If it’s where you want it to be (less than 1MB, preferably less than 500KB), then you are probably ready to save. If it’s still too large (1.5MB, for example), then go to the top right corner of the window and reduce the Quality setting to 95 or 90. Check the file size again and repeat until you get to a file size you’re happy with. Going to a Quality of 90 or 85 should be just fine. Once you go lower than 75, you may start to notice your image is beginning to look pixelated. If that’s the case, you may need to reduce your Image Size dimensions and then check your file size again.
Once you’re happy with the file size, click save. Be sure your file name is all lower case letters and has no spaces.
One More Quick Tip:
Did you know that browsers work best with files that have simplified names? Meaning no spaces, no uppercase letters (lowercase only!), and no special characters other than a simple dash ( - ) or an underscore ( _ ). So when you save your files, be sure to keep it simple!
More links & Other Methods:
About Photo Resizing: https://www.youtube.com/watch?v=0GLMbBBvHJ4
Using Photoshop Export As: Using Export As
Using Photoshop Elements: Using Photoshop Elements
Try searching Photoshop Legacy Save for Web in Google for more info.