How do websites use large images?

Question

I'm noticing a lot of new websites that have freed themselves from boring, traditional layouts and a lot of them are using big images. From my admittedly limited experience in web design I know that large images = long loading times. So, how are these new sites doing this without crashing your browser? In fact, they load fairly quickly. This example blows my mind as there are multiple large images: http://grindspaces.com/

So what's the deal with all of this? I'd like to start designing more interesting sites and I feel like knowing the answer to this could help me.

Answer 1

Asymmetric is when something symmetric is manipulated to return a non-symmetrical output, it looks like they rely heavily on CSS3 and a spry/html data set along with javascript for the overflowing background scroll effect.



Spry objects perform faster as each image is located in one file and dynamically called with a CSS background position. The images themselves could be jpgs (low quality, low file size) or they could be small and resized with javascript and a codec like ffmpeg-php, or both. You'll have to decide which methods works best in a scenario. Look at the big picture, no pun intended =P



HTML & Spry : http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WSA706FAB6-11AF-4241-8647-35CD8E31D254.html



FFMpeg-PHP : http://ffmpeg-php.sourceforge.net/

Answer 2

Those are some big images and with them comes that large file size. There are a lot of factors that affect file size with images. Format (gif, jpg, png), Quality, etc. I use photoshop and the "Save Image for Web and Devices" option to choose the quality and select a good format.



Another technique is to repeat x or y. If you want a gradient button you can make an image the is 1pixel wide and say 50pixels tall and repeat x across the button.



Hope this helps.

Answer 3

Well.

Methinks its a combination of asymmetric loading and kinda banking on broadband actually.

Those images on grindspaces for instance are coming in between 250 and 600 K each. That's not tiny. That site wouldn't play nice in a dial-up scenario.



Sorry... thats a whoopsy. Asynchronous loading. Means that stuff can load in a given order or or at the same time, and you don;t have to wait for one element to finish before the next one starts, so you can for instance, get your text and menus up while the background finished up.

Java onload events and such...

http://www.openjs.com/articles/ajax/ahah_asynchronous_html_over_http/