I have one huge image, is it possible to load a part of the image that is showing (is visible on the browser) and other part if scrolled down, not at once(limit loading or something).
or
If not:
The other way is to slice the image with javascript or cut it to 2 images and load it separately, the second image is loaded once scrolled down.
the purpose is to save loading time and bandwidth.
is it possible with javascript, currently I don’t have any ideas to do this?
Thank you for your time
I don’t think this is possible because I think the file will have to be downloaded for you to even do anything with it in the first place. Both suggestions are impossible, IMHO.
I don’t know. I guess it might be possible to split an image into an “above the fold half” and a “below the fold half” and then hope that for most visitors their “fold” is where you hope it is.
IMHO a better approach, if you haven’t already done so, would be to optimize the image for the web.
But if I have 2(or more) images and second image is below scrolled area, so loading once scrolled to the second image etc. is this the only way to do this?
Probably need server side scripting php but who knows…
Is there a way that is good for the user and for the server…
Thanks
Yes thank you, the image is maximal optimized, but it’s huge 2880x11000 something.
no one has a screen anywhere near that big. You need to optimise it for the web by reducing the size to something that will actually fit on your visitor’s screen
Oh, I don’t know. The AMD display wall in Times Square is 10,048 x 2,368 pixels. 
AMD FirePro™ professional graphics light up 24 megapixels and 25,000 sq. ft. of immersive experience in the heart of New York City with Times Square’s Largest High Definition Display.
(roughly 350 x 70 feet)
Macbook retina display is 2880x1800px, so to get a clear picture, I need a huge image and resize it with CSS and the picture will be clear view. Welcome to the future:D, pixels are getting smaller:)
Added: Making several little images from the one image is bad for the server, because Inode usage will be increased dramatically!
No great solution possible? Currently I have found following choices:
1.Extra CPU and Ram Usage, by converting server side before displaying(PHP script).
2. Inode usage increases dramatically, making huge image to smaller images, inode’s are limited.
3. High bandwidth usage, longer loading times, longer server loading times, with a single huge image.
Any more choices out there?
You could also serve different sizes of the images based on the width of the screen, so you’re only serving the giant image when a monitor that requires it is viewing the page, and serve smaller image on smaller screens.
Yeh it’s an idea, thank you, currently I have selected version to make the one huge image to smaller ones and load on scroll. This is probably the only way to go, with good image compression I don’t think there will be any loading problems. About the different images for different screens = 2x more images and size on hard drive+the reso and screen pixels are a bit tricky.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.