user38032
user38032

Reputation: 133

Images take a while load

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

Answers (3)

Noy
Noy

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

Veerendra
Veerendra

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

Robert
Robert

Reputation: 3302

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.

Upvotes: 2

Related Questions