Wedge

Public area => The Pub => Off-topic => Topic started by: Dragooon on December 22nd, 2010, 01:00 PM

Title: What to do with an annoyingly large PNG background?
Post by: Dragooon on December 22nd, 2010, 01:00 PM

I got a background(body) png image which is very large(It is about 1964 x 810 and weights 304KB). I am wondering if there's a way to skim it down to a smaller size or if there's a way to send an background image according to the user's screen size?
Link : http://bazaarshotdeals.com/templates/default/graphics/bg.png

Title: Re: What to do with an annoyingly large PNG background?
Post by: Arantor on December 22nd, 2010, 01:02 PM

Try saving it as a JPG and see whether that generates any nasty image artefacts.

As for resizing, not if done as a background-image as far as I know. That said, you could try dropping it into an image, forcing size in the attributes (which causes rescaling, rather than using CSS width/height which crops), then positioning it fixed, top/left 0, with a z-index lower than anything else.

Title: Re: What to do with an annoyingly large PNG background?
Post by: Dragooon on December 22nd, 2010, 01:10 PM

No, I meant sending a file which is closest to the user's width/height. Not resizing a overly large image in CSS(Which is done by background-size BTW).

Title: Re: What to do with an annoyingly large PNG background?
Post by: Arantor on December 22nd, 2010, 01:24 PM

Oh... in which case the only viable way is to have it requested via JS, where it's sending the user's width/height in the requesting URL and resize it on the fly in PHP or similar, if you're looking for truly closest.

Or have several images pre-sized, requesting the image from 'nearest'.


Background-size, while cool, doesn't work in IE yet to the best of my knowledge, which means you still need to find an alternative solution for the biggest userbase.

Title: Re: What to do with an annoyingly large PNG background?
Post by: Dragooon on December 22nd, 2010, 01:34 PM

Quote from Arantor on December 22nd, 2010, 01:24 PM

Oh... in which case the only viable way is to have it requested via JS, where it's sending the user's width/height in the requesting URL and resize it on the fly in PHP or similar, if you're looking for truly closest.

Or have several images pre-sized, requesting the image from 'nearest'.


Background-size, while cool, doesn't work in IE yet to the best of my knowledge, which means you still need to find an alternative solution for the biggest userbase.

Thanks for the JPG suggestion.
Saving it as a JPG in 50 as quality made it 20KB without any visible quality loss. lol....
And I didn't know background-size is a CSS3 property until now, glad I don't use it much :P.

Title: Re: What to do with an annoyingly large PNG background?
Post by: Nao on December 22nd, 2010, 01:34 PM

Same as Pete.