9 Replies Latest reply on Apr 12, 2013 4:47 PM by AmintaAdobe

    How to deal with a massive JPG?

    Ms. Charcoal

      Hey everybody,

       

      as part of an art project I have a massive jpg (50mb).  My stage will still only be 500x500, but I'm planning to swipe and zoom around the massive canvas (11300x11300).

      I'm not sure if Edge can cope with that, has anyone made any experience using images of similar size? I wouldn't mind a long preloader, but then it should run smoothly.

       

      Is it better to break that image down in to various parts (say, quarter it or whatnot) or shouldn't that make a difference (or make things worse)?

       

      Basically, before I start I wanted to check back with you guys if there is anything I should be cautios of, or if there is no chance on earth that that will work properly no matter what I do (and I'd have to rethink the project).

       

      Cheers everyone!

        • 1. Re: How to deal with a massive JPG?
          heathrowe Most Valuable Participant

          Your canvas dimensions and jpg filesize is way 'over-the-top'.

          A comfortable filesize is 1-2mb jpg, but 50mb!

           

          Is this image optimized? Example via Photoshop Save for Web jpg output. You have the option of lowering the imahe quality to further reduce filesize.

          Is the image higher than a 72dpi? If it is, reduce it to this value. Images viewed in the browser does not need to be anywhere above this dpi value.

           

          Darrell

          1 person found this helpful
          • 2. Re: How to deal with a massive JPG?
            Ms. Charcoal Level 1

            Hey heathrowe, thanks for your fast reply

             

            I'll see what I can do to reduce the filesize, but I doubt that I will be able to get it down to 1-2 mb jpg. The problem is that I have to zoom in pretty far into that image, obviously without having it become very pixilated.

             

            In case I can't reduce the file to a workable size without losing the standard of quality that is need, does anyone have an idea how I can achieve what I want?

            I have a big image (kind of like a big map) where I want to be able to zoom in very close and pan around.

            • 3. Re: How to deal with a massive JPG?
              John Hall Level 4

              You definitely want to check into something like http://www.zoomify.com/html5.htm or roll your own. It's a common problem but you handle it with a huge graphic, unless you don't care if everyone leaves your site ;)

              • 4. Re: How to deal with a massive JPG?
                Ms. Charcoal Level 1

                Okay, I will check that out, but I fear it's not going to get me where I want (I dont want the user to scroll for him/herself, I want to use Edges functionality).

                --

                What do you reckon (roughly) is the biggest filesize for the jpg that would still be doable? Can I get away with 5mb? (I don't have to worry about losing people with a long preloader, just the animations need to run smooth)

                 

                Message was edited by: Ms. Charcoal

                • 5. Re: How to deal with a massive JPG?
                  heathrowe Most Valuable Participant

                  Charcoal

                   

                  What exactly is the image you are using?

                   

                  The reason I ask, if it is a map, AND it was originally created as vector (ala Illustrator, Corel or vector graphics program), you may have better luck reducing the size on output. On that note, alternatively, output to .svg may also produce better file size.

                   

                  Darrell

                  • 6. Re: How to deal with a massive JPG?
                    Ms. Charcoal Level 1

                    Sadly, it's not vector-based, it is a mixture of line drawing and photography. I am currently scouting through the web for tutorials to reduce filesize - therefore my question with what I can get away with - I have now reduced it to 6mb and 6000x6000, a size that would still work quality-wise...

                    • 7. Re: How to deal with a massive JPG?
                      heathrowe Most Valuable Participant

                      Ah - that explains the large file size.

                      Because I just a test in Illustrator using a vector map of the world (11000 in width x 7000h), output to png under 3mb.

                       

                      6mb is better than 50mb, though depending on end-user connectivity, you still may be testing their patience.

                       

                      Bummer its not vector based, this script addition would have been perfect http://jqvmap.com/

                       

                      Darrell

                      • 8. Re: How to deal with a massive JPG?
                        sarhunt Adobe Employee

                        Hey Ms. Charcoal,

                         

                        Regardless of what you use to author your content, 50mbs of imagery is going to give you a really bad time since the browser has to go to extreme lengths to render that content. I'd be surprised if any modern browser could handle that. Keep in mind too some versions of iOS can have problems with images larger than 1024x1024. Some other questions; were you intending this to run offline or online? 50mbs is going to take an eternity to download.

                         

                        Sorry not trying to be harsh, but you might want to rethink if this project is appropriate for the web. If you can give an idea of where your project will live and what you're trying to accomplish we might be able to help you with some creative solutions for optimization

                         

                        Thanks,

                        Sarah

                        • 9. Re: How to deal with a massive JPG?
                          AmintaAdobe

                          Hi Charcoal, you have to use a service like http://imagefog.com/: you can manage very very large images (also so called "Gigapixel") on their server and pan-zoom in nanoseconds also on iPad! One of the authors has wrote for me a method to implement it perfectly in Edge Animate, let me know if is useful!

                           


                          Davide