I’m building a site for a client that features large image backgrounds (1700px wide) - they’ve not been particularly happy with the file compression and want me to use images that weigh around 600k (!).
I’ve used Fireworks and got images down from over 600k to just over 200 without [IMO] huge degradation in quality but they’re still not completely happy… and I still think they’re too big…
I’m not exactly happy making the site with such weighty images and in my next discussion with them I’d like to know what everyone around here things is too big? Just so I’ve got some ammunition for the argument that will follow…
personally I aim to get full screen size background images down to less that 100k.
but whether that is feasible or not depends on the image, the amount of colours in it, the physical length and width in px and possibly other factors.
I use Photoshop Element’s “Save for web” option which also gives the option to not save any unnecessary header info in the header of the jpg which helps reduce the file size as well.
to give you an example I’ve attached a 1300px x 1144px background image I once used on a website. When I “borrowed” it from the www it was 99kb and with a bit more compression I got it down to 78.3kb
Are they able to express clearly why they aren’t happy with the compression? If the photo is being used as a background then presumably there is some text or other elements obscuring part of the image on screen. There are tricks to making images appear full colour and quality by using these obscured areas to drop quality or image data altogether. It does mean slicing or more work on the coding front but you would strike a better balance without compromising file sizes.
Primarily I would ask who the target audience is. If it is a commercial website with a commercial clientele then almost inevitably they will be using broadband to view. This makes the background image not as consequential as say a mixed clientele of business and home users. Pull out some stats on how quickly people bounce from websites or how little time you have to draw the attention of a user before they move on to the competition.
Ultimately if you can show that a user makes their mind up within [disclaimer: stats for example purposes only, I’m years out of date on the actual data] 15 seconds max or 3 clicks and they’re making the choice to use 5 of those seconds to load the site or load it quickly and have the content speak for itself. Unless the site is aimed at an image-savy audience then I wouldn’t get too hung up on the visuals being super duper. Certainly make sure your compression and optimisation techniques are up to scratch, so you aren’t doing them an injustice with inflated file sizes, but often the clients don’t understand the need for balance and how little time they actually have to win a user over. Or the fact that photographic websites all optimise their images.
The other option is to provide some split A/B testing and run two versions of the website that differ only in the quality of that background image and test to see if there is a difference in bounce rate or time spent on the website between the two groups. Google make this easy but I’m sure there are other tools around.
In my experience I’ve found that many of these client wishes come down to misunderstanding the media. They often consider themselves experts because they ‘use’ the web everyday, but view their own website through an owner’s mentality. If you can swing them around to focussing on the user experience then things start to move in a different direction (because if the user wins, then we all win). Users are fickle and move on quickly to competitors if you aren’t up to standard - this includes long loading times.
At the end of the day the client is paying the bills so after you have presented your arguments you can only do the best with what you are asked to do. If they insist on a full quality background image, ask politely to do the A/B test saying that it will help to provide measurable data on whether there is a difference without compromising the website. Measure it for 2-3 months and if there is no difference re-visit the issue and ask if they want to stick with the lower bandwidth version.
You dont need to make a very large image there is an alternate solution. export the image on relatively good quality and make it stretchable like this website do http://www.devold.com/outdoor/default.aspx?setLang=no
this solution is becoming famous now a days.
on very large screens image looks pixelated but it also has a solution. make a transparent gift of size 2x2. 1 pixel will be solid color(black or white depends upon the image) and remaining 3 pixels would be transparent. in the HTML create a layer on top of the image, full height & width and set this 2x2 gif to its background. in short a background image and an overlay of 2x2 gif. hope it will help
When it all comes down the site is basically a brochure for an event that has a captive (non open) audience so they can ask for what they want it isn’t so important from a sales point of view, has a shelf life of less than a year and apparently the large audience is in predominantly first world cities so download speed is deemed not to be an issue…
Around 600 KiB is damn ridiculous for background images; regardless as to whether it is being served via broadband or not, or a captive audience.
Balderdash it is more than likely if these “projected demographic visitors” are wealthy ‘city types’, many will be using small mobile devices to view the content. Maybe paying per megabyte and viewing on small screens via wireless and I am sure they’ll soon get annoyed by such bloated huge images.
If they [client] are that bothered about their background images then they have lost complete focus. Forgetting “content is king” not a wallpaper, which should be unobtrusive in the first place and that the web isn’t primarily print.
I hear you, when it all comes down it’s less the client and more the designer who’s pushing that button… no prizes for guessing their background is in print and they’re trying to basically publish a slick brochure digitally - and should probably have done that with a slick ebook rather than trying to do it all on the web…
