treehouse : what would you like to learn today?
Web Design Web Development iOS Development

What are some techniques to speed up a website that is very image heavy?

  • I'm working on a site with a lot of image assets and I've trying to find some good techniques to load everything smoothly. Any ideas?

    I have image compression and gzip compression so far.
  • Maybe use lazy loading so all of the images don't load immediately.
  • Compressing files using .htaccess will speed up the website a lot, but it can't compress images. It might help a little bit though:

    # compress text, html, javascript, css, xml:
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript


    From Queness' "17 Useful Htaccess Tricks".
  • for PNG's it might be a good idea to save them at 8bit. 8bit png's only support up to 256colors so it may not be appropriate in all cases. also, see this SmashingMag post for a ton of other PNG optimization techniques.

    after you export everything for web make sure you run all your images through here: http://www.smushit.com/

    for reusable elements such as nav buttons (in all their various states), icons, etc. its a good idea to create sprites to keep the number of server calls down (very important for fast page loads).

    you can accomplish this by hand but it's kind've tricky. instead, i recommend using a tool like this: http://www.spritecow.com/
  • you could also use:
    <img src="data:image/gif;base64,<?php echo base64_encode(file_get_contents('/images/image.gif')); ?>" />