Hi all We have a table with a form below a scanned image of a form above it. As the form fields in the form are filled out the scanned form is filled out via js. We initially had the scanned form image as the background and used absolutely positioned divs to define where the text was displayed.
This is quite a big image so we looked at ways to optimize it. My web designer decided it was a good idea to cut up the image (splicing) and put it back together using a table with tr and tds. This produced 37 little images and seems completely mad to me and that means 37 http requests which can’t be good.
I thought about spriting the background images, that may help somewhat?
Unless you’ve managed to optimise the original image by using repeating sections then slicing one image into 37 images is not going to make the file smaller. It’s going to make it bigger.
Sprites will reduce the http requests but if all the sprites are just sliced bits of the original image then why bother slicing in the first place?
Of course placing text on a fixed background image is not a good idea because it will break if users have a different font-size to the one that you expect.
As others have said we’d need to see what image you are talking about to give more precise answers.
It sounds like an OCR scan of a form has been used and is now effectively an image map or at the least been converted into a TABLE layout in either case it seems a crazy solution.
I wouldn’t have a scanned image of the form because as I’m reading your description I’m thinking WTF? But as Ralph says, it’s hard to grasp what’s really going on without seeing a link.
But as Ralph says, it’s hard to grasp what’s really going on without seeing a link.