Images take a while load

Question

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?

upload img with less size.. and check if its still loading slow ? — user3209031, Aug 14 '14 at 07:07
http://stackoverflow.com/questions/8831345/is-it-possible-to-insert-images-in-cache-before-rendering — monkeyinsight, Aug 14 '14 at 07:08
Probably less than a second but it takes a while for me to realize there is no image — user38032, Aug 14 '14 at 07:11
you running in local-host or on any live server. link the test case if possible — user3209031, Aug 14 '14 at 07:15

Noy · Answer 1 · 2014-08-14T07:40:29.007

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.

score 2 · Answer 2 · answered Aug 14 '14 at 07:13

There are many techniques how to speed up image loading. Depending on your scenario it could be

image sprites
image compression and correct format depending on purpose
image preloading
async image loading
use CDN

You could also use separate subdomain for images and other resources.

score 1 · Answer 3 · answered Aug 14 '14 at 07:20

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.

Images take a while load

3 Answers3