Creating sprite sheet for 100% h/w images

[jundo12]

I've implemented 100% h/w background images on my pages so that they appear roughly the same on various resolutions or browser conditions. however, the images are graphically heavy, and optimizing them to save load times degrades the quality enough to be unattractive. So i attempted to try sprite sheet on them only to learn that sprite sheets can't be made of background images set to be 100% h/w. is there a workaround for this?.

p.s. i mean that the html is written for the image to display at 100% h/w. for example,
<img src=image.jpg width=100% height=100%>

[Beverleyh]

I don't think there's a workaround but you should still be able to optimise them to some degree before there is too much of a noticeable quality loss - how big (file size) are we talking?

It depends on the design though because sometimes you can work *with* a quality loss, for example by blurring or posterisation, and use that as a design feature - the happy side effect is smaller file size.

And there's the argument that if an image is used on the background, does it really need to be that good a quality anyway - probably not because the content is usually the more important part.

Another method, if you have a solid content panel sat in front, is to block out the middle portion (the part that is covered with content) with a solid color OR use multiple background images - one on the left and one on the right - to reduce the overall size of the image(s).

It really depends on the design and what you're trying to achieve (what you mean by "background" image too) so if you need more help, please provide a link to your page.

[jundo12]

hi bev

it's for a game, where the background=the game playing area. unfortunately, losing quality will cause the letters to be unreadable. you can see it here
http://thelivingmoon.com/undomiel/interface/earth/earthbg.jpg

[Beverleyh]

So the game platform is in HTML and CSS?

And is that the actual background image you're using?

Can you separate the text from the image? So you just have the image saved in whatever format but then have the text placed on the page with CSS? That would be the best way to preserve the integrity of the text.

[jundo12]

yeah EXCEPT, i'm already having problems getting stuff to stay in the right place. lol for example, in ff and ie, the game looks fine. in google chrome, the aspect ratio is different than ie and ff, causing things like divs, to move from their intended spots.

[Beverleyh]

I'm not sure why the aspect ratio would be different in Chrome but if you post a link to the page we can help with positioning.

[jundo12]

that is very nice of you. i'm not sure you would appreciate the site lol it's in html frames and not finished. using html frames solved some problems for me, such as not knowing how to set up things like saving data to the browser's memory. for example, when the player creates a character, the frames will save their choices such as appearance modification (and also a 3d person view of their choice, which will persist with them through out their game experience). it's very old school. but i'm not a programmer nor a wiz with html/css, so it is what it is. please try not to be offended lol
http://thelivingmoon.com/undomiel/interface/earthmale.html

[Beverleyh]

I'm not sure what I'm looking at. Which div do you need help placing? And as you specifically posted the green "earthbg.jpg" pic, can you provide a link to that page?

[jundo12]

it all has the same problem. it renders different in google chrome than it does in ff and ie and safari etc. google chrome doesn't appear to like percentages. i deliberately used percentage on the images and divs, to be sure it looked the same in every browser, and it does in most of them, except google chrome. notice the image of the character in the bottom frame. in ff and ie, he's flush with the bottom of the page. this was necessary because it's not an entire figure. only shoulders up. in chrome, he's floating about an inch above the bottom of the window and is smaller in size compared to ff and ie, and its essentially the same on all the pages. i tried a panorama at one point, and it was fine in ff and ie, but in chrome, it shrank up in the left hand corner to such a degree that it was obvious it wasn't playing nice with percentages and that the window is behaving as if it were an entirely different aspect ratio than other browsers.

[Beverleyh]

in chrome, he's floating about an inch above the bottom of the windowI'm not seeing the character floating higher in the bottom frame, but I do see that your positioning from the top - try positioning him from the bottom instead;
style="position: absolute; left: 40%; bottom: 0%; right: 2%"

Other tips to help with positioning;

Also, elements have default paddings and margins that are different in different browsers, so try using a CSS reset - the most basic (poor man's) reset is the universal selector reset;

* { padding:0; margin:0; }This resets all elements to have 0 margin and padding. If you have lots of elements on your page, it can cause a bit of a slow down while the browser applies it to everything, so for this reason it's not really recommended in CSS circles, although it might be useful for quick prototyping/testing. There are other popular, more optimised resets that you might like to use instead: http://www.cssreset.com/
Also read: What is a CSS reset? (http://www.cssreset.com/what-is-a-css-reset/) and Which CSS reset should I use? (http://www.cssreset.com/which-css-reset-should-i-use/)

Also try standardising the box model with this CSS;
*, *:before, *:after { -moz-box-sizing:border-box; box-sizing:border-box; }This stops accumulative width and padding measurements on all elements - so for example, if you have a 300px box with 25px left and right margin, it stops browsers rendering it at total 350px width (width + padding). With the box-sizing CSS above, the width of the box would be 300px regardless of whatever padding you set inside.