How to Reduce Image Size for a Website in Photoshop
Create a copy of your original image file and file your original somewhere safe., Decide how large you'd like your image to appear on the screen., Select "Image Size..." from the Image menu., Ensure that "Scale Styles," "Constrain Proportions," and...
Step-by-Step Guide
-
Step 1: Create a copy of your original image file and file your original somewhere safe.
You'll be working from the copy in order to protect your data. -
Step 2: Decide how large you'd like your image to appear on the screen.
Typical websites are roughly 800 pixels wide, but different display settings and sizes can have a large impact on your images' appearances.
For instance, if you are using a 1024x768 pixels setting, an 800-pixel wide image will stretch across roughly 80% of the computer screen.
If your monitor is set to 1280x1024 pixels, the same image will stretch across roughly 60% of the screen.
Remember that browsers such as Safari, Firefox, and Internet Explorer have their own status bars, toolbars, borders, and settings. , The Image Size dialogue box will pop open. , Leave the pull-down menu set to "Bicubic."
For Websites, use pixel dimensions.
Leave the pull-down menus set to "pixels" and fill in either the "width" box or the "height" box
- the other box will be filled in automatically because you have "constrain proportions" checked. , Your altered image will now appear.
Under the View menu, select "Zoom In" or "Zoom Out" until the image size reaches 100%. (The bottom left of the window will tell you the percentage size.) That's it! -
Step 3: Select "Image Size..." from the Image menu.
-
Step 4: Ensure that "Scale Styles
-
Step 5: " "Constrain Proportions
-
Step 6: " and “Resample Image” are ticked.
-
Step 7: You have two options for sizing your image now: "Pixel Dimensions" and "Document Size."
-
Step 8: Click "OK".
Detailed Guide
You'll be working from the copy in order to protect your data.
Typical websites are roughly 800 pixels wide, but different display settings and sizes can have a large impact on your images' appearances.
For instance, if you are using a 1024x768 pixels setting, an 800-pixel wide image will stretch across roughly 80% of the computer screen.
If your monitor is set to 1280x1024 pixels, the same image will stretch across roughly 60% of the screen.
Remember that browsers such as Safari, Firefox, and Internet Explorer have their own status bars, toolbars, borders, and settings. , The Image Size dialogue box will pop open. , Leave the pull-down menu set to "Bicubic."
For Websites, use pixel dimensions.
Leave the pull-down menus set to "pixels" and fill in either the "width" box or the "height" box
- the other box will be filled in automatically because you have "constrain proportions" checked. , Your altered image will now appear.
Under the View menu, select "Zoom In" or "Zoom Out" until the image size reaches 100%. (The bottom left of the window will tell you the percentage size.) That's it!
About the Author
Teresa Perry
Writer and educator with a focus on practical home improvement knowledge.
Rate This Guide
How helpful was this guide? Click to rate: