Tips For Photos on the Web

JR
Posted By
J_Robert_Ward
Nov 6, 2003
Views
587
Replies
35
Status
Closed
Before scanning several photos to be put on the web I would appreciate some guidance.

I plan to scan at 640 x 480 pixel and then using ‘save for the web’ compress to JEPG either medium or low.

There will be a maximum of 200 images grouped in 4 classifications.

Thumbnails will be incorporated and when clicked a larger image will appear on the screen.

Questions:
Are 200 images too many which will create too long a delay opening site?

Is 640 x 480 an appropriate scan?

As you can tell I do not have web experience and any tips would be helpful.

Robert

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

BH
Beth_Haney
Nov 6, 2003
When I read your post, more questions than answers come to mind! Starting with, "Who’s your audience?"

My internet connection and computer aren’t state of the art, but they’re probably both faster than what the average user has. I doubt I’d have the patience to sit and wait for 200 thumbnails to load or – assuming the classifications are equal in size – even 50. I’d have to be mighty commited to seeing what you’ve posted.

The physical size of the images sounds OK to cover a range of monitor resolutions.

Is there a way you can break this project into smaller chunks to minimize the download time for given groups of pictures?

And, Save for Web will do a nice job of resizing the large images, but how are you going to create the thumbnails and then link them? Have you played with the Web Photo Gallery, which generates thumbnails and larger images that are already linked? You can choose your own size for both , and the images are customized for web viewing.

And I also think about 200 scans. Are these pictures small enough so you could scan them in groups and then let Elements do the resizing?
JR
J_Robert_Ward
Nov 6, 2003
Beth

Thanks for your reply.

You have given me more food for thought.

Robert
LK
Leen_Koper
Nov 6, 2003
I did not count the images, but I suppose there are several hundreds on my website. It is just a matter of not showing all images on one page, but to split it up into several subgroups.

To give an idea, click on my name in the header of this message and you will see my URL.

Leen
AM
Al_Millstein
Nov 6, 2003
Robert-

I don’t claim to be the greatest expert, but have played with my website considerably in the past couple of years.

I think the content and size of your home page (index page)is the determining factor in how long it will take for someone’s computer to open up your web site. You can design that page with links- thumbnails or other, that will lead to other segments of your entire web site.

As to photos, the idea is to downsize each final jpeg to the lowest practical size to give a clear picture, without loading up the kb’s; e.g. target the optimum monitor resolution of 72 pixels per inch, or perhaps 96 pixels per inch for a bit better screen quality. Final size of a substantial picture might typically be 35 or 40 kb’s resulting in a reasonable download time. You can show each enlarged picture in full page size with it’s own page, said page containing links back to other locations on the web site.

Are you using an editing program to create web pages? The web pages are written in the language of html, which has a complicated learning curve, but many programs write the html content for you, eliminating the need to learn it. For example Netscape offers a free program called Composer that will do it. More and more programs today write pages in html. I recently acquired Word Perfect 11 with my new computer, and it goes a long way in writing html pages (Pages suitable for displaying on the web).

Beth’s suggestion of breaking the entire website into many chunks, with links to each, sounds like the way to go to keep the download time of each page or segment to a minimum.

Al
BH
Beth_Haney
Nov 6, 2003
I just looked at your site, Leen. When I went through the Gallery area, it looked as though you had a total of 71 images on nine pages. Each page of thumbnails loaded very quickly, so an arrangement like this works very nicely for someone like me. (And they’re very nice pictures, too, I should add!)
AM
Al_Millstein
Nov 6, 2003
Robert-

Also learn about using Tables for web page design. Keeps the layout of pages under ocntrol.

See mine at empirejournal.com

Al
LK
Leen_Koper
Nov 6, 2003
So that visitor was you, Beth….
Just kidding, you were one of the 10.700 visitors this year. 😉

But there are more images than just only 71. A quick count learnt me there are a little over 400 in various gallerys and each gallery has several pages of 8 images each.

Thanks for the compliment. Sometimes words like these make your day – and today I needed it badly. Just one of those days.

Leen
J
jhjl1
Nov 6, 2003
I am a bit confused. What would ppi have to do with screen display? I thought that would only come into play if the images were printed. I have posted 4 pictures that are identical except for the ppi. They are at 72ppi, 180ppi, 300ppi and 1000ppi. I can see no difference in display or file size.
http://www.pbase.com/myeyesview/elements_group_test_
Am I missing something?


Have A Nice Day,
jwh 🙂
My Pictures
http://www.pbase.com/myeyesview
wrote in message
Robert-

I don’t claim to be the greatest expert, but have played with
my website considerably in the past couple of years.
I think the content and size of your home page (index page)is
the determining factor in how long it will take for someone’s computer to open up your web site. You can design that page with links- thumbnails or other, that will lead to other segments of your entire web site.
As to photos, the idea is to downsize each final jpeg to the
lowest practical size to give a clear picture, without loading up the kb’s; e.g. target the optimum monitor resolution of 72 pixels per inch, or perhaps 96 pixels per inch for a bit better screen quality. Final size of a substantial picture might typically be 35 or 40 kb’s resulting in a reasonable download time. You can show each enlarged picture in full page size with it’s own page, said page containing links back to other locations on the web site.
Are you using an editing program to create web pages? The web
pages are written in the language of html, which has a
complicated learning curve, but many programs write the html content for you, eliminating the need to learn it. For example Netscape offers a free program called Composer that will do it. More and more programs today write pages in html. I recently acquired Word Perfect 11 with my new computer, and it goes a long way in writing html pages (Pages suitable for displaying on the web).
Beth’s suggestion of breaking the entire website into many
chunks, with links to each, sounds like the way to go to keep the download time of each page or segment to a minimum.
Al
B
bethC
Nov 6, 2003
Hi Leen – I checked your site out too. 🙂 It is a wonderful site, fast loading and great pictures! I enjoyed it and thanks for sharing.

Hi Al – I checked your site. Definitely Adobe Page Mill seems to be a good html editor although I’ve not tried it. Good site – just one comment – the index page doesn’t have any title. I’ve never been to Empire Michigan, but it looks like a great place. I did stay one summer at Saginaw Bay/Lake Heron.

Robert, pictures for the Internet… Thumbnails 100 x 100 72 dpi. Full size pictures can be any width and height but total size should not be more than 50kb and use 72 dpi for the Internet. This is the general rule if your target audience uses dial-up. The loading time should not be more than 30 seconds for dial-up users. This is only a guideline, but saves a lot of frustration for dial-up users if you keep these guidelines in mind. Also splitting the number of thumbnails per page and showing the large picture on a separate page as already suggested is the good and necessary if you keep the loading page to under 30 secs.

beth
J
jhjl1
Nov 6, 2003
Hello Beth. Would you be so kind as to respond to my post earlier in this thread with the questions to Mr. Millstein. I see your recommendation for 72 dpi here, are you using dpi and ppi interchangeably? Based on my experiment shown in earlier post I do not see the difference. Thanks.
http://www.pbase.com/myeyesview/elements_group_test_


Have A Nice Day,
jwh 🙂
My Pictures
http://www.pbase.com/myeyesview

wrote in message
Hi Leen – I checked your site out too. 🙂 It is a wonderful
site, fast loading and great pictures! I enjoyed it and thanks for sharing.
Hi Al – I checked your site. Definitely Adobe Page Mill seems
to be a good html editor although I’ve not tried it. Good site – just one comment – the index page doesn’t have any title. I’ve never been to Empire Michigan, but it looks like a great place. I did stay one summer at Saginaw Bay/Lake Heron.
Robert, pictures for the Internet… Thumbnails 100 x 100 72
dpi. Full size pictures can be any width and height but total size should not be more than 50kb and use 72 dpi for the Internet. This is the general rule if your target audience uses dial-up. The loading time should not be more than 30 sections for dial-up users. This is only a guideline, but saves a lot of frustration for dial-up users if you keep these guidelines in mind. Also splitting the number of thumbnails per page and showing the large picture on a separate page as already suggested is the good and necessary if you keep the loading page to under 30 secs.
beth
LM
Lou_M
Nov 6, 2003
James: Yeah, dpi/ppi has no meaning to a web browser. All it cares about it is x pixels wide by y pixels high.

Awesome photos, Al.
J
jhjl1
Nov 6, 2003
That is what I thought. Why are other posters recommending the OP use 72-96 ppi or 72 dpi?


Have A Nice Day,
jwh 🙂
My Pictures
http://www.pbase.com/myeyesview
wrote in message
James: Yeah, dpi/ppi has no meaning to a web browser. All it
cares about it is x pixels wide by y pixels high.
JD
Juergen_D
Nov 6, 2003
James,

There have been very exhaustive discussions about 72ppi on this forum. A recent thread is here:
http://www.adobeforums.com/cgi-bin/webx?13@137.GwZNbdQpCwY.3 @.2ccdef87/0 Check it out and you will see that the ppi number is irrelevant for the monitor display.
Also, look at this article: http://www.scantips.com/no72dpi.html

Juergen
BG
Byron_Gale
Nov 6, 2003
James,

There are still many individuals who have not learned that dpi is meaningless when displaying an image on a monitor. The 72/96-ers are simply repeating what they’ve been told is a basic fact. They just haven’t been given enough information, yet, to understand the truth.

We disciples of Adobe, though, have had the scales fall from our eyes, and are enlightened with regard to the myth of dpi on a monitor.

You say that you, yourself, have proved the point. What more evidence do you need?

(BTW, when following the link to your dpi-variation example, Pbase responds "Non-existent gallery specified in URL. Displaying myeyesview’s root gallery.")

Byron
J
jhjl1
Nov 6, 2003
Thanks for the info. Why is the 72 ppi myth still being
perpetuated in this newsgroup? Was there no
consensus on the matter?

Have A Nice Day,
jwh 🙂
My Pictures
http://www.pbase.com/myeyesview
wrote in message
James,

There have been very exhaustive discussions about 72ppi on this
forum. A
recent thread is here:
http://www.adobeforums.com/cgi-bin/webx?13@137.GwZNbdQpCwY.3 @.2ccdef87/0
Check it out and you will see that the ppi number is irrelevant
for the
monitor display.
Also, look at this article:
http://www.scantips.com/no72dpi.html
Juergen

J
jhjl1
Nov 6, 2003
wrote in message

You say that you, yourself, have proved the point. What more
evidence do
you need?

I do not think I said that. I believe I said that I did not see a difference. My point was that I did not think it mattered at all and if it did I wanted to know how or why. If it didn’t, I had hoped to help the posters to see that without being argumentative or offensive to them.

(BTW, when following the link to your dpi-variation example,
Pbase responds
"Non-existent gallery specified in URL. Displaying myeyesview’s
root
gallery.")

The link worked for me. I will try again.
http://www.pbase.com/myeyesview/elements_group_test_
If it displays the root gallery again just click on the last gallery shown.

Thanks,
James

BH
Beth_Haney
Nov 6, 2003
James, could you please turn off auto quote? I’ve been having a really hard time following these posts because of all the repeated messages, with responses sometimes buried in the middle and sometimes not! Thank you! 🙂

In response to your questions about the value of 72ppi, I , too, think that information is somewhat dated, now that there is such a wide range of monitor types, resolutions, software options, etc. However, on the other hand, it’s often quite a useful "rule of thumb" for people brand new to digital imaging and web site work. Maintaining a resolution of 72ppi may not be necessary, but it doesn’t do any harm, either. It’s like quite a bit of the information handed out on the forum – conservative so the newcomers can produce acceptable results right away. Once people learn the ins and outs of something, they often customize to suit their own tastes and workflow.
J
jhjl1
Nov 6, 2003
For an Outlook express user what auto quote be the equivalent of "include message in reply"?


Have A Nice Day,
jwh 🙂
My Pictures
http://www.pbase.com/myeyesview
BG
Byron_Gale
Nov 6, 2003
James,

wrote
I do not think I said that. I believe I said that I did not see a difference.

My apologies for characterizing your remarks. I should have said *I* think you have proved it for yourself.

The link worked for me. I will try again.
http://www.pbase.com/myeyesview/elements_group_test_
If it displays the root gallery again just click on the last gallery shown.

No difference in the behavior of that link. I click it, and end up at "all galleries" page. Success when I click on the last gallery thumb, though.

Byron
J
jhjl1
Nov 6, 2003
No apology necessary.


Have A Nice Day,
jwh 🙂
My Pictures
http://www.pbase.com/myeyesview
CS
Chuck_Snyder
Nov 7, 2003
jwh: Yes, that would be the equivalent in Outlook Express. What I usually do is just write my response, then select the previous message and hit delete. That way, I still have ‘include message in reply’ working for e-mails where I do want to include the message to which I’m responding.

Chuck
CS
Chuck_Snyder
Nov 7, 2003
Beth, I understand what you’re saying, but I think the real understanding of what’s going on with screen images happens when one realizes that it’s not about ppi at all, but rather about pixel dimensions – that was certainly an "AHA!" for me and I thank Mac MacDougald for getting that through my thick skull….!

On the printing side, most of us have experienced at least once the waste of good paper and ink that takes place when you leave ppi at 72 and change the document size (inch dimensions) with resampling checked on…. I just wish the program would start with the Image<Resize<Image Size dialog showing a decent-size number like 200 ppi, so if you did mistakenly resize with resampling checked on, you’d still get a decent print…

Chuck
AM
Al_Millstein
Nov 7, 2003
Chuck-

Read back to what I wrote in this thread. Illuminate me.

Al
CS
Chuck_Snyder
Nov 7, 2003
Al, will do! Well….at least I’ll read back…not sure how good I’ll be at illuminating….

😉

Chuck
CS
Chuck_Snyder
Nov 7, 2003
Al, I read your post (#4 of this thread) and I agree with most of what you said; where I differ – predictably – is in the use of 72 ppi or 96 ppi in describing screen images. In viewing a website, the size of the image that appears on the screen is a function of its pixel dimensions; if the image has dimensions of 800 pixels wide by 600 pixels high, it’s going to fill a big chunk of the screen set for 1024 by 768 – or all of a screen set for 800 by 600. That will be the same whether it’s a 15-inch monitor at 1024×768 or a 21-inch monitor at 1024×768. Yes, the picture will be bigger on the 21 inch monitor, but the same number of pixels will appear on each screen; the pixels on the 21-inch monitor will just be a good bit bigger and the ppi will actually be lower (I think…).

When preparing images for screen view, I would pick the percentage of the screen I wanted to fill, then set the pixel dimensions to make that happen. If 800×600 filled the screen and I only wanted to fill 25% of the screen, I would set my dimensions to 400 pixels by 300 pixels. I guess I could accomplish the same thing by starting with an 800×600 image and lowering the ppi by 25% with resample checked on; in either case, at the end of the process, I would wind up with an image of the target pixel dimensions – 400×300.

I can see where it might be helpful to think in inches and ppi rather than pixels; so long as one doesn’t try to make the inches come out exactly, something in the 72-96 ppi range will give a reasonable approximation. But for me, it’s easier to perceive the monitor as a grid of squares of pixel (not inch) dimensions. I know how many squares wide and high I want to fill, so that’s what I specify.

FWIW, that’s my thought process.

Chuck
AM
Al_Millstein
Nov 7, 2003
Chuck-

I want to re-evaluate my understanding, if my thinking is wrong. At first blush, I don’t think there is a contradiction in the way you explain it, and the way I formulated it.

Put it this way:

Decide how many inches you want your picture to be, relative to the monitor setting, say 1024 by 768. If the monitor is roughly 12 inches wide (15" nominal monitor size), you decide you want your picture to be 8 inches wide. At that monitor setting, your picture should come out something like 8/12ths of 1024, or 682 pixels wide.

If you set the resizing of your picture to a width of 8 inches at 72 ppi, then you have conformed to the idea that the monitor renders a visual image at no more than 72 ppi (or arguably 96 ppi). Therefore you have sized your image to the capability of the monitor, while holding your file size down to the minimum, for shortest website download time.

Of course, if you multiply 8 inches by 72, you get 575, which is not 682, but it’s more or less in a similar ballpark. I would attribute the difference to inexactness in my calculations of monitor size, etc. That difference can be adjusted by experimentation.

What do you folks think? Am I nuts, or do I make any sense?
CS
Chuck_Snyder
Nov 7, 2003
Al, makes sense – just another way to do the same math and especially good if you really like to work sizes in inches instead of pixels (which certainly is how we were trained before digital came along). Stick with it – it works!

🙂

Chuck
EW
Ed_Wurster
Nov 7, 2003
wrote in message…
Before scanning several photos to be put on the web I would appreciate
some guidance.
I plan to scan at 640 x 480 pixel and then using ‘save for the web’
compress to JEPG either medium or low.
There will be a maximum of 200 images grouped in 4 classifications. Thumbnails will be incorporated and when clicked a larger image will
appear on the screen.
Questions:
Are 200 images too many which will create too long a delay opening site? Is 640 x 480 an appropriate scan?
As you can tell I do not have web experience and any tips would be
helpful.
Robert

Hello Robert.

I’ve read most of the replies. I know that you have come to an undersanding of how many pixels you want displayed on the web page (or screen.)

Is it clear that you may want to capture more pixels than you can display?

For instance, you mention scanning 640×480 pixels (72 ppi). When I scan photos I use much higher settings, so that I can capture more detail from the photo. I may end up with a scan that is 4x’s larger (say 2560 x 1920 – the exact numbers are number important.)

If you scan at higher resolution, you capture more detail.

Then, in Photoshop Elements, I adjust, and save for web. Make sure you change the "new size" by entering a value for percent. In my example it would be "25" %. Then you can investigate the JPEG quality settings, and watch how the file size changes.

Ed
J
jhjl1
Nov 7, 2003
Good morning Al. Everything you said about inches is fine. The ppi is irrelevant. You can have that eight inch wide picture at the 72 ppi you mentioned or at 1000 ppi and the file size on disc and on screen would be the same. The picture would look the same on the monitor. I went to a lot of trouble to create and size 4 pictures to do a sample for you yesterday so that you could see for yourself that ppi does not matter.
http://www.pbase.com/myeyesview/elements_group_test_ (click on elements group test gallery) . I am assuming I upset you in some way as you did not bother to reply to my questions to you or to comment on the four pictures posted as an example for you. If I did something that caused you to become PO I am sorry.


Have A Nice Day,
jwh 🙂
My Pictures
http://www.pbase.com/myeyesview
wrote in message
What do you folks think? Am I nuts, or do I make any sense?
CS
Chuck_Snyder
Nov 7, 2003
For those who want to work in ppi but want a resolution that gives them an exact match between what the image size says and what it actually measures on the monitor (using a ruler), here’s a test you can do.

1. Start Elements. Open a new blank image with dimensions 5 inches by 5 inches by 72 ppi.
2. Using the Zoom tool, set the display to 100%. Make sure the edges of your image are showing (no scroll bars)
3. Measure the length or width of the image with a ruler.
4. Compare the measurement with what you set as Image Size. (On my first
attempt, the image measured 4 3/4 inches in width while the Image Size box said it should be 5 inches.
5. Go to Image<Resize<Image Size and increase or decrease the ppi based on whether the actual was larger or smaller than 5 inches. Hit OK and re-measure. (In my case I increased ppi to 80 and the image size as measured by the ruler jumped to ~5 1/4 inches)
6. Repeat with another ppi until the image measured by the ruler is exactly 5 inches in width. (In my case that happened at 75 ppi)

Therefore, I conclude that with my monitor set to 1024×768 resolution, the ppi to give me exact inch measurements for MY monitor (not necessarily anyone else’s) is 75 ppi. Just for fun, I might try it at 800×600 resolution to see what I get.

So the magic number here is 75!

Just did it for fun, but hope it helps with the concept.

Chuck
J
jhjl1
Nov 8, 2003
I vowed not to touch ppi in this newsgroup again with a ten foot pole so I’m not about to use a 12 inch ruler.(LOL) I have apparently been blackballed by Mr. Millstein for attempting to shed some light on a subject that seems murky to many. Are there any other taboo subjects in this group? On the subject of resizing I am not as exact as many. My method is to open the image in question and zoom until it looks right on my (average) screen and then check the percentage shown in the window. I now click image>resize, and change it to that percent amount.


Have A Nice Day,
jwh 🙂
My Pictures
http://www.pbase.com/myeyesview

wrote in message
For those who want to work in ppi but want a resolution that
gives them an
exact match between what the image size says and what it
actually measures
on the monitor (using a ruler), here’s a test you can do.
1. Start Elements. Open a new blank image with dimensions 5
inches by 5
inches by 72 ppi.
2. Using the Zoom tool, set the display to 100%. Make sure
the edges of
your image are showing (no scroll bars)
3. Measure the length or width of the image with a ruler.
4. Compare the measurement with what you set as Image Size.
(On my first
attempt, the image measured 4 3/4 inches in width while the
Image Size box
said it should be 5 inches.
5. Go to Image<Resize<Image Size and increase or decrease the
ppi based on
whether the actual was larger or smaller than 5 inches. Hit OK
and
re-measure. (In my case I increased ppi to 80 and the image
size as measured
by the ruler jumped to ~5 1/4 inches)
6. Repeat with another ppi until the image measured by the
ruler is exactly
5 inches in width. (In my case that happened at 75 ppi)

Therefore, I conclude that with my monitor set to 1024×768
resolution, the
ppi to give me exact inch measurements for MY monitor (not
necessarily
anyone else’s) is 75 ppi. Just for fun, I might try it at
800×600 resolution
to see what I get.

So the magic number here is 75!

Just did it for fun, but hope it helps with the concept.
Chuck

AM
Al_Millstein
Nov 8, 2003
Hey, jwh, relax.

Nobody on this forum takes offense, and I certainly would never blackball anyone for raising an issue, even if I could.

Basically we’
re mostly a bunch of tree huggers; we also love people, especially each other and you are certainsy included.

I appreciate your raising an interesting issue, and it allows me to reconsider my own thinking on the subject.

When I get a chance I will play around with this some more, and possibly post another comment.

Peace.

Al
J
jhjl1
Nov 8, 2003
Glad to hear that. I thought I had struck a nerve and have reread every post trying to determine when or how. I thought by posting the examples I was in some way helping to demystify the ppi issue. I believe your lack of response to a direct question led me to feel that I had upset you in some way. I also realize that we all have the right to respond or not to whomever we please.


Have A Nice Day,
jwh 🙂
My Pictures
http://www.pbase.com/myeyesview

wrote in message
Hey, jwh, relax.

Nobody on this forum takes offense, and I certainly would never
blackball anyone for raising an issue, even if I could.
Basically we’
re mostly a bunch of tree huggers; we also love people,
especially each other and you are certainsy included.
I appreciate your raising an interesting issue, and it allows
me to reconsider my own thinking on the subject.
When I get a chance I will play around with this some more, and
possibly post another comment.
Peace.

Al
NS
Nancy_S
Nov 8, 2003
jwh,

That is indeed a novel approach… independent thinking.

Nancy
AM
Al_Millstein
Nov 8, 2003
On further reflection, I like the epithet "tree huggers"

You all know who you are.

Al

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

Related Discussion Topics

Nice and short text about related topics in discussion sections