dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Lost Image Path

  1. #1
    Join Date
    Jun 2005
    Posts
    74

    Lost Image Path

    I've taken over a site and cannot figure out some of the coding. it's a small site with 3 pages. one of the pages is pulling in an image i need to replace. simple enough. normally i would just find the code pulling in the image, find the image name and replace the image. I can't find the code so i replaced the obvious image. it didn't change. I've checked every html css js and image file on the site looking for how this image is being pulled in. Can someone please take a look at this page and help me out? heres' the url www.kirkwoodcreamerycom. i'm trying to replace the menu image. few images to choose from....menu.jpg is one i replaced. i've attached the most obvious html file [menu.html] for your review. let me know what else might be of help. thank you.
    Attached Files Attached Files

  2. #2
    Join Date
    Mar 2010
    Posts
    672
    I am not sure what menu image you're trying to replace. For the menu background, it looks like he has it baked directly into the main body background image:
    http://www.kirkwoodcreamery.com/_img/bg-wrap.jpg

    For the menu buttons and the rest of it:
    http://www.kirkwoodcreamery.com/_img/sprite.png

    Which by the way is the most inefficient use of css spriting that i've ever seen. No matter if you or the previous guy created it, i'd recommend doing the site to where it doesn't require a sprite image like that.
    Last edited by Jarrod1937; 07-14-2010 at 07:20 PM.

  3. #3
    Join Date
    Jun 2005
    Posts
    74
    thank you.....http://www.kirkwoodcreamery.com/_img/bg-wrap.jpg .... i thought that too but the image doesn't have the menu in it. there is no call for menu.jpg and it's not part of any of the other images. i'm really lost on this. i've also search for an external link to the image.... to no avail. also...i'm not sure if you actually looked at the menu page itself which is here www.kirkwoodcramery.com/menu.html
    Last edited by sely; 07-14-2010 at 09:37 PM.

  4. #4
    Join Date
    Mar 2010
    Posts
    672
    The actual menu items are on the sprite sheet:
    http://www.kirkwoodcreamery.com/_img/sprite.png

    If you don't know about css sprites, basically you can place multiple images onto a single image (the sprite sheet) and then use css to display parts of that image (like just the menu itself) using a specific set of coordinates. That is what the past developer did, using the sprite sheet linked to above.

  5. #5
    Join Date
    Jun 2005
    Posts
    74
    ah.... i see. what is the benefit of doing it this way? [i realize you recommended changing it but i'm curious]

  6. #6
    Join Date
    Mar 2010
    Posts
    672
    CSS spriting is used to reduce the number of http requests needed for a single page. If you have 10 navigation images (like buttons, arrows...etc), that is 10 http requests for each resource. Considering network delay and other factors (in aggregate known as Time To First Byte or TTFB) can be up to 100 ms per request, you can easily cutout half a second or more of page load time by spriting those images as it then only takes 1 http request to fullfill the work of those 10.
    Normally this is a good thing... But the previous developer used css spriting as an excuse to be lazy. He basically demolished the barrier between content and presentation and threw the actual pages, in image form, into the sprite sheet... and then proceeded to use 8 bit transparency and thus saved it as a .png 32 bit... However, that sprite sheet alone is now over a megabyte in filesize. Compare this to a page mostly made out of html and styled with css. Text can be gzipped in transport and have its size significantly reduced, whereas that sprite sheet will always been inefficient.
    All of the other items look like they're saved as a 32 bit png, even the slider images, one of which is over 200 KB, but if saved as a .jpg could be easily around 30-50 KB. From a performance standpoint, that site is needlessly bulky and inefficient.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles