I have seen numerous website in which the large image header is split into small parts. Like this website http://www.satyamexport.com/ . Q 1 What is the reason ? Is it to indicate that web page is loading ? But if it is a large image then also it will load from top to bottom. How it is done ? Which is the best way to split image. Is there any software ? Or by using photoshop and other image editor we can split it perfectly ?
I can't really see why they did it, unless they really wanted that loading effect. Turning a single large image into many smaller images will make the entire site load slower. Why? Because every file on a web page has to be asked for by your browser to the server. GET thehtml.html GET thecss.css GET animage.jpg GET anotherimage.jpg GET somescripts.js Each GET takes time... the client (your browser) has to ask.... it waits for the server to see if the file exists and can be given... the server says 200 OK and sends the file. If you have one file that's 100kb, that's one GET request for 100kb If you have that same image cut up into 10 smaller files (each 10kb) yes they are smaller, but that's 10 separate GET requests... which make the server have to fetch the 10 different files! This is why most web professionals do the opposite of that site: for things like image rollovers, they can save bandwidth and increase speed by making mulitple images into one single image file, which is only asked for once. This is usually called an image sprite. You can read an example of using sprites in CSS here: http://www.fiftyfoureleven.com/weblog/web-development/css/css-sprites-images-optimization So I think that site you linked to is tying their hands and feet together before the race. It doesn't benefit them speed-wise. There may be some other, strange reason why they did it that way. Usually you see sites like that if they are "written" in Photoshop. Programs like Photoshop and GIMP have an "HTML" feature where it tries to turn an image into a web page. It automatically slices the image into squares, assuming each chunk is going into a different table cell, and often these programs write in tables. They are image editors, not HTML writers, so of course they do it badly. Don't let robots write your code. They write code like they dance: badly. There are automatic slicing programs within Photoshop etc too. I think every major image editing program has a slicing tool of some sort built in, not sure. That I don't know. None of my pages do that... the browser leaves the area blank until it has the entire file and then displays it all at once. There's another method to make a "fuzzy" version of an image appear right away, and then slowly the image gets clearer. That, you have to save the file in your editing program with "interlacing" which is done in gifs and pngs (I don't know if this can also happen in jpgs, I never looked). Interlacing I believe makes your file a bit larger though. PNG uses Adam7 if you choose it, which is not so bad as regular interlacing.