Can anybody please explain to me why my php page keeps downloading the images and other items every single time the page is loaded or refreshed. I would have thought that the images get cached and re-used without having to download the images etc, all the time, over and over! This happens everytime the page needs to load or refresh, is there something wrong with my code layout that is causing this or is it my html header that is the problem or is it something else all together? This is eating through my bandwidth and will do the same for potential users of my site, not a very good first impression entering my site. If somebody can help me solve this, I will be so greatful! Here is my test page code: <?php /** * ForgotPass.php */ include("include/session.php"); ?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content="Microsoft FrontPage 4.0" /> <title>Forgot your password?</title> <meta content= "This is just a test page." name= "description" /> <meta content="test, test page, online test" name="keywords" /> <link href="favicon.ico" rel="SHORTCUT ICON" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="css/menu_style.css" type="text/css" rel="stylesheet" /> <link href="css/default.css" type="text/css" rel="stylesheet" /> <link href="css/style.css" type="text/css" rel="stylesheet" /> <meta content="Microsoft FrontPage 4.0" name="GENERATOR" /> </head> <body> <table cellspacing="0" cellpadding="0" width="950" border="0"> <tbody> <tr> <td colspan="2"> <table cellspacing="0" cellpadding="0" width="950" border="0"> <tbody> <tr> <td valign="bottom" align="left" width="208" rowspan="2"><a href= "index.php"><img height="99" alt="Online - Test Page" src="img/iol_logo.png" width="208" border="0" /></a></td> <td valign="bottom" align="middle" width="510" height="38"><span class= "font2">The online test page.</span> <span class="timeleftSmall">Register an account !</span></td> <td valign="bottom" align="right" width="232" rowspan="2"> <table cellspacing="0" cellpadding="0" width="226" border="0"> <tbody> <tr> <td valign="top" align="left"><img height="10" alt="" src= "img/menu_as.png" width="226" /></td> </tr> <tr> <td valign="top" align="middle" background="img/menu_at.png"> <table cellspacing="0" cellpadding="0" width="190" border="0"> <tbody> <tr> <td align="left"> <form style="DISPLAY: inline" name="form_login" action= "process.php" method="post"> <table style="HEIGHT: 40px" cellspacing="0" cellpadding= "0" width="210" align="center" border="0"> <tbody> <tr> <td align="left" width="90" valign="middle"> <font size="2">Username:</font></td> <td align="right" width="120"><input class= "thin_border" style= "FONT-SIZE: 9px; MARGIN-BOTTOM: 2px; WIDTH: 118px" size="14" type="text" name="user" maxlength="30" value="<?php echo $form->value("user"); ?>"></td> </tr> <tr> <td align="left" width="90" valign="middle"> <font size="2">Password:</font></td> <td align="right" width="120"><input class= "thin_border" style= "FONT-SIZE: 9px; MARGIN-BOTTOM: 2px; WIDTH: 118px" size="14" type="password" name="pass" maxlength= "30" value= "<?php echo $form->value("pass"); ?>"></td> </tr> </tbody> <tbody> <tr> <td align="left" width="90"><input type="hidden" value="1" name="sublogin" /><input type="checkbox" name= "remember" <?php if($form->value("remember") != ""){ echo "checked"; } ?> /><font size="1">Remember</font></td> <td align="right" width="120"><input id="submit" type="image" height="22" width="88" src= "img/button_login.png" value="Login" name= "Submit" /><span id="msgbox" style= "DISPLAY: none"></span></td> </tr> </tbody> </table> </form> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="left"><img height="10" src="img/menu_base.png" width= "226" /></td> </tr> </tbody> </table> </td> </tr> <tr> <td valign="bottom" align="left" width="510"> <div id="menu"> <ul> <li><a title="Menu0" href="test0.php" target= "_self"><span>Menu0</span></a></li> <li><a title="Menu1" href="test1.php" target= "_self"><span>Menu1</span></a></li> <li><a title="Menu2" href="test2.php" target= "_self"><span>Menu2</span></a></li> <li><a title="Menu3" href="test3.php" target= "_self"><span>Menu3</span></a></li> </ul> </div> </td> </tr> </tbody> </table> </td> </tr> <tr> <td valign="top" align="left" width="724"> <table style= "background-image: url('img/mainbackground.png'); background-color: #fafafa; background-repeat: repeat; background-attachment: scroll; margin: 0px; background-position: 0% 50%" cellspacing="0" cellpadding="0" width="718"> <tbody> <tr bgcolor="#FFFFFF"> <td colspan="3"><img height="15" src="img/spacer.gif" width="1" /></td> </tr> <tr> <td class="site_page_menu_text" style= "background-image: url('img/bar1.gif'); background-repeat: no-repeat; background-attachment: scroll; height: 38px; padding-left: 18px; background-position: 0% 50%" colspan="3"><span class="site_page_menu_text" style= "DISPLAY: block; PADDING-TOP: 3px">Forgotten your password?</span></td> </tr> <tr> <td width="4"></td> <td valign="top" align="middle" width="710"> <form id="form_1" name="form" action="process.php" method="post"> <table style="MARGIN-TOP: 2px" cellspacing="0" cellpadding="0" width= "700" align="center"> <tbody> <tr> <td style= "background-image: url('img/left_top_corner.png'); background-repeat: repeat; background-attachment: scroll; background-position: 0% 50%" width="6" height="6"></td> <td style= "background-image: url('img/top_border.png'); background-repeat: repeat; background-attachment: scroll; background-position: 0% 50%" height="6"></td> <td style= "background-image: url('img/right_top_corner.png'); background-repeat: repeat; background-attachment: scroll; background-position: 0% 50%" width="6" height="6"></td> </tr> <tr> <td style= "background-image: url('img/left_border.png'); background-repeat: repeat; background-attachment: scroll; background-position: 0% 50%" width="6"></td> <td style="PADDING-TOP: 5px" align="left"> <div style= "MARGIN: 0px; WIDTH: 100%; BACKGROUND-COLOR: #fff"> <p>If you forget your password we can send it to your e-mail box.</p> </div> <ul> <li> <div style= "MARGIN: 0px; WIDTH: 100%; BACKGROUND-COLOR: #fff"> Enter the username that was linked to your account. </div> </li> <li> <div style= "MARGIN: 0px; WIDTH: 100%; BACKGROUND-COLOR: #fff"> Click SEND, and your new password will be sent to the designated email address.<br /> </div> </li> </ul> <div style= "MARGIN: 0px; WIDTH: 100%; BACKGROUND-COLOR: #fff"> <p align="center"></p> <p align="center"><input type="hidden" value="1" name= "subforgot" /><font color="#FF6633"><br /> <br /></font></p> <table style="HEIGHT: 40px" cellspacing="0" cellpadding="0" width="359" align="center" border="0"> <tbody> <tr> <td align="right" width="149"><b>Your username : </b></td> <td align="right" width="206"><input class= "form_input_bleu" id="username" style="WIDTH: 200px" size="14" name="user" value= "<? echo $form->value("user"); ?>"></td> </tr> <tr> <td align="left" colspan="2" width="357"><img height= "9" src="img/spacer.gif" width="1" /></td> </tr> <tr> <td align="left" width="149"> </td> <td align="right" width="206"><input id="submit" type="image" height="32" width="144" src= "img/button_send.png" value="Forgot" name= "Submit" /></td> </tr> </tbody> </table> <p> </p> <div id="text3" style="width: 222; height: 104"> <b>Password recovery status:</b><br /> <?php if(isset($_SESSION['forgotpass'])){ if($_SESSION['forgotpass']){ echo "<p><h1>New Password Generated</h1></p>"; echo "<p>Your new password has been generated " ."and sent to the email address <br>associated with your account. " ."<a href='test0.php'>Click here to go back to the home page</a>.</p>"; } else{ echo "<p><h1>New Password Failure</h1></p>"; echo "<p>There was an error sending you the " ."email with the new password,<br> so your password has not been changed. " ."<a href='test0.php'>Click here to go back to the home page</a>.</p>"; } unset($_SESSION['forgotpass']); } else{ } ?> </div> <p> </p> <p> </p> <p> </p> </div> </td> <td style= "background-image: url('img/right_border.png'); background-repeat: repeat; background-attachment: scroll; background-position: 0% 50%" width="6"></td> </tr> <tr> <td style= "background-image: url('img/left_bottom_corner.png'); background-repeat: repeat; background-attachment: scroll; background-position: 0% 50%" width="6" height="6"></td> <td style= "background-image: url('img/bottom_border.png'); background-repeat: repeat; background-attachment: scroll; background-position: 0% 50%" height="6"></td> <td style= "background-image: url('img/right_bottom_corner.png'); background-repeat: repeat; background-attachment: scroll; background-position: 0% 50%" width="6" height="6"></td> </tr> </tbody> </table> </form> </td> <td width="4"></td> </tr> <tr> <td colspan="3"><img style="DISPLAY: block" height="8" alt="" src= "img/mainbottom.png" width="716" /></td> </tr> </tbody> </table> </td> <td valign="top" align="left" width="226"> <table cellspacing="0" cellpadding="0" width="226" border="0" height="670"> <tbody> <tr> <td height="18"><img height="10" src="img/bas_menu_one.gif" width= "226" /></td> </tr> <tr> <td valign="top" align="middle" height="40"><img height="36" alt= "Lowest Unique Bid auctions" src="img/button_1.gif" width= "226" /></td> </tr> <tr> <td align="middle" background="img/menu_at.png" height="448"> <table cellspacing="0" cellpadding="0" width="210" align="top" border= "0"> <tbody> <tr> <td align="middle"><span class="font2b"><b>Fill in text area</b></span> :<br /> This is just a text fill in <b>to show</b> formatting of this page</td> </tr> <tr> <td height="10"></td> </tr> <tr> <td align="middle"><object codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="260" width="200" classid= "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"> <param name="movie" value="flash/how_to.swf" /> <param name="quality" value="high" /> <param name="BGCOLOR" value="#F8F8F8" /> <embed src="flash/how_menu.swf" width="200" height="260" quality="high" pluginspage= "http://www.macromedia.com/go/getflashplayer" type= "application/x-shockwave-flash" bgcolor="#F8F8F8" /> </object></td> </tr> <tr> <td align="left"> <span class="font2b"><b>Item1 Here</b></span> :<br /> Just some text <b>again</b>, to show formatting at this point ! <p><a href="test3.php"><b>Test3 >></b></a></p> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="left" height="14"><img height="10" src="img/menu_base.png" width="226" /></td> </tr> <tr> <td align="left" height="21"> </td> </tr> <tr> <td align="middle" height="66"> <p><img height="62" alt="Clickable Image" src="img/clickme.gif" width="200" /></p> </td> </tr> <tr> <td align="middle" height="63"><img height="1" src="img/spacer.gif" width="180" border="0" /></td> </tr> </tbody> </table> </td> </tr> <tr> <td colspan="2"> <div align="center"> <p> </p> <p><img height="9" src="img/bas.png" width="927" /></p> <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href= "link1.php">link1</a> | <a href="link2.php">link2</a> | <a href="link3.php">link3</a> | <a href="link4.php">link4 here</a> | <a href="link5.php">link5 here</a> | <a href= "link6.php">link6 here</a> | <a href="link7.php">link7 here</a>| <a href="link8.php">link8 here</a> | <a href="link9.php">link9 here</a><br /> <a href="link10.php">link10 here</a> | <a href= "link11.php">link11 here</a></font></p> <p><font face="Verdana, Arial, Helvetica, sans-serif" size="1">© 2008-2009 My Company Ltd</font></p> </div> </td> </tr> </tbody> </table> </body> </html> Code (text): Thanks Grant
pneulameiro: Thanks for the input, but I think I know where the problem lies according to someone who replied to me, he pointed me in a direction of using image expires headers, which are currently not set. Highly dynamic serverside scripting pages turn out to be not very cacheable at all, so you need to help them to cache images on the clients machine! This is the link one forum user directed me to: http://www.mnot.net/cache_docs/ Here is a short extract from that same link which seems to explain my problem in a nutshell or at least sounds like it could be the cause! Implementation Notes — Server-Side Scripting One thing to keep in mind is that it may be easier to set HTTP headers with your Web server rather than in the scripting language. Try both. Because the emphasis in server-side scripting is on dynamic content, it doesn’t make for very cacheable pages, even when the content could be cached. If your content changes often, but not on every page hit, consider setting a Cache-Control: max-age header; most users access pages again in a relatively short period of time. For instance, when users hit the ‘back’ button, if there isn’t any validator or freshness information available, they’ll have to wait until the page is re-downloaded from the server to see it. Thanks Grant
You can turn on caching, you can force caching with php or htaccess, but anyway it will depend of clients browser configuration!
The problem I have is that I don't want some content to be cached, because the content ie: graphics will change roughly once a week with php loading image paths from a mysql database everytime the page is loaded, there are no static image paths for some content that I want to be dynamic, so php echo's the image source paths when the page is loaded. But there "is" content that I DO want to cache, which never changes, and they have hardcoded image source paths and at the moment these images are downloading over and over. How can I go about allowing some images to be cached (static src="http://www.mysite.com/img/image1.jpg" is my hardcoded path) and (dynamic <img src="<?php echo $req_image_info['image1']; ?>" are echoed database values). This works perfectly with the exception of all images being downloaded over and over, and not seeming to be cached at all. Any guidance on this issue will be very much appreciated Thanks Grant
Unfortunately this is true. There is no other way. It is the browser of the user that decides when to cache or not. Maybe you think that some attributes or meta tags will improve this, but it will not. If you are bored with this maybe you can reduce the size of the images.