How, or should I go about caching images using php and mysql?

Question

Basically all I want to do is make the images load faster while inserting the data I need displayed. The images never change, but the text in the same code changes depending on what person you're viewing. My code loops through a set of 25 'skills' and gets the image for each one of those and displays the users information on the same row as the image. How would I go about caching the images so that the code runs faster and the image doesn't have to be constantly loaded? Here is what my code looks like:

    function compare($user1) {
    include "mysql.ws";
    $user1 = str_replace(" ", "_", $user1);
    $query = mysql_query("SELECT a.*, b.* FROM skills a JOIN activities b ON(a.playerName LIKE b.playerName) WHERE a.playerName LIKE '".fixName($user1)."' LIMIT 1") or die(mysql_error());

    $row = mysql_fetch_array($query);
    $overall['lvl'] = 0;
    $overall['xp'] = 0;
    for ($i = 1; $i <=25; $i++){
        $xptype = findType($i)."xp";  
        $overall["lvl"] += getLevelForXP($row[$xptype], $i);
        $overall["xp"] += $row[$xptype];
    }
        //updateDonator($user1);

    echo'<div class="OrnamentalBoxBg"><div class="OrnamentalBoxContent">
        <div class="header">
        <div class="left">
        <span class="columnLevel">Level</span>
        <span class="columnTotal">Total XP</span>
        <span class="columnRank">Rank</span>
        </div></div>
        <div class="row" data-skill="combat" data-member="false">
        <div class="left">
        <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table=0&amp;rank='.findRank($user1,"0").'#'.findRank($user1,"0").'">
        <span class="columnLevel">
        '.dots($overall["lvl"]).'
        </span>
        </a>
        <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table=0&amp;rank='.findRank($user1,"0").'#'.findRank($user1,"0").'">
        <span class="columnTotal">
        '.dots($overall["xp"]).'
        </span>
        </a>
        <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table=0&amp;rank='.findRank($user1,"0").'#'.findRank($user1,"0").'">
        <span class="columnRank">
        '.findRank($user1,"0").'
        </span>
        </a>
        </div>
        <div class="middle">
        <img src="http://sage-scape.com/hiscores/img/overall.png?2" alt="" title="">
        <span class="statName"><span><span><span>Overall</span></span></span></span>
        </div>
        </div>
    ';
    for ($i = 1; $i <=25; $i++){
        $xptype = findType($i)."xp";  
        if($i == 25){
            echo'
                <div class="row last-row" data-skill="'.findSkill($i).'" data-member="'.member($i).'"> ';

        } else {
            echo'
                <div class="row" data-skill="'.findSkill($i).'" data-member="'.member($i).'"> ';
        }
        if($row[$xptype] > 1)
        echo'
            <div class="left">
            <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table='.$i.'&amp;rank='.findRank($user1,"$i").'#'.findRank($user1,"$i").'">
            <span class="columnLevel">
                    '.getLevelForXP($row[$xptype],"$i").'
                    </span>
            </a>
            <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table='.$i.'&amp;rank='.findRank($user1,"$i").'#'.findRank($user1,"$i").'">
            <span class="columnTotal">
            '.dots($row["$xptype"],"$i").'
            </span>
            </a>
            <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table='.$i.'&amp;rank='.findRank($user1,"$i").'#'.findRank($user1,"$i").'">
            <span class="columnRank">
            '.findRank($user1,"$i").'
            </span>
            </a>
            </div>
            <div class="middle">
            <img src="http://sage-scape.com/hiscores/img/xp_'.fixName(findType($i)).'_total.png?2" alt="" title="" />
            <span class="statName"><span><span><span>'.findType($i).'</span></span></span></span>
            </div>
            </div>
        ';
        else
        echo'
            <div class="left">
            <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table='.$i.'&amp;rank='.findRank($user1,"$i").'#'.findRank($user1,"$i").'">
            <span class="columnLevel">
                    --
                    </span>
            </a>
            <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table='.$i.'&amp;rank='.findRank($user1,"$i").'#'.findRank($user1,"$i").'">
            <span class="columnTotal">
            --
            </span>
            </a>
            <a href="http://sage-scape.com/hiscores/overall.ws?category_type=0&amp;table='.$i.'&amp;rank='.findRank($user1,"$i").'#'.findRank($user1,"$i").'">
            <span class="columnRank">
            --
            </span>
            </a>
            </div>
            <div class="middle">
            <img src="http://sage-scape.com/hiscores/img/xp_'.fixName(findType($i)).'_total.png?2" alt="" title="" />
            <span class="statName"><span><span><span>'.findType($i).'</span></span></span></span>
            </div>
            </div>
        ';
    }
    echo'
    </div></div>
<div class="OrnamentalBoxBottom"></div>
</div>
<div class="OrnamentalBox Width923 SegmentTwo" id="activityStats">
<div class="OrnamentalBoxTop"></div>
<div class="OrnamentalBoxTitle"><div class="Centre1"><div class="Centre2">
<h3 class="Gradient NoFlourish Centre"><span class="spacing" aria-hidden="true">Activity Stats</span>
<span class="G0">Activity Stats</span>
<span class="G1" aria-hidden="true">Activity Stats</span>
<span class="G2" aria-hidden="true">Activity Stats</span>
<span class="G3" aria-hidden="true">Activity Stats</span>
<span class="G4" aria-hidden="true">Activity Stats</span>
<span class="G5" aria-hidden="true">Activity Stats</span>
<span class="G6" aria-hidden="true">Activity Stats</span>
</h3></div></div></div>
<div class="FlatHeader playerNames">
<div class="left">
'.BBCode($user1).'</div>
</div>
<div class="playerAvatars">
<div class="left">
<img src="http://services.runescape.com/m=avatar-rs/'.$user1.'/chat.png?cachebust=1342804665991" alt="" title="">
</div>
</div>
<div class="OrnamentalBoxBg"><div class="OrnamentalBoxContent">
<div class="header">
<div class="left">
<span class="columnScore">Score</span>
<span class="columnRank">Rank</span>
</div>
</div>';
    for ($i = 0; $i < 7; $i++){
        $xptype = findActivityP($i);  
        if($i == 6){
            echo'
                <div class="row last-row">';
        } else {
            echo'
                <div class="row">';
        }
        echo'
        <div class="left">
        <a href="http://sage-scape.com/hiscores/overall.ws?category_type=1&amp;table='.$i.'&amp;rank='.findARank($user1,"$i").'#'.findARank($user1,"$i").'">
        <span class="columnScore">
        '.$row["$xptype"].'
        </span>
        </a>
        <a href="http://sage-scape.com/hiscores/overall.ws?category_type=1&amp;table='.$i.'&amp;rank='.findARank($user1,"$i").'#'.findARank($user1,"$i").'">
        <span class="columnRank">
        '.findARank($user1,"$i").'
        </span>
        </a>
        </div>
        <div class="middle">
        <img src="http://sage-scape.com/hiscores/img/'.findActivityP($i).'.png" alt="" title="">
        <span class="statName"><span><span><span>'.findActivity($i).'</span></span></span></span>
        </div>
        </div>
        ';
    }
}

Is there a way to do this right? I have a MySQL database to which I could possibly achieve doing this, but I am unsure on how to do it. Could someone possibly show me how to do it?

Or use apache to set the images expires header. http://stackoverflow.com/questions/447014/website-image-caching-with-apache — shapeshifter, Dec 06 '12 at 04:16
But it still takes a long time to load the page such as: http://sage-scape.com/hiscores/compare.ws?user1=tweaky — Brandon Tyler Jones, Dec 06 '12 at 04:17
Have you used developer tools in chrome or firebug or [ySlow](https://addons.mozilla.org/en-US/firefox/addon/yslow/)? — ficuscr, Dec 06 '12 at 04:21
Your server seems very slow, it took 8 seconds to give me a response and 3 seconds to download your main html. Try combine all your images into one file and use css sprites. — shapeshifter, Dec 06 '12 at 04:48

Kato · Answer 1 · 2012-12-06T04:29:46.590

As far as the actual mechanism of caching, you won't beat the built-in tools in the browser or the server with anything you can construct. You can do several things to optimize those mechanisms.

A lot of great techniques are detailed in this great article by Yahoo! on best practices. To summarize:

use a long Expires header on images (cheap and effective)
use image sprites and image maps
inline images (often referred to as base64 inlined images)
use a CDN (content delivery network)
minify CSS and JavaScript
gzip content (compression)
put scripts at the bottom and CSS at the top

By far one of the most effective and universally cheap and effective was to optimize will be to turn those images into a single CSS sprite, which requires one, cacheable, download per visitor.

CSS sprites are very straightforward. There is a great article on how to achieve them on css-tricks, and another on A List Apart.

Essentially, combine the images into one tiled image. The inspiration for sprites comes from old console games, so I will pay homage to them with my example:

enter image description here

Then you "clip" the image to only display the region for each image that you want:

div.sprite { background-image:url('assets/sprites/avatars.gif')}
div.sprite.purple_druid {background-position: -75px 0px }
div.sprite.king {background-position: -150px -150px}

Once you have something like this in place, I don't think there is much to solve in PHP and MySQL and frankly, I think that is the wrong place to be optimizing when you only have 25 images which are static content.

Another important consideration for caching is whether or not you really need to optimize. Is a higher end server more practical than the development time spent to optimize? Is the site actually slow? Could a Content Delivery Network speed things up for a cheap payoff?

I hope some of this helps.

score 0 · Answer 2 · answered Dec 06 '12 at 04:23

0

As per I understand your question , you don't want to load the image every-time and it should cache in browser, so for achieving this you have to remove ?2 after the image name

src="http://sage-scape.com/hiscores/img/xp_'.fixName(findType($i)).'_total.png?2
                                                                              ^

You are passing 2 as argument after the image name because od this browser didn't caches the image and loading the same image over and over. So remove the ?2 it will cache the image in browser.

answered Dec 06 '12 at 04:23

Yogesh Suthar

30,424
18
72
100

Holy crap, that speed up my website a lot. What does the ?2 actually do? – Brandon Tyler Jones Dec 06 '12 at 04:42
@BrandonTylerJones Your problem is solved? The `?2` reload the image , it not caches the image in browser. – Yogesh Suthar Dec 06 '12 at 04:52

How, or should I go about caching images using php and mysql?

2 Answers2