Webpage photo size?

[roehrle]

I like to use photo's for background on my webpage but I get complains sometime that people with larger screens are getting tileing <sp> where the photo start to repeat its selfs . I know one solution is to use very large files but then people with <56kb ISP's complain about taking so long to see the page. Is there a command what will insure that the screen is full without D/L-ing huge files ??

[slavedriver]

I like to use photo's for background on my webpage but I get complains sometime that people with larger screens are getting tileing <sp> where the photo start to repeat its selfs . I know one solution is to use very large files but then people with <56kb ISP's complain about taking so long to see the page. Is there a command what will insure that the screen is full without D/L-ing huge files ??

Try using your xxx.jpg "border="0">

[Jeeo]

You could try to use CSS for the backgrounding. With CSS you can set the background image in the center and have a background color similar to the picture's. Keep in mind that with highly elaborate backgrounds it is hard to see the text, sometimes making people annoyed to the point of where they won't bother to return to the page.

[nzgfxguru]

Slavedriver - That won't work.

JEEO - That won't work in netscape browsers, as netsape does not recognise the {background-position: center} property.

roehrle - one thing that will work is to use the high resolution images like you are saying. But you should optimize the image so that it is around 60kb or below. You don't have to have large file sizes to display large images.

I have designed several sites which have very large and complex photographic backgrounds and manage to keep page loading times down to less than 30 seconds on 56kb connections.

The latest in user screen resolutions is that 1024 x 768 is the most dominant screen res (only just), but you should still be coding for 800 x 600 users as the standard base resolution.

Also consider coding in CSS, that way you can specify that the page content shows before a large slow loading background image.

[roehrle]

What is css ??

If you go to the following 3 links you will see what I like to do with my webpage. I like to present information and at the same time also show some of my photos using all of the screen,

http://www.kwiknet.net/~roehrle/EEYC/2004officersx.htm

http://www.kwiknet.net/~roehrle/EEYC/special.html
With thi following technique I am afraid that people won't page down to see the additional links.

http://www.kwiknet.net/~roehrle/EEYC...on%20info.html

Thanks for your help so far.

[slavedriver]

What is css ??

If you go to the following 3 links you will see what I like to do with my webpage. I like to present information and at the same time also show some of my photos using all of the screen,

http://www.kwiknet.net/~roehrle/EEYC/2004officersx.htm

http://www.kwiknet.net/~roehrle/EEYC/special.html
With thi following technique I am afraid that people won't page down to see the additional links.

http://www.kwiknet.net/~roehrle/EEYC...on%20info.html

Thanks for your help so far.

You could use this as a reference it has netscape help

http://www.htmlgoodies.com/tutors/html_ref.html

Another option is use 1 background and use java scripting and smaller photos

[WebHead]

How about embedding the images as Flash files so they auto-size with the Window? I dunno,.. just a suggestion.

[nzgfxguru]

CSS is Cascading Style Sheets, it is a method of making the pages load without all the extra HTML coding that goes into normal HTML sites.

It is also a way to specify what loads on your page and when it loads.

I have done a bit of research into your problem and for a start I cannot see any of your images tiling in those links.

The last page is VERY SLOW TO LOAD, the image is over 300kb, you need to trim this down to 100kb or less (preferably 60kb).

I think there is a piece of javascript code somewhere that makes images resize with the browser too?

[roehrle]

[Thanks for taking the time to checkout my site. Yes 300KB's is much to large. Must of been a sleep when I loaded that file. I'll reduce it to a more resonable size like you suggested.

The last page is VERY SLOW TO LOAD, the image is over 300kb, you need to trim this down to 100kb or less (preferably 60kb).

If you come accross this code I would be interested in seeing it.
Thanks again

I think there is a piece of javascript code somewhere that makes images resize with the browser too?[/QUOTE]

[nzgfxguru]

Ok, one way to do it, is to have your whole page wrapped in a 100% width and height table. Then display the background image within that table and make it's widths and heights 100%.

One problem with that though, is that if the page content is a lot larger than the image, it will stretch the image heightwise so the image looks kinda ugly.

I have done a fir bit of searching for that javascript code but have had no luck, maybe someone else in here will have more success?

[+Daemon+]

u need a site that supports server side scripiting like asp or php

then u have php or asp detect what browser and use javascript to get the screen size and then have it load diffrent size backgrounds for the rez it finds.

kinda like my example page
http://daemonprojects.com/banshee/

it will auto setect the screen size and adjust the table to the rez

php code of the site: index.php
------------------------------

  <?
  if ($_REQUEST["Startpage"] == 1) {
  ?>
  
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
  <head>
  <title>Test page</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <script language="JavaScript" type="text/JavaScript">
  <!--
  function MM_reloadPage(init) {  //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
      document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
  }
  MM_reloadPage(true);
  //-->
  </script>
  </head>
  
  <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
  <br>
  <?
  //Check screen size and adjust table
  
  if ($_REQUEST["W"] >= "1600X1200") {
      $tblwidth = "1040";
  } 
  if ($_REQUEST["W"] == "1280X768" || $_REQUEST["W"] == "1280X1024") {
      $tblwidth = "940";
  } 
  if ($_REQUEST["W"] == "1024X768" || $_REQUEST["W"] == "1152X864") {
      $tblwidth = "840";
  } 
  if ($_REQUEST["W"] == "800X600") {
      $tblwidth = "740";
  } 
  if ($_REQUEST["W"] == "600X480") {
      $tblwidth = "640";
  } 
  
  echo $tblwidth; 
  
  ?>
  
  </body>
  </html>
  <?
  } else {
  ?>
  <SCRIPT>
  <!--
  var screenW = screen.width;
  var screenH = screen.height;
  location.replace("index.php?Startpage=1&W=" + screenW + "X" + screenH);
  //-->
  </SCRIPT>
  <?
  }
  ?>

-----------------
Note: the above is in html/PHP so your site must support php for this to work