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.
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 06:20 PM.
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
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.
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.