Slow loading with big amount of PHP generated images

Question

i have problem with my automatic generating images.

I have PHP script, which get url hash of image and generates this image in requested dimensions and modifications, by the "m" parameter in url. It can change dimensions, and stuff like this.

With single or few pictures it is great - like: http://www.jaarda.eu/upload/pluginGallery/129b12182490d9e191b3a7cdd4fcf704?m=wh_400-400

But in big amount i have problems with not loading some items. Check on http://www.jaarda.eu/.

I dont think, it is server problem, CPUs dont go on max, and memory too. Script, which generates images even send cache headers, but still no change - on page with big amount of pictures like jaarda.eu is problem. Generating other dimensions of picture is not every time, when script fires - image is generate only once, and then is saved on server for again use. I even try multipy increase power of my VPS and no change.

This problem is not showing in Safari, only IE, Chrome, etc...

This is end of my script, where is functional caching and type sending:

$modified = filemtime($file);
            if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
                $request_modified = strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']);
                if ($modified <= $request_modified) {
                    //header('HTTP/1.1 304 Not Modified');
                    header('HTTP/1.1 304 Not Modified', true, 304);
                }
            }           
            header("Last-Modified: ".gmdate('D, d M Y H:i:s', $modified)." GMT");
            header("Cache-Control: public, max-age=7200");
            header("Expires: " . gmdate('D, d M Y H:i:s', time()+7200) . ' GMT');           
            header('Content-Length: ' . filesize($file));
            header('Content-Type: '.$type);
            readfile($file);

Thank you so much for ideas, how solve this problem.

EDIT

I have improve my situation by use ob_ functions in my code but it is not perfect still. It is better, only one of two images are not loading, but still not perfect. Problem remains in chrome with ctrl + f5 reloading, so thanks you all for any more idea.

$modified = filemtime($file);
        ob_start(""); 
        if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
            $request_modified = strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']);
            if ($modified <= $request_modified) {
                //header('HTTP/1.1 304 Not Modified');
                header('HTTP/1.1 304 Not Modified', true, 304);
            }
        }           
        header("Last-Modified: ".gmdate('D, d M Y H:i:s', $modified)." GMT");
        header("Cache-Control: public, max-age=7200");
        header("Expires: " . gmdate('D, d M Y H:i:s', time()+7200) . ' GMT');           
        header('Content-Length: ' . filesize($file));
        header('Content-Type: '.$type);
        ob_end_clean();
        ob_clean(); 
        flush();
        readfile($file);
        exit(); 

Answer 1

You should add some size validation for m=wh_400-400 because I did try some other sizes like wh=3000-3000and it worked and you know what that means if you are storing these images.

To answer to your question you should try with htaccess :

# BEGIN Expire headers
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 7200 seconds"
    ExpiresByType image/jpg "access plus 2592000 seconds"
    ExpiresByType image/jpeg "access plus 2592000 seconds"
    ExpiresByType image/png "access plus 2592000 seconds"
    ExpiresByType image/gif "access plus 2592000 seconds"
    AddType image/x-icon .ico
    ExpiresByType image/ico "access plus 2592000 seconds"
    ExpiresByType image/icon "access plus 2592000 seconds"
    ExpiresByType image/x-icon "access plus 2592000 seconds"
    ExpiresByType text/css "access plus 2592000 seconds"
    ExpiresByType text/javascript "access plus 2592000 seconds"
    ExpiresByType text/html "access plus 7200 seconds"
    ExpiresByType application/xhtml+xml "access plus 7200 seconds"
    ExpiresByType application/javascript A259200
    ExpiresByType application/x-javascript "access plus 2592000 seconds"
    ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
</IfModule>
# END Expire headers

# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
    <FilesMatch "\\.(ico|jpe?g|png|gif|swf|gz|ttf)$">
        Header set Cache-Control "max-age=2592000, public"
    </FilesMatch>

    <FilesMatch "\\.(css)$">
        Header set Cache-Control "max-age=2592000, public"
    </FilesMatch>

    <FilesMatch "\\.(js)$">
        Header set Cache-Control "max-age=2592000, private"
    </FilesMatch>

    <filesMatch "\\.(html|htm)$">
        Header set Cache-Control "max-age=7200, public"
    </filesMatch>

    #Disable caching for scripts and other dynamic files
    <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
        Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
        Header set Pragma "no-cache"
        Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
        #Header merge Cache-Control no-cache env=CGI
        #Header merge Cache-Control no-cache env=NO_CACHE
        #Header merge Cache-Control no-store env=NO_STORE
    </FilesMatch>
</IfModule>
# END Cache-Control Headers

Answer 2

The error I get from my console is: Resource interpreted as Image but transferred with MIME type text/html

So the question is, where does your var $type come from? Try to debug what you sent, I believe you are 'sending' something wrong which gives delay in a browser.