Treehouse: Grow your CSS skills. Land your dream job.

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

  • # January 25, 2012 at 5:08 pm

    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.

    # January 25, 2012 at 6:09 pm

    Maybe use lazy loading so all of the images don’t load immediately.

    # January 26, 2012 at 6:21 pm

    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”.

    # January 27, 2012 at 11:58 am

    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:

    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:

    # January 27, 2012 at 7:28 pm

    you could also use:

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.