What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

resizing for the Web


johnnyg

Member
Messages
6
Likes
0
Hi, I'm new here and this is my 1st post in regards to a question. Could someone please help me out with a tutorial or easily explain the best way to shrink an image for the Web(drop box, Facebook etc) with out loosing the quality? I find when I shrink my large files alot of them seem to get a halo effect through the image and loose all sharpness. In saying that I only shrink the file when saving(file then save as) and use the file size slider after the image is changed to jpeg. I'm guessing this is the problem
 

Tom Mann

Guru
Messages
7,223
Likes
4,343
From your description, it sounds like you were trying to use the JPG "quality" slider as a method to reduce the file size.

If I am correct, and that's what you were doing, you need to know that method only works up to a point.

That method only changes the amount by which the image data is compressed. Compress it too much, and it will look horrible. For reasonable quality pix (at any size), one should never set the JPG "quality" (aka, "compression") slider below, say, "6", and for any image that will be examined closely, never below "8" or so.

Instead, what you need to do is change the number of pixels in your image to fit the space on the web page where the image is going. For example, Facebook provides a cheat sheet that tells users exactly how big (...in number of pixels in each direction) each type of image should be:
https://www.facebook.com/PagesSizesDimensions

You need to adjust the pixel dimensions of your image to fit the space FB allows, not by adjusting the JPG quality / compression factor to very low values.

To change the pixel dimensions of your image using PS, go to the "Image" drop down menu and click on "Image Size". Set the units to be pixels, not inches or percent, put a check mark in the "Resample" box, and type in the longer of the two dimensions provided by FB.

Save the result (using "Save As") with a new name so you don't over-write your original file. When prompted, make sure the JPG quality factor is reasonably high.

The above procedure should get you quite close to what you need.

BTW, you may run into a problem if the shape of your image is different from the shape of the space provided on the web page. For example, you have a rectangular image, but the space provided is square. If that is the case, you need to "crop" your image before resizing it. That's a whole other discussion.

Again, let me reiterate that all of the above was based on my assumption that you were using the JPG quality slider as your method of reducing file size. If this isn't the case, let me know.

HTH,

Tom M
 

johnnyg

Member
Messages
6
Likes
0
Thanks guys and tom I believe this is what I have been doing. The jpeg slider I mean:) would it be silly to assume each site on the web shares a similar file size compression ratio or would they all be different? I mean would a photo resized using this method work for Facebook say then still be no good for another site? Thanks for the speedy replies and I hope what I'm saying makes sense to you guys:)
 

Tom Mann

Guru
Messages
7,223
Likes
4,343
Stop thinking about the JPG quality slider. Just leave it at 8 or 9 and you will be fine, assuming you first get the pixel dimensions cut down to size (ie, using the technique I described in my previous post).

Tom M
 

johnnyg

Member
Messages
6
Likes
0
Ok thanks. I won't have access to my computer for a week so I'll try that when I get home. Will let you guys know if any issues. Thanks again
 

mdyusuf

Well-Known Member
Messages
79
Likes
15
Google is better for this work, but I'm always using tinypic it's not bad my company clipping path specialist always using tinypic.
 

Tom Mann

Guru
Messages
7,223
Likes
4,343
Really? Some unspecified program made by Google is better than Photoshop for resizing? Please let us know the actual name of this program, and then, please compare the various re-sizing algorithms and options it supports compared to the many different resizing algorithms and options available for the same task in Photoshop.

I make essentially the same comment about Tinypic, except since I can look up this on-line service myself, I can tell you that Tinypic provides no options or adjustments other than final size, whereas PS provides a wide variety of different resizing algorithms and adjustments for each.

I can also state unambiguously that the optimal resizing method depends on the image being resized, so if no options are offered, Tinypic will rarely be optimal. IMHO, services like that are only for people who either aren't very critical about the results, don't know much about alternatives, or don't have a copy of PS, GIMP or any other advanced image editor.

Tom M
 

Top