I have a site that I am working on that has very large images.
what is the best way to preaload them?
Thx
D
Make sure to optimize them first, in something like Photoshop > Save for Web. You shouldn’t be offering up large images files on the web. They can have large dimensions without being large files. For example, the image could be 2000px x 2000px and yet be saved at a small file size (like 30–100kb) and still display nicely in a browser. If you are serving up images of more than 100–200kb, you are on the wrong track. So deal with this first before worrying about preloading.
Hello there.
I already did the photoshop>saveforweb.
the main sunrise pic is
2000x1333 px
Doc size
27.778x18.514
@72px/in
when I go to save for web & devices, picked teh png-24 option, default is bicubic. size 100%…
is there anything else I could change to improve on this?
thx
D
The resulting file size is the important thing—but you left that detail out. 
The main thing I’d change in those settings is the 100% … assuming you are talking about “quality”. Usually you can set it to 50–60% and not lose much qulaity, yet massively reduce the file size. Indeed, if you make the image huge (like, say, 2000px wide) but then squeeze it into a smaller on-screen area like 1000px width, you get sharp, retina quality display, even if you save the image at around 20% quality and at a very small file size.
Thank you for the advice will go try it out.
the end size should be big, the same? so it should be a large background. Did I misunderstand that?
The only time (usually) that it can help to preload an image is one that is shown on hover and there is a delay. In which case you can simply put the image at the bottom with display none. If the browser doesn’t preload with display none css just position it off screen or other.
The dimensions (width/height) are not the issue. The issue is file size ( in terms of kb etc.)
In addition: you can have a look at the article [U]Image saving with gif, png, jpg: which is the best format?[/U]
Once you have the images in the smallest size (in kB), the question “why preload?” is arising. Is it for hover-images, for a javascript-driven image carrousel, etc.? Maybe a “postload” technique can be used, so that the page itself is appearing as fast as possible.
Thank you all.
will follow up on all the suggestions.
As it is the large images are for the backgrounds.
In ADDITION to OPTIMIZING your images, you should also consider your image deployment strategy.
- Is the image CONTENT? No, then could it be used as a CSS element BG
- If the image is a BG, is it tiling. if yes, have I created the SMALLEST tile unit for a seamless pattern?
- If it’s NOT repeating, can the container be sized to the image? in which case you may benefit from using sprites ( many images in ONE file). a sprite file may or may not be lager than the sum of its parts, but the benefit of FEWER HTTP REQUESTS will make your site load far quicker.