Results 1 to 10 of 10

Thread: Creating sprite sheet for 100% h/w images

  1. #1
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default Creating sprite sheet for 100% h/w images

    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,
    Code:
    <img src=image.jpg width=100% height=100%>
    Last edited by jundo12; 05-11-2014 at 05:41 PM.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. The Following User Says Thank You to Beverleyh For This Useful Post:

    jundo12 (05-12-2014)

  4. #3
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    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/in...th/earthbg.jpg

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  6. #5
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    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.

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. #7
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    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/in...earthmale.html

  9. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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?
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  10. #9
    Join Date
    May 2014
    Posts
    203
    Thanks
    28
    Thanked 5 Times in 5 Posts

    Default

    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.

  11. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    in chrome, he's floating about an inch above the bottom of the window
    I'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;
    Code:
    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;
    Code:
    * { 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? and Which CSS reset should I use?

    Also try standardising the box model with this CSS;
    Code:
    *, *: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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  12. The Following User Says Thank You to Beverleyh For This Useful Post:

    jundo12 (05-12-2014)

Similar Threads

  1. Use sprite sheet with Conveyor Belt slideshow script?
    By isaiah658 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-19-2013, 03:02 PM
  2. found this site to make sprite images
    By ajfmrf in forum Graphics
    Replies: 7
    Last Post: 05-13-2013, 03:57 AM
  3. How are sprite images used
    By ajfmrf in forum Graphics
    Replies: 5
    Last Post: 01-13-2013, 06:43 AM
  4. Script - Style Sheet Switcher Images
    By jem in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 05-20-2009, 02:12 PM
  5. creating several dynamic images with php
    By nicmo in forum Looking for such a script or service
    Replies: 2
    Last Post: 04-21-2009, 07:13 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •