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)

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.

Answer 2

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).

Answer 3

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

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.}

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

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.