Images on web look a little blurry

[Trishe]

I prepare my photos in PS CS2. I use output sharpening for the web. In
Publisher they look fine, but on the web they look a little blurry. Why is
this and any suggestions on how to correct? Also, what is the optimum file
size to use?

(Saw the link about compression "Compress graphics file sizes to create
smaller Publisher Web pages"...also vml/allow png are unchecked in
P2003...will look at applying info.)

Thanks!

Trish

 

[DavidF]

Pub 2003 makes copies of the images that you insert into the web page when
you convert to html. The theory is that the "best" copy will be rendered
depending upon which browser is used to view the page, and the image...with
dubious results.

For example it appears that you optimized your images in Photoshop to 72
dpi. If you view your home page in IE, then this is the image that is
displayed:
http://www.trishephoto.com/index_files/image314.jpg
That image is 850 X 1269 at 72 dpi and is 553 KB in size, and takes a little
over 2 minutes to load with my dial-up connection. However in FireFox, this
is the image that you see:
http://www.trishephoto.com/index_files/image3141.jpg
That version of your image is 271 X 401 at 96 dpi and is only 21 KB in size.
A much better, faster loading size.

If you want faster loading and better quality images and want to
insert/embed them in your Pub page, then start with an image that has been
optimized for 96 dpi, and resized in Photoshop so that you can insert the
image full size...100% scale. Use as much compression as possible to get
good quality but small file size...fast loading images. You might start with
~30% compression and see what that gives you. When you "Publish to the Web"
and produce your html the image will not be changed during the copying
process, and you will get the same image for both IE and FF.

If you insert an oversized image into a Pub page image box, and use the
Compress graphics feature, then Publisher will resample and resize the image
for you. If you started with a 72 dpi image, then it will convert it to a 96
dpi at the size of the image box on your page. This is a faster way to go,
but your image quality might not be quite as good as if you had done the
optimizing and sizing before you inserted it. This is especially true if
your original image that you optimize in PS is at a higher dpi to begin
with. And yes, be sure to uncheck "Rely on VML..." and "Allow PNG...".

For the most faithful rendition of your image, you can import the image into
the page vs. embedding it, and thus bypass the html coding engine in
Publisher. You will get what you produced in Photoshop. This requires a bit
more work, and the difference in quality may not be worth it, but given your
site is about photography, it might be in your case. Let me know if you want
instructions on how to import your images, but try the information above
first. You might be satisfied with that and its faster.

DavidF

 

[Trishe]

Wow, thanks for the detailed response! I was under the impression that 72
dpi was what I should use. I can easily create an action in PS to do what
you suggest.

Previously I was taking an image @ 72 and scaling the photo in Pub to fit
the design. Since I will be preparing the files in PS for insertion at 100%
how do I know what size to make them? Is there and easy way to tell the
dimensions of the scaled photo in Pub? Why is it that in "Graphics Manager"
an image that I prepared at 72 is showing as Effective resolution as 147dpi?
(The inserted image when imported, was always very large until I scaled it
down.)

Unclear about "insert" in Pub and import/embedding...

Again, thanks for your help!

Trish

 

[Trishe]

David...I found the answer to my size question in Pub...just needed to go to
Format>picture>size. DAH.

 

[DavidF]

Yes, optimizing images to 72 dpi is the standard approach and in Photoshop
Elements at least, when you use the web image optimizing feature, it does
create a 72 dpi image by default. However Publisher outputs everything to 96
dpi in web mode. So if you start with a 72 it converts it to 96 dpi. Also,
right click your desktop > Properties > Settings > Advanced. Chances are
your monitor, and most, are set to 96 dpi. That is why Pub defaults to 96.

As I said, you could import your images, but the improved quality is
probably not worth the extra effort if you are optimizing your images at 96
dpi and the same dimensions as the picture box will be. I usually layout my
pages, insert my original images before taking the time to optimize them,
size the picture boxes appropriately for the layout, then look to the
Graphics Manager to see what the dimensions are. If they are an odd number,
such as 271 pixels wide, I might resize and optimize my image in PS to 270
wide... at 96 dpi, and then after inserting the image, go to format > format
picture > Size tab and change the scale to 100%, which will automatically
resize the image box to fit the 270 pixel wide image.

Along the same lines, I have found that I have some "standard" sizes of
images that I use in my site. I have thumbnails at 100 and 150 pixels wide.
I have "full" sized images at 480 and 640. When I layout my pages I plan my
images accordingly, and try to avoid all the slightly odd dimensions. It
makes it easier when I go to my image editor and resize my images.

Try optimizing and sizing your images at 96 dpi and inserting them, and
using the compress images feature, and if you are still not satisfied with
the quality of the images, post back and we can discuss the option of
importing the images instead of embedding them.

DavidF

 

[Trishe]

Thanks again...very helpful! Will definitely use your suggestions.

Trish

 

[DavidF]

You are welcome. I will be interested in how it comes out.

One more tip while I am at it. If you want to add shadow or any other
special effects to images, do it in your image editor before you insert it
in a Pub webpage. Don't use the effects in Publisher. This is one of those
print formats that does not translate to html...

Make that two... you should also take the time to download and install
FireFox, at least for testing your web pages, if you haven't already. You
should design your pages so that they look good in IE and FF.

Don't forget to have fun...

DavidF

 

[Trishe]

Fun...Will do. I'll let you know how things go, especially when I have more
pages up. Since I shoot a variety of subjects I will have a page for each:
portraits, weddings etc. Each page will have a link to a gallery (I have
been using jalbum, works great), and PDF info.

thanks again.

Trish