Questions about high-res pictures in a web page.

Hey there,

I've been making a website over the past few days for my father, who is a photographer. His photos are extremely high-res tiffs, (over 50mb each) and currently, i have over 18 of them on my website.

However, when I preview the whole website, they drastically lose their quality, to the point where you can't zoom in on them without them becoming blurry. However, in the actual Xara web designer 7 program, they are at full quality.

This leads me to ask my two questions:

1) Is the preview of the webpage a lower quality than what the actual finished product will be? To rephrase that, will the photos be full-res when the website is published, and they're just being displayed in a compressed way during the preview?

2) Why is it that although there are over 18 pictures of 50mb each, totalling over 900mb, the size of the website file on my desktop is only 350mb? This leads me to believe that the files are being compressed, which, as an artist, he can NOT have. The files on the web page need to remain full resolution TIFs.

Any help would be greatly appreciated, thank you.

50MB files! You're dad won't have many visitors willing to wait for that to load. Size the images to the max size you want them to display on the website. Right click and optimize at 96ppi, jpg. Then upload. Should display fine.

Hi Quinton, welcome to Talkgraphics.

Technology and web browser design prevent TIFs from being displayed. Browsers support jpg, gif, and png for display on web pages. The png file format with truecolor will be the most accurate because it uses lossless compression. The gif format compression is less noticable than the jpg but gif only supports 256 colors. The jpg format supports truecolor but uses a very lossy compression that causes visible artifacts in areas of solid color especially the color red.

Windows typically uses a 96 pixel per inch output to a display device so a high definition image would look different than the origianal when out put to many existing computer monitors. High Definition monitors are available but unless someone particularly needs that quality they choose to purchase a less expensive model. Usually a 3rd party application is required to view HiDef images in HiDef.

TIFs have a very wide range of file formats and web browser designers have chosen not to support any particular subset of formats particularly since TIFs are designed for hard copy print out rather than visual display.

If you wish people to view the High Resolution images in their High Resolution format you will need to provide a means for the orignal images to be downloaded.

Camelot, this website is for the art world - gallery curators, private collectors, etc. They all understand that high-res takes a while, and are more than willing to put up with it.

Soquili,

So you're saying that .TIFs don't exist on the internet? (You seem to be right, since I can't find any .tif images on google =l )
Sounds like to me that the PNG would be the best option then, because it has no compression..

Is there a way in Xara to convert each picture to the highest possible quality Png? Or does it do so automatically when I import them?

As for the whole 96 pixel per inch thing, almost everyone who visits the web page will be on the APPLE IMAC screens, with a 2400x resolution. The website was designed to 1080p for convenience, but we known beforehand that everyone who visits will be on a computer capable of handling it.

Well then, that Apple screen will be using 72 dpi for display.

Regardless of how many pixels across / down it shows, the resolution is 72 DPI.

Here's the thing. If your father will allow a sample image to be posted, we can show you that the resolution is not dependent on usign the hi-res for the display.

Take care, Mike

I did not say png has no compression. It does have compression and there is no way to bypass it. I said it is lossless unlike the compression in a jpg.

Designing your website to 1080p simply means the page is 1080 pixels high, many sites have pages that are much longer than that.

What is called High Definition for a television is 1920 pixels X 1080 pixels.

Apple displays are often considered to be 72 ppi rather than 96 ppi.

Regardless of what OS and hardware is being used you are limited by the web browser itself.

Typically every application used to create a web page is designed to optimize an image to the lowest filesize, not the highest image quality.

For anyone to view the highest quality image it would be best to provide a link for them to download a copy of the image for viewing in a high quality image viewer application. Web Browsers are not the best quality display possible.

Mwenz,

I trust your word, but im slightly confused by what you said. The resolution is not dependent on using the high resolution?

Soquili,

The way the web page is designed is that there should be absolutely no scrolling on the page (or so we hope). This was challenging because everyone uses different screen resolutions on their computers, and thus the page will display differently for everyone. Because the pictures are top-to-bottom, we can't afford to have a page that needs to be scrolled down, or else the viewers will not be able to see the whole picture without manually scrolling out. Did I pick the right size for this, then?

Alright, so I know that .Tifs are out of the question, but you're saying that PNG are the next best thing, correct? So should i manually convert each picture in photoshop to .png, or does Xara do that automatically for me when I import them?

Also, my father would prefer to go without a download link.

When you export a web page using any version of Xara, Web Designer or Designer Pro images will be converted to png or jpg. You can make the image one or the other manually.

The most common screen size used for web viewing is 1024 x 768 but you indicate the people viewing your website are not the typical person browsing the web.

If you know many of the people that will be your designer visitor you can ask what size browser window they use. Not many people with wide screen or large monitors will fill the screen with their web browser.

Even if you decide to go with 1024 x 768 for you web page you must consider the overhead of scroll bars. If a visitor is not using the full screen size for their browser they will experience scrollbars unless they have a much larger screen dimensions than is typical.

Alright, thank you, I guess there's just no such thing as a perfect setup.

One last thing though, could you please briefly explain how to get Xara to convert them all to .png and not jpg? Or by "manually" did you mean opening each one up in photoshop and saving them all individually as .pngs?

Thanks for all the help.

Quinton no need for Photoshop. Select the imported TIF in your Web Designer project and right click then select Web Properties from the popup menu. Select the Image tab and select PNG from the web image type.

Much obliged.

I don't know how this forum works, so if possible, this thread can be marked as solved/finished/locked.

Thanks again for all the help.