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:
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
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:
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".