What's new

Image for web - quality problem


puppychew

Power User
Messages
250
Likes
9
Image for web quality problem

Hi- I took a 2 meg 2272x1704 photo of a house. I brought it into photoshop and restored it by putting in period windows, wood siding , shutters etc.

I have a before and after photo comparison to show on my blog. Both before and after images were reduced to 600 px wide. I did not change the document size resolution because I am only concerned about seeing it on the web. Both images were saved for the web. The before photo was saved at 109 kb 60% and the after at 173kb using 80% quality. I never save images for the web as high as 173kb but it is important that the final after photo look better than the before photo. Unfortunately the after picture quality is not good. The shutters are most noticeably bad.

When looking at the image in PS it is very sharp and I can easily count the shutter louvers but in the image they are fuzzy. Smart sharpen makes it worse.

Any advise?before-rehabilitation.jpgcompleted-restoration.jpg
 

IamSam

Administrator
Staff member
Administrator
Messages
19,663
Likes
12,088
Also, describe or provide a screenshot of your save for web settings.
Like this.....
sc_020.jpg
 

puppychew

Power User
Messages
250
Likes
9
screen2.jpgscreen1.jpg

Hi - Images are reversed. I flattened image then changed image size to 600width, then saved to web at a higher quality than I should. I believe all files for the web should be about 100k.
 

Tom Mann

Guru
Messages
7,223
Likes
4,342
Without seeing the "after" version at full rez and with absolutely minimal compression (ie JPG quality set to 12), I can't say anything definitive.

If you would like to post such a file, you certainly can do so in this thread. Prepare yourself: The thumbnail will look awful because the PSG upload software severely down rez'es and compresses large images to produce the in-thread thumbnail, but I will be able to click on it and download the original for close inspection. You can also zip the full rez / highest quality file and attach that to your post. This guarantees that the forum software will leave your image completely untouched.

That being said, I'm curious about your statement, "I never save images for the web as high as 173kb but it is important that the final after photo look better than the before photo.".

One should never use an arbitrary file size cutoff unless it is imposed upon you by some external source, eg, a requirement of the site to which the image is going to be posted.

Rather, if at all possible, the pixel dimensions and quality should be determined by the content and usage of the image. For example, pictures of clouds (ie, without any fine detail) can almost always be compressed much more than pictures of architectural subjects (ie, that potentially have a huge amount of fine detail).

Just a few days ago, I posted a guide to image sizing and JPG quality adjustment. You may find it of use. You will notice that THE ONLY situation for which I can condone a quality setting as low as 6 (or 60%) is:

"(b) If you are sending the file to someone who either isn't very critical, or who you know will only be looking at the image on a low resolution monitor or a smart phone, you can save space and easily go down to quality factors in the 6-8 range (on a scale of 12) with hardly anyone (in this category) ever noticing..."


As you described the uses and goals for the image under discussion, it seems that your uses clearly don't fall into this category. So, unless we find something else wrong in your workflow upon seeing the full rez, uncompressed version, it seems like the solution is very simple: use a higher JPG quality setting.

Cheers,

Tom
 
Last edited:

IamSam

Administrator
Staff member
Administrator
Messages
19,663
Likes
12,088
Tom said:
Without seeing the "after" version at full rez and with absolutely minimal compression (ie JPG quality set to 12), I can't say anything definitive.
Thanks Tom, this was the direction I was headed. I've just be painfully busy lately. Glad you jumped in on this.
 

puppychew

Power User
Messages
250
Likes
9
Hi - attached is a image saved at 12 quality.

All my work is for my website OldHouseGuy dot com It is architectural so details should be sharp.

I first flatten the image then change the image size to 600 width. (I am now switching to Word Press and will be able to have pics enlarged when clicking on them so the image size will be about 1000 wide.)

I then save to web. I read your post with the link you sent on photo quality. I think I am doing good with that when just saving - not for the web.

Some of my webpages have quite a few images so I try to keep them to under 100 kb for faster loading. There are times that I do a special picture - like this one - and really want to show that the after image looks best. I then save it in a higher quality and use up to 200 kb.

I try to start with large images 2-4 megs for they are easier to work with in PS. However it is then more difficult to make them smaller in size for the web. There are times I have to save for the web at a 40% quality to get the image as small as 120 kb.


A question about quality size. When saving I have the option for choosing quality with numbers such as 12 for highest. Do these numbers convert to % when saving for the web? Is 80% save for the web the same as 8?

Also when I change the image size, my resolution defaults to 180. I ignore that since I am not printing. Is that correct?

thanks or helping!
 

Attachments

puppychew

Power User
Messages
250
Likes
9
I think I am just afraid to have too large of an image and have it load too slow - especially when there a other images on the same page.
 

Tom Mann

Guru
Messages
7,223
Likes
4,342
Puppy - I just wanted to let you know that I've seen you last two posts, but I'm up to my ears in work. I'll try to respond to this late tonight.

T
 

IamSam

Administrator
Staff member
Administrator
Messages
19,663
Likes
12,088
Puppy, while we wait for Tom, I also believe there is not enough light and dark separation in the shutters. When you reduce their size, those slight values blend together creating more of a solid color.
 

Hoogle

Guru
Messages
8,334
Likes
2,587
I think the save for web is a bit of a rule that is out dated these these days. When you think the average household has the ability to stream HD movies online do you really think 1 image maybe 500 kbs to 1mb in size is really going to hamper the browsing experience.
maybe if you had 50+ images on a page at full resolution you may get some load time but we are really only talking seconds.

As internet has advanced jpegs replaced gifs and now pngs are replacing jpegs because of the more accurate detail png's can hold with heavily modified pixels. I think this would be your best bet to use. You can even use the png template under save for web.

Save for web option really is more for profiling and customisation ie if you slice a document and turn your psd into a website or if you are making animated Gifs.

Also you state it is for a blog so I am assuming you are using either wordpress or Joomla either way they Both have amazing CMS systems and unless your using a custom .htacess or php.ini you will find that just uploading your images wordpress will already be optimising it which could also be adding to your problem, because you will have compression on it from photoshop and then the cms compression on top of that. So if you are getting it even worse on your site than you are here maybe just try png under save as rather than save for web.
 

puppychew

Power User
Messages
250
Likes
9
Right now my website www.oldhouseguy.com is php. My blog is currently being transferred to word press and my website will also be in time. My website pages are quite long and my Shutters page has about 40 images. Quality and detail are important but I don't want to lose anyone if they have to wait for something to load.

So you're saying PNG is now the way to go. Do you recommend save to web in png format? Pnj 8 or 24? If I just save as PNG it doesn't prompt me for a file size.

My frame of thinking is that a image for the web should always be 100 kb or less. Is there any guide or rule of thumb to follow?
 

Hoogle

Guru
Messages
8,334
Likes
2,587
100 Kbs is nothing for a detailed picture but I have just been to your site and you have resized the images to fit inline with your blog.
There really is no need to upload a resized image unless your hosting is really on the budget side and you have very limited data storage. I think even most free webhosting comes with at least 2gbs of web space.

as for your site I would say upload full size image and only display the scaled down version in your post so then when people click the image they get the full sized and resolution. So for example your first image code

HTML:
<p align="center"><a title="Slide show" href="http://www.flickr.com/photos/31300792@N08/sets/72157628315023645/show/"><img title="restored-porch" style="display: inline" alt="restored-porch" src="http://lh5.ggpht.com/-nge700WZgM4/UW7O11n3sFI/AAAAAAAAAzg/H2CPfN2k2dc/restored-porch%25255B5%25255D.jpg?imgmax=800" width="432" height="328"></a>
can be changed to
HTML:
<center><iframe src="http://lh5.ggpht.com/-nge700WZgM4/UW7O11n3sFI/AAAAAAAAAzg/H2CPfN2k2dc/restored-porch%25255B5%25255D.jpg?imgmax=800">style="width:50%;height:50%"</iframe></center>

And then you can have your alternate text labels etc thrown in.

So this will grab the image at whatever resolution it is hosted on put it into an iframe and the iframe will resize the contents to 50% height and 50% width Obviously not every image will be the same rescaling if the originals are all different sized but with a bit of research you can eliminate the % fields and change them to a set Pixel size making it a lot easier. Unfortunately in this case the original image is very small.

And in answer to your question the average global broadband speed is at least 2mbs meaning that a browser can download 2000kbps which on your 100kbps a browser can download 20 images in under a second minus the other relevant data ie reading all the css style sheets and meta info embedding the background so lets take off 1 image from the total to compensate meaning an average site with 20 images and your kind of setup should load up in 1.10 seconds for the global average broadband speed.

many people have far faster so I really wouldnt be basing your whole web design on guidelines that are probably 10 years old when people were lucky to have 1mb connections.
 
Last edited:

Hoogle

Guru
Messages
8,334
Likes
2,587
Oh forgot to mention your grabbing the image from a slideshow that will dramatically reduce the resolution of your image as that will be heavily compressed so it can rotate the images through slide show smoothly. try and have a direct source for your images untouched usually in a folder on your server /images from your root directory
 

puppychew

Power User
Messages
250
Likes
9
Wow - never thought of that. I guess this works the same when I convert to Word Press.

So it is best for me to save as a PNG instead of JPEG
Save to web or regular - do I need the optimizing at all?
If I have the WP large image set to 1000 px wide for the large image if clicked on - it is ok if my image is 2200
 

puppychew

Power User
Messages
250
Likes
9
Hi - one more question if I may. If I reduce the pixel dimensions - should I also reduce the resolution? My resolution defaults to 180 and I know that is for printing only. If my image is for the web only, should I still reduce the resolution to 72 or doesn't it matter? Will the quality be different on the web?
thanks!
 

Top