Resizing and optimizing (compressing) images in photoshop

[reefrunner69]

This is a quick tutorial on resizing and compressing your images on the web using photoshop.

When exactly you should resize your image for the web, is totally dependant on your workflow, my workflow calls for resizing either first or second, depending on whether there is noise in the photo. I remove noise, then resize.

So let's get started.

Step 1) Open your image in PhotoShop

Step 2) Run any filters or actions you do prior to resizing your image

Step 3) Go to Image>Image Size The image size dialogue box should open



Here you have some choices
-make sure you have the boxes checked:
--Scale Styles
--Constrain proportions
--resample bicubic

-you can simply enter in the demension (in pixels) to one of the axis


-you can choose to resize by percent.


For resizing large images to drastically smaller images, I recommend resizing 10% at a time and applying a very small amount of sharpening every 3rd or 4th resize, for the best quality, however, most will get acceptable quality resizing in one step, so the choice is yours.



Step 4) Now that your image is resized to an acceptable size for viewing (I recommend 600 or 800 pixels on it's longest axis) you should run any filters, level and curves adjustment and finally sharpening that you want on your picture. Once the picture is the way you want it...it's time to compress the image for uploading to the web.

Step 5) Go to File>Save for the web

-your image will open up in the save for web window.
--in the bottom left corner it will give you the file size of the optimized image and download times at 28.8 kbps


--in the upper right of the window are some choices, each of these choices will effect the quality of the image and the file size. The idea is to get the best mix of file size and quality.



---for our pics, you'll most likely want to choose jpeg as your file format and stick to gif for web graphics (with fewer colors) and animations.

---The quality can be set by using the drop down menu on the left which has preset values for the quality you want, or you can fine tune the compression with the slider on the right. When deciding on the image quality settings you'll want to make sure your watching the photo (it is a live preview of how your changes effect the way the image looks) and your file size.

Things that will effect the file size are:
-how detailed and colorful is the photo...the more colors and detail in the photo the larger the file size.
-how large are the demensions of the photo...the same quality settings will give much different results for an 80600 image than it will for a 60450 image

As you can see from the screen caps, when saving at 600 pixels I use a quality setting of about 80 (higher the number the better the quality and larger the file size), too much less and you get jpeg artifact in high contrast areas.

Here is the photo I used in the screen caps, it is 105.8 kb, the starting file size of the image was a 38.4 megabyte .tiff file.

[Menagerie]

Thanks!

[stresco]

This is a great walkthrough. I've used it and the pics are looking awsome.