Website Background Question
Mon, 12/07/2009 - 5:59pm
OK...I'm sure this is an EASY one for the designers here...
Most of the sites I've built have used fairly simple gradient backgrounds, with small sliced images to reduce load time.
Now, I've found some great textures in the .pat format (Photoshop patterns) that I'd like to use. My problem is they're quite large and I'm still learning my way around Photoshop (still using Fireworks primarily).
These patterns are 740x740 (and larger)...but even if I compress them heavily...they're still around 100-300kb. Any suggestions?
Here's a link to the images: http://webtreatsetc.deviantart.com/art/Retro-Grunge-Wallpaper-Pattens-12...
TIA,
Craig
Tue, 12/08/2009 - 6:48pm
#2
Try This
Probably the easiest way would be to create your image in Photoshop by using the pattern, but when you go to save the file go to File > Save for Web. There you will have many options and you can tweak the number of colors and file format while previewing what it will look like. This will dramatically lower the file size. Hope this helps : )
The key here: optimization using highly-tuned PNGs... in Photoshop, you can limit the number of colors in your PNG, and you can also set the main color(s) by which the compression filter should judge the photo (thus reducing the complexity of the file). Then you can run the PNG through a filter like PNGout to get even more kb out of the file.
In addition, you should remember that, as long as you set the proper etags and expires headers on your files and pages, clients will cache these images so they only need to load them once. Of course, the initial load time is rather hefty. You could perhaps do a javascript that inserts the image after the page load, which means the page would load fast, then at the end (onLoad), the script would load in the PNG.
Advancing the faith.