Reputation: 133
I have a PHP code that prints an image (echo"<img src='uploads/icon.png'/>";
), the thing is that the first time I run this code the img take like a second to appear then when I refresh the browser the image appears instantaneously, is there a way cache the img to browser before loading?
Upvotes: 1
Views: 89
Reputation: 1268
You couldn't cache something that was not yet loaded, but what you could do is lazy-load the image (for example, using JQuery LazyLoad), or even load a low-quality version of the image and then asynchronously load the full-quality image using client side JS.
Either way, the image's gonna have to make it to the user before you can cache it, you can only control whether or not it will load in sync with the rest of the page.
Upvotes: 3
Reputation: 2622
You can use Leverage browser caching and Gzip compression which will help you much with the loading speed
For leverage caching you can add below code to the .htaccess
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##
And you can enable Gzip compression by adding below code to .htaccess
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
You can add them both and you will see a vast change in loading time.
Upvotes: 1
Reputation: 3302
There are many techniques how to speed up image loading. Depending on your scenario it could be
You could also use separate subdomain for images and other resources.
Upvotes: 2