I'm wondering how designer build sites with extremely large background images/graphics while keeping the size of the image manageable. For instance, see http://www.kimrichardsonmu
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
The tradeoff is appearance vs responsiveness of the site. Images are cached (usually) so if you are using a large background image for effect and it is on all pages then there is an initial hit afterwhich there should not be a problem. I use a rule of minimal - unless the background is going to make or break the site then keep it simple - so for a site selling oil masterpieces - it could be a good idea - for a site like ebay - forget it.
There is a trick to it. Hire a designer with an ego thats bigger than the need for responsive websites. Honestly, it's a poor decision to make unless the target market for the site are on uber-fast connections to the web. Initial visitors are more likely to blow while waiting for those monster images to download to their cache.
If your heart is set on it, there are actually a lot of ways to make the large images smaller file sizes. Here are a few tips that might help:
1. Avoid transparencies. PNG files are larger in general than JPG's. You can compress a JPG pretty well and just try and have it resolve into a solid color that you can set as your background color in CSS.
2. Use repeatable images. Even odd designs can have a beginning and an end that repeat well. What I tend to do if I want to use a large abstract design is to cut it in half, duplicate that half and put them back to back so to speak. This effect allows the image to repeate reasonably well as the top and sides will repeat into each other. For instance if you are doing a mountain scene, grab a photo of a few mountains and trim them and flip them so that the ends on either side end at the same place. Then in your CSS have them x-repeat so that they continue across the page seamlessly.
3. Even though the example didn't do a good job of it, if you can choose a photo or use a filter in Photoshop[ that makes the image look a little distressed, you can drop the quality of the JPG way down and it will add to the effect. You can make a 1600 px wide image as little as 50K if you can distress it enough and compress it enough and still get the effect you wont (ie. For ti to look good.)
4. Use vector shapes. Now, i know you cannot set a PDF as a background, but if you use vector shapes with a smaller color library, you can create a really nice and colorful background without busting the bank. A bright and colorful four color background with different vector shapes in it can become an extremely small file size as a JPG.
Anyway, hopefully those hints help you out. those are things I do when I can. As an example, the background below is only 135K and I probably could have made it much smaller:
http://groikproductions.co
I just made it repeat into itself and chose a pattern that would repeat well and be relatively unnoticeable as it tiled.
Business Accounts
Answer for Membership
by: sokharoitPosted on 2009-10-25 at 22:47:47ID: 25659867
Sure you can use large background image, but you need to think size, my recommendation is not over 500kb like the website you mentioned the background is about 600KB another important point is with and height must be at least 1600 x 1280 for standing and fix background in this case I meant full photo background. Here an example : http://www.brahman.com.kh/
Cheer.