Need tip w/ Photoshop when putting image onto website

[Rumble101]

Why are the images, jpg, lose its quality once I put on the internet/ webpage? When I save as JPG, I choose 5 for the compression level. It's look great on my computer, preview page from Frontpage, or even from Photoshop. But once I upload on the internet, the quality looks bad.

Photoshop has a feature that SAVE AS WEB. I don't know too much about this feature. I tested, but I don't see it much different. Maybe I'm not do it right regarding the Setting.

Any tips and description as to why certain setting was used would be appreciate since I don't know too much.

 

[viol8ion]

Are you resizing on the webpage by any chance? best bet for web use is to save at 72 or 96 PPI, and to not resize on the webpage, but to save as the size you are going to use.

Also, AOL will degrade your graphics, quite often they lok like crap the way AOHell displays them, as it uses it's own compression scheme and destroys resolution.

When in doubt, deny all terms and defnitions.

http://www.wuli.com

 

[Rumble101]

Resizing? If you mean resizing in dpi, no. But if you mean scaling the image down within the same 72 dpi, then yes.

I had a digital camara that shot at 1024x768 image size at 72 dpi. I'm using a standard canvas size 864x432 (12x6 inches) at 72 dpi. So I used the Scale command to fit different images that I had shot and fit into my standard canvas. *Of couse I cut out the background*

Once I completed all the combining images, I am then save as jpg format and choose "5" for the compression level.
The new image look great on my Frontpage webpage preview, but once it upload on the internet, it doesn't look the same.

1, I tested using SAVE AS JPG format - File is small, but the quality is aweful once upload on the internet.
2, I tested using SAVE AS WEB w/ no optimize, choose quality at 100 - File is huge, but the quality doesn't improve by much.
3, I tested using SAVE AS WEB but in GIF format - Image looks good and sharp, but the colors seem to dilute or blend out. File size isn't as big as #2.

 

[viol8ion]

Can you post a link to one of the images?

Also, 864 pixels wide is awful large for an internet image, especially if the visitor is on a dial-up connection.

For photographic images, GIF is not an ideal format. JPG is preferred, and saving at 3 or 4 for compression generally gives adequate results for web viewing.

If you are viewing the image at 400 pixels wide on the website, then resize using Image>Image Size in photoshop to the proper size.

When in doubt, deny all terms and defnitions.

http://www.wuli.com

 

[Rumble101]

Sure, here are the images:
Test 1 - Using standard Photoshop SAVE AS JPG at 5 level of compression.
File size is 39K. Image looks poor.

http://www.angelfire.com/ny5/reminator3/test/test1.jpg

Test 2 - Photoshop SAVE FOR WEB, using JPG at Max w/ 100 Quality.
File size is 210K. Image doesn't improve by much.

http://www.angelfire.com/ny5/reminator3/test/test2.jpg

Test 3 - Photoshop SAVE FOR WEB, using GIF at 128 dithered. File size is 81K.
Image is a little bit sharp and good, but the colors seemed to be blend out.

http://www.angelfire.com/ny5/reminator3/test/test3.gif

 

[dimoj]

The 100% jpeg looks perfect to me, but of course 210k is probably a little big in most cases. I'd go for a Save for web at about 75% for a general compromise.

Again the images look FINE to me.

By the way when you used 'Save for Web', did you choose the 2 Up, viewing option. That shows you a preview of what the compressed image will loo like.

 

[viol8ion]

I agree with dimoj. 210K is a bit large for web viewing ...

#3, you lose the highlights, you are working with only 128 colors, and GIF does not allows colors to blennd smoothly by its nature. Stick with JPG.

As far as #1 and #2, I would seek a compromise between the two, but you have to realize that you are dealing with 72PPI images being interpeted by a web browser, you are not going to be viewing pre-press quality graphics.

You might also run Filters>Sharpen>Unsharp mask on version 1 to increase the perceived sharpness and yet maintain the smaller file size.

When in doubt, deny all terms and defnitions.

http://www.wuli.com

 

[Rumble101]

Many thanks guys for the feedback.

Yup, I did use that 2 up view to see the differences which certainly look sharper and clearer than the one upload onto the internet.

Well, if you guy think it looks fine, I'll just stick with the smaller jpg. Thanks again.

 

[aikodude]

ppi has no meaning on the web. only pixel dimentions count.

here's an example of this... top image is 72ppi, bottom is 300ppi. Both are 800px x 600px:

http://aikodude.tripod.com/difResTest.html

rumble, the images look fine. if you're using the width and height tags in your <img> statement, don't. scale the image in photoshop first then post it at full size.

 

[viol8ion]

Bored, Milbut? No Adobe forums today, eh?

When in doubt, deny all terms and defnitions.

http://www.wuli.com

 

[viol8ion]

Oh, and I disagree with not using size tags in the <img> statement. Always use size tags so that when the page loads, the browser sizes properly even before the image loads.. but I think what Aiko is saying is to not use the size tags to resize the images. Always resize them in Photoshop to the pixel size that you want them to display at on the web page, but put those sizes in the <img> tag for a faster loading site. JMNSHO (just my not so humble opinion)!

And yes, PPI does not make any difference on web view, total pixels dictate viewing size.

When in doubt, deny all terms and defnitions.

http://www.wuli.com

 

[aikodude]

>Bored, Milbut? No Adobe forums today, eh?

yes carl, there is no santa claus today. down. toast. crispy critter. ayup.

>Oh, and I disagree with not using size tags in the <img> statement. Always use size tags so that when the page loads, the browser sizes properly even before the image loads. but I think what Aiko is saying is to not use the size tags to resize the images.

good point. that's exactly what i was saying. just like when viewing in ps itself, viewing on the web at 100% will get the best quality. when you squish it up on the page, you're not presenting the best view of your image on the page.

 

[viol8ion]

I am finally breathing a sigh of relief... approved the bluelines for a 180 page catalog that I recently completed... I always have this dread that I am going to get the bluelines and something is going to go awfully awry, but our new product catalog will be rolling off the presses by the end of the year!

I also finished updating the website with next years pricing, and for a nice xmas gift they are allowing me to finally move our site to an apache server! YES!!!!

When in doubt, deny all terms and defnitions.

http://www.wuli.com