Enjoying the whole picture online

For the purpose of this article, my goal was to render a very large image on a simple html page. The image I chose for both size and interesting features is from Google Cultural Institute: Nuit étoilée, Vincent Van Gogh, 1889 courtesy of the Moma (New York).

The picture is 30'000 x 23'756, or roughly 713Mpx in a jpg format weighing 215Mb on my hard drive. Not your average Instagram snap (640 x 640, ~0.4Mpx, 33Kb).

tl;dr this page loads in less than 700ms, renders a 700Mpx full resolution, zoomable picture

And here it is (click the image!):

You might not believe it and of course there is a trick in the end (and we call it Prodibi).

So, here are the naive steps I took:
  • I couldn't find any explicit limit in the book to the file size of the image you reference in the src attribute of an <img> tag (mostly depends on memory management of the client's browser I guess). So why not try and do it the quick and dirty way? I have no idea what I'm doing
  • I quickly set up an AWS S3 bucket for convenience, so everything is hosted in the "same place".
  • I uploaded the image there, which took a few trials and minutes.
  • I created a simple html document with the minimum code:
<body>  
  <html>
    <div style="width:1364px;height:1080px;">
      <img src="https://s3-eu-west-1.amazonaws.com/prodibi-test/Van_Gogh_-_Starry_Night_-_Google_Art_Project.jpg" width="1364" height="1080">
    </div>
  </html>
</body>  
  • After uploading the file to the same bucket, it's visible here. You can wait for it if you don't have anything else on your plate today! PS: Don't, this does not really work: alt
  • By the way Pingdom.com managed to give me a speed test for the page: Speedtest for the page

Of course the page is 200Mb (why not 215Mb like the jpg btw?) and it does not even render the picture after those 20s loading...

This sucks.

The Prodibi Way:

Ok folks, I'll show you how you can embed your Prodibi pictures around.
(pretty much in the same fashion you do with youtube embeds)

  • Go to Prodibi.com, signup, create an album and upload your picture to it directly from the comfort of your favorite browser.
  • After the upload and server-side processing (1-2 min in my case), you see the picture in your dashboard with this menu accessible under each one. So just click "embed": screenshot
  • Which takes you here: screenshot
  • I won't go through the options available here. At this point you just have to copy the <canvas> snippet:
<canvas data-prodibi='{"id":"9ydmr8zdmerork","width":30000,"height":23756,"smartX":0.5,"smartY":0.395933,"mediaView":true}'>  
  • In a new simple .html doc, or virtually on any page accepting html (and scripts), you just have to paste that snippet and add the<script> icing:
<body>  
  <html>
    <div style="width:1364px;height:1080px;">
      <canvas data-prodibi='{"id":"9ydmr8zdmerork","width":30000,"height":23756,"smartX":0.5,"smartY":0.395933,"mediaView":true}'>
          <script>
          ;!function () {
              if (window.prodibiAsync == null) { var s = document.createElement('script'); s.async = !0; s.src = "https://max1.prodibicdn.com/libraries/pages/prodibi.embed.1.0.min.js"; document.body.appendChild(s); }
              window.prodibiAsync = window.prodibiAsync || [];
              prodibiAsync.push({ type: "settings", settings: { account: "anonyme" } });
          }();
          </script>
      </canvas>      
    </div>
  </html>
</body>  

(Of course the scripting doesn't need to come with every single image you might add to a page, but can instead be added once in the document)

  • This page sits in the same S3 bucket here, and that's it! Here is the speedtest: speedtest

Oh, and you can also embed the pic the same way in any other page, like here:


Click the image, please be my guest!



And this very page is also pretty well performing (even though I did not bother resizing my screenshots ;):
Speedtest on this very page

This means you can now rake in the benefit of shooting very large pictures then showing them off online. How cool is that?

Let me know what you think in the comments. Of course many will say, as a professional photographer, having their precious work online in full resolution is the last thing they want, because of theft etc... I know, this is crazy how people appropriate your work and rip you off as soon as they get the chance these days. However, there are occasions such theft is not a relevant concern: Having large product pictures on an e-commerce website for instance... Or showcasing sample pictures for your awesome new camera... Or displaying the full details of an impressionist masterpiece as with this article!

This is still early, but I wanted to show you that feature. And it is going to be much more streamlined in the coming weeks, you will hear about it again then ;)

Please write to olivier@prodibi.com if you want to try or deploy at scale.