Load images from bottom to top?

Question

Is it possible to load images from bottom to top?

Assume that I have a long, very long image that needs 60 seconds to load. And the content is readable from bottom to top, can I do anything to make the browsers to load my image from bottom to top so users can read it while the image is loading?

Thank you,

This is a funny "AAAAAND ITS GONE" meme related to this question.

---

Thanks to all you guys who have answered my question, here are some solutions I have summary:

Solution 1: (Derek's answer)

Flip the image and then display it with -webkit-transform: scaleY(-1);

Demo: http://jsfiddle.net/Nk6VP/

Solution 2 (aloisdg's answer)

Use BMP format, this way browser will load the image "upwards" but BMP is not a good file type to save big images, but its still a good try since you doesn't need to flip the image at server-side.

Demo: http://jsfiddle.net/dfbPz/

(Please disable cache to see the loading in the demo)

Miamiami

I believe this is not possible. – Heterography

You can first load the image and then show it when it's totally loaded using JavaScript, and if you are asking for an effect, that image should grow up from bottom than you can check my answer here – Gurule

@Mr.Alien How much overhead and delay would that cause? preventing the user from seeing the image while really loading is a bad thing to do in terms of UX – Heterography

@deadlock Agreed, but since OP has a requirementm which is weird, the only suitable thing over here is to load the image first and then show the visitor.. if it was top to bottom, I would've suggested lazy load. – Gurule

@Mr.Alien: assume that is a big image that needs 60 seconds to load. Since the content is readable (from bottom to top) while the image is loading, I don't think there is anything "bad" in terms of UX. – Miamiami

Chrome actually loads image from bottom to the top as well as Firefox, if you haven't noticed. – Teniafuge

@TrungDQ Ya, only because of BOTTOM to TOP I suggested that... – Gurule

Answer 1

In fact, you can. Just use BMP format. This format is stored from the bottom.

You can find a sample of image loading upward here. (You have to click on the button "Bitmap and .rle Images to display the sample.)

From the Bitmap file format at fileformat.info:

[Regarding file header structure] If Height is a positive number, then the image is a "bottom-up" bitmap with the origin in the lower-left corner. If Height is a negative number, then the image is a "top-down" bitmap with the origin in the upper-left corner.

You can find more info on this topic in SO or this one.

Hump

I'd like to point out that BMP's lack the significant compression of JPG files. If the JPG took 60 seconds to load, make sure you test how long the BMP takes... – Phellem

@Hump Can you upvote it too ? Never say this, you help to help, not to score... – Gurule

@Mr.Alien If I want to score ? Not really. I am pretty new to SO. Sometimes, I cant do something because of my low level of "karma". It seems important here. Do you have a link for good practice about this ? – Hump

@DanielRippstein I think the best way is to use a progressive format or add a small loader. Thank you for your comment. – Hump

Answer 2

I think technology like Spdy (which is a replacement) for Http makes such stuff possible..

And even Browsers like IE/Safari don't support it, because of the fact, that it's an Google technology

Look at this demo: https://www.youtube.com/watch?v=zN5MYf8FtN0&feature=youtube_gdata_player around minute 38

And yes, you would also need to split your image up in multiple parts for this... Like suggested in another comment here

Mallemuck

Answer 3

You can chop it up into slices in the server and load them separately. This is probably the only way to do this since you don't really have that much control over how contents are sent.

OR, just rotate the image in the server, load it normally, and display it with transform: rotate(-180deg).

Vincenz

I was going to suggest this, BUT it will result in increase of HTTP requests – Gurule

@Mr.Alien - Physically rotating it will do it, although it's kind of... weird. – Teniafuge

Yea, but chopping and all is weird anyways, also you cannot assure that which chopped image will load first.. am not sure we can reverse the lazy load... like fire script every second inject the source one by one from the last img tag – Gurule

@Mr.Alien - Well since the browser can only load 2 resources (or something like that) at a time we can tell the browser when to load the next sets of image. – Teniafuge

Any how we can tell browser which should be loaded first, its a bit complex scenario, or he can do is load the images and update the img tags from bottom by feeding src using JS, just what I said in my previous comment.... because I use chopped images for creating mailers, images are loaded randomly... – Gurule

Answer 4

LIVE DEMO

<img src="perfect.jpg" style="background-image:url(imperfect.jpg);">

The huge image will slowly appear over the placeholder by magic!

_{A bit of CSS for that img like background-size might also come handy. You got the idea.}

Peipus

Answer 5

If your goal is to make your content readable by user when your image loaded, you can use jquery lazy load image plugin, here a demo http://www.appelsiini.net/projects/lazyload/enabled.html

and you still can use jpeg image which have smaller size than bmp

Internist

Answer 6

Here is an alternate way that is Backwards-Compatible with uncommon browsers. The flipside (aha) is increased page size and more prep work. You decide if the benefits outweigh the cons for your specific needs.

Step 1: Open the image in an image editor, flip it vertically, and upload it as a new file on your site.

Step 2: Code! Details below...

JSFiddle: http://jsfiddle.net/5uLZD/1/

Libraries: Modernizer, JQuery

HTML:

<!--Source below is the 'unflipped' image-->
<img src="http://i62.tinypic.com/wratsj.jpg" id="bottomtotop">

CSS:

.flipped {
    transform: rotate(-180deg);
}

JS:

if (Modernizr.csstransforms) {
    // Source below is the 'flipped' image.
    $("#bottomtotop").attr('src', 'http://i60.tinypic.com/2qajqqr.jpg').addClass('flipped');
}

You can alleviate the size issue by simplifying the Javascript and getting away from the frameworks (i.e, use "document.getElementById('bottomtotop')" in place of "$('bottomtotop')" and so forth), but that will take a significant amount of time and work.

Phellem