Expert: Scott Valentine - 4/9/2008

Question
Hi Scott

I'm an English Second Language teacher who makes and uses
AV and VDO materials for my classes. Recently, I completed 250+
jpegs (Photoshop) each with embedded text and a photo slice.
These are being loaded into Flash Lite (.swf) along with 250+
companion mp3s for voice tracks to produce a 30 unit English
Conversation course for smart phones and PDAs etc.

Things went well. The 320 x 240 px optimized jpegs with an
embedded 48 pt font text went into Flash Lite and students
could read the text on their small 36 x 48 mm mobile phone
screens, make out the photo slice, and hear well.

Now we're making a website to sell the course. My idea was
to make some actual size (mobile screen size) jpegs to display
on site. However, it seems that no matter what I do to do to
the images (sharpen, contast etc.) I am not going to be able to
display on a homepage that clear resolution that the kids get on
their small Nokia screen.

Well anyway, I don't know how to get that same quality resolution.
Is it possible to get that same smartphone picture clarity on a
website that they get on their smart phones in the same sized
image? I'm not a professional so I have loads of knowledge gaps
here. What is it that I need to understand?

Any comments that you may wish to make would be much
appreciated.

Best Wishes
                             Frank

Answer
Thanks for an interesting question, Frank! This can be a tricky issue because an awful lot depends on perception. The images on the phones are no better than online, but you expect much higher quality (and the computer screen is, in fact, much higher quality), so errors are much more prominent.

By way of illustration, consider a billboard. If you were to walk up to it, you'd see the "resolution" was very poor, indeed. But they are meant to be seen quickly and from a distance. Most mobile devices hide these defects by virtue of being tiny; they are essentially very far away when compared to computer screens.

So, to solve your problem, you need to use higher quality images. Seems simple, but I realize you may not have the originals available to you. I'm afraid the best solution might be for you to shoot a few more images specifically for your website. Keep these at relatively high quality, then shrink the dimensions down to give a simulation of what the mobile screen shows.

There are a number of advanced tricks to help with this kind of simulation, especially if you want to depict an image actually being viewed on the device itself. If you wish to do something like this, I'll point you to the following forum where you can get hands-on help:

http://photoshoptechniques.com/forum

Those folks will be able to take a look at your images (if you wish to post a sample) and give you a very good idea of what your possibilities may be. If your images can be recovered well enough to work, they will be able to figure it out.

Please let me know if I can be of further help, or if you would like some clarification. The task may be more simple than I've described above, but without seeing your photos, it is very difficult to give anything more concrete.

Best of luck with your venture!

-Scott