4 Replies Latest reply: May 18, 2013 7:15 AM by Roel Hartman RSS

    Best practice for images in APEX

    Mindmap
      Hello All,

      I use APEX 4.2.2 .. Oracle 11g SOE...

      Speaking about the sample DB application. Suppose each product has more than one image. And that we have two Apps desktop & Mobile. Suppose Product A has 5 images.
      ===>>
      Does it mean that for Product A, I have to store 12 images as following:
      5 images for Desktop App where dimensions are e.g 640 x 480
      5 images for Mobile App where dimensions are e.g 448 x 336
      1 Thumbnail for desktop App 104 x 104 ( To show up on the report )
      1 Thumbnail for mobile App 50 x 50 ( To show up on the report )

      Here I noticed that the image are begin resized on the fly. As we upload images, we get thumbnails. Any comments ???
      http://blueimp.github.io/jQuery-File-Upload/angularjs.html


      Regards,
      Fateh
        • 1. Re: Best practice for images in APEX
          Roel Hartman
          You can also use the power of Oracle Intermedia to store multiple sizes of one uploaded image.
          See this old but still true blogpost (you can probably find more on this subject) : http://spendolini.blogspot.nl/2005/10/manipulating-images-with-database.html

          Of course you can opt to store just two sizes for each image (a larger and smaller) and do the proper scaling in the application itself.
          • 2. Re: Best practice for images in APEX
            Mindmap
            Hello Roel,
            Thanks for the response. I am aware of Oracle Multimedia. Maybe, I was not clear. As I got from you, you agree that I have to store 2 editions of each image one for desktop and the other for mobile.
            do the proper scaling in the application itself.
            You mean I can use Height and Width Attributes of the img Tag to scale the images to be used in Report / List . But as I know this does not reduce the size of the image. If the list shows 20 record with 20 images, the mobile webpage will be slow.

            So, do you agree that I have to generate a two thumbnails (one for desktop and another for mobile ) for each PRODUCT, or you were refereeing to something else ?

            Regards,
            Fateh
            • 3. Re: Best practice for images in APEX
              VC
              Fateh wrote:
              You mean I can use Height and Width Attributes of the img Tag to scale the images to be used in Report / List . But as I know this does not reduce the size of the image. If the list shows 20 record with 20 images, the mobile webpage will be slow.
              I don't think it is best practice to scale the images using width/height attributes because browser's have to scale them and you will send unnecessary data

              See http://stackoverflow.com/questions/1247685/should-i-specify-height-and-width-attributes-for-my-imgs-in-html
              and https://developers.google.com/speed/docs/best-practices/payload#ScaleImages
              • 4. Re: Best practice for images in APEX
                Roel Hartman
                As your thumbnails for Desktop and Mobile don't differ that much in size you can use one for both UI's.
                If there is a 'huge' difference you would take the burden of storing another image according to the specified size.

                The amount of "unnecessary data" for scaling is limited, so that won't raise an issue.

                You have to be aware though, that you don't want to size an image based on fixed pixels, because you probably want to get a slightly lager view on an iPad (or other tablet) than on an iPhone (or other brand). So your sizing should be "responsive": that means either create CSS with different sizing based on the screen width or use percentages.