Develop Reference

Multiple image sizes vs browser image resizing / scaling

I have a page where I will be loading a couple of different sizes of the main image; although not all the large images will be loaded at once.
The scenario is this..
I have a slider which contains the thumbs for all the larger images; these all load when the page does.
The default large image loads when the page does, but the other large images only load if the user clicks on the thumbnail for that image and then I replace the src of the large image as so..
function changeMainImage(image) {
// Set big image
var big_image = image + '-big.png'
// Update main image url
jQuery('#main_image').attr('src', big_image);
}
Now because the large images don't load when the page does, this causes a small delay for the large image to show, which is rather undesirable.
Now I'm thinking that I could kill two birds with one stone with just loading the large image and no thumbs and just have the browser scale the large image into a thumbnail; I just kinda cringe at doing it this way as I have always hated sites that use this method for thumbs, but in my case it seems valid as I need to load the large image anyway.
This would allow me to reduce the number of http requests by 1 * amount of pics and also give me instant load of the large images once the thumb is clicked.
My only concerns are trying to figure out how to give the browser the correct dimensions so that the image scales to the correct proportions and also the fact that if the page has say 12 images; this way I am making the user download all 12 large images at once when they make not even be interested in looking at all 12.
Both versions have pros & cons - any advice what to do here?

The method you currently have is what I prefer to do. Load what is visible.
Now, to make the user experience better, many sites use a couple techniques. The first would be to pre-load the next image or two. If you have a slideshow-like display and have a good idea of what order the images will be displayed in, this is good.
The second is to display the thumbnail while the large version downloads. If your thumbnails are of a decent size, this lets the user get visual feedback that their click worked, and on decent connections the image will be downloaded soon after.
Finally, I recommend using progressive JPEG (if your images are photos) so that they are enhanced as they load.
For your data on sizes (and any other metadata), keep that in a JavaScript array of objects, or wherever else you store your image data. You can easily use JSON for transit from the server.

javascript: loading bar/wheel while loading composite image

I have an HTML page with some javascript functions.
It basically does this...
I have some images with transparent backgrounds (.png), I use the z-index property to sovrappose each image to the others so that I can assemble a new image.
With some buttons you can activate the javascript that makes a substitution of some images with the other.
Maybe an example will help you to understand the situation better:
Imagine a car. You have three images: glasses, wheels and body.
Each image has a transparent background so that if you see all the images together you can see the whole car.
With a button you can substitute the wheels image with another wheels image so that you can see more "versions" of the same car without creating an image for every combination (i have 345 possible combinations so this is the only way).
It works very well but it's slow :(
When I have to change only one piece, the substitution happens immediately, but when I have to change many pieces with only one click, it loads the images slowly so that it's a horrible effect.
What I need is a loading bar/wheel that appears over every other image and that disappears when the browser finishes loading the composite image.
I tried to search the web for a solution, but I only find solutions for loading the whole page. But in my case, the page doesn't change, only the inner images change.
How can I resolve this problem?
Thanks in advance,
marco

Best way to load 100 images in one page?

On my website there is a webpage where there are 100 images and it is inelegant to see the images that are loaded one at a time from the browser.
Is there some way to get it more elegant and nice to see ?

You could Lazy Load the images, which means they are only loaded when displayed on the browser. This works by simply using the following:
$("img.lazy").lazyload();
However, if the images which will be visible on page load are very large file size, theres not much you can do to prevent this.
An idea I have used before to make this more user-friendly is to place each img element in div which has a background image of an ajax loader. This at least gives the appearance that something is loading. Then once the image is loaded, this will overlay the loading image.
EDIT: Seeing your latest comments, if you are using very small images, as #afaf12 has pointed out, using CSS Sprites would be a suitable solution. A lot of large sites, including StackOverflow, make use of these. It means rather than 100 HTTP Requests being made for all the images, 1 HTTP Request is made (ie. 1 image download), and then CSS is used to position this image in different places.
There are various different CSS Sprite generators also available to prevent you from the laborious task of making this yourself:

Since images are very small, this could be a situation where css sprites are useful.
Instead of having 100+ small images, you have 1 large.
When you want to show a specific image, you have to specify background coordinates, for example:
div#div1 {background-position:0px -100px}

One way to make it look more pleasing is to make the images fade in when they have been loaded:
$('img').css('opacity', '0.0').load(function(){
$(this).animate({'opacity': '1.0'});
});
Demo: http://jsfiddle.net/Guffa/gzFFN/

http://code.google.com/p/jquery-appear/
jQuery appear event that is triggered when objects "appear" i.e. become visible on screen.
Create containers for all the images, and only load the actual images when they become visible on screen.

Another interesting solution can be found on this stack link. It is for all content but the code provided in an answer can be applied to image loading as well. Link

Auto-size thumbnails in a both left/right justified frame/window

I am doing on a webpage for display a large amount of pictures/thumbnails. What I am looking for is to auto-resize the pictures, make each line has fixed height, and the right margin of each line is also equal. Even the images are reformatted when I change the size of window, the above mentioned style is kept.
That is quite similar with what google did when displaying their images search results:
Google image example (resize your browser window and you may find what I'm trying to say :-) )
Anyone has idea on this would be much appreciated! Thanks

According to me there 2-ways, 1)by css 2)by js
1)CSS: you can add this in your css, this will resize your thumbnail accordingly.
img{max-width:100%;}
2)JS: Using js you can resize the thumbnails based on the available space and also decide on how many images do you want to show in one row.

How to do this image zooming trick in a browser?

I would like to do the following trick in a browser:
Create three image files of different size (small, medium, large) from one picture.
First, display the small image in a
browser.
When a user zooms in the small image
replace it with the medium one.
Now the user can scroll it within the
window up and down, left and right.
When a user zooms out the small image
replace it with the small one, etc.
I would prefer JavaScript (Flash is the second option). What tool would you recommend ?

A quick google search turns up:
http://www.intenseblog.com/design/8-amazing-javascript-image-zoom-scripts.html
and:
http://www.hotscripts.com/blog/javascript-zoom-scripts/
Several of these libraries appear to do what you want.

Would this work for you?
http://www.netzgesta.de/shiftzoom/
This might be for image data that is much larger than you are interested in.