I’m having a bit of a problem. I’ve created a nice background in Photoshop. The dimensions are 3000x2000 and I don’t really want to reduce these dimensions. You can view it below, but the issue is, there’s a bit too much pixelation for my liking which was even more apparent when I tried to save it as a JPEG (High). So I tried saving it as a JPEG at the maximum file quality, which improved the pixelation quite a bit, but now the file size is 598k which is way too high. I’ve tried using Smushit to get the file size down but it didn’t make any savings at all. What can I do to improve the pixelation and decrease the file size?
The first image is the one at maximum quality (100) and the second one is at high quality (60).
I’ve done that and the file size went right up to the 1.5MB mark. Perhaps it would be acceptable to use JPEG (High) setting even though the image is a bit more blockier? It only takes a second to download with broadband. What is best practice for big backgrounds?
For this kind of background jpeg is not the right format!
Did you try PNG-8?
And try http://www.punypng.com to compress your PNGs (24 or 8)
Another option would be Gif
I tried PNG-8 and it looked horrible, same with GIF. I tried PNG-24 and it looked almost the same as JPEG at maximum quality but the file size was way too high. The only format that gave close to acceptable results at a lower file size was JPEG at high quality (60).
With these fluid gradients you start to stretch the limits of graphic formats that chunk info to save file space (hence the GIF looking rubbish).
I typically use about an 80 setting on the JPG for the Save for Web out of PS and strip out all unnecessary extra info, profiles etc. For your file using these settings it still looked good (minimal banding/pixelation) and was sitting at below 300k. This size may still not be acceptable but it is a pretty good compromise.
Yeah I guess so. Well I’m just experimenting with different backgrounds (with the same colour palette) to see which ones look best with lower file sizes. Would you say that 300k is the upper acceptable limit for web?
Personally I think it depends on a couple of things like: what is the target market of the website, is there a high degree of broadband users vs dialup, what kind of website is it and is it obvious from say the domain name.
I say this because you are bound to get those who will automatically say that 300k is too big for a website background image and that they should all be as small as possible. However if your website is a photographic gallery and visitors are coming knowing that there is going to be a high degree of photographic material then you have more scope for using larger files. You don’t want to be silly about it, there’s no point in including large files unnecessarily but you can afford to do so without worrying too much that visitors won’t be expecting longer load times.
Likewise if your domain doesn’t make it clear what kind of website you are you may get dialup users sitting and waiting while a ‘large’ page loads. I don’t think this is nearly as problematic as it used to be as broadband speeds and availability are far more widespread and faster than they used to be. But if you want to be surfer friendly I would make sure the home page isn’t too heavy and perhaps introduce it in other parts of the website.
This doesn’t cover all of the things that you can consider when trying to decide on background image size. There are little tricks that you can do to try and minimise image size and maximise impact but they are largely from the school of thought that images should all be as tiny as possible and your website should cater for all surfers ie the lowest common denominator - the dude running a 386 and internet explorer 4 on an old CRT monitor capable of max res of 800x600. These aren’t bad things but aren’t nearly as problematic as they have been in the past.
Ultimately once you’ve decided I would watch your web stats carefully, you can always try some A/B testing offering different home page experiences and see whether your visitors respond better to one or the other. Google makes this pretty easy if you want something free.
The target market for my site are unlikely to be using anything less than broadband speeds, admittedly.
It’s not obvious from the URL or the website name what the site is about, but it’ll be obvious once visitors land on the home page.
I think if I can get the content to load first before the styling (i.e. background images, etc) then it’s not going to be a huge problem. But I’d still like to get the image to be as compact as possible whilst retaining as much quality as possible. So I think maybe 120-150k isn’t so bad if the image still looks good to you guys. I have poor eye sight so I can’t see detail too well, which is why I was a bit concerned when I could see some pixellation in the image.
I’ll try and cut the size in other areas as you suggested.
