Filemaker Pro makes it easy to store and display photographs, graphics and color swatches in container fields which is not a unique talent. BUT combine the storage of images with a full featured database and you can create something far beyond iPhoto or other image catalogs (but you may not be able to add every feature they have).
So, let’s consider how to do this and create a fictional company that has a series of photographs taken using one of today’s best cameras and the files it saved are 12 megapixel files that create stunning 11 x 14 inkjet prints or full page images in printed catalogs. We want to create a Filemaker layout using these images. We are novices who just bought Filemaker Pro and are creating our own files and layouts. We discover containers and how to insert and import images and how to size the container images on our layouts. Our graphic talents are extraordinary and our layouts are the envy of all.
We host our file on an inexpensive shared host for $20 a month and invite our clients to log in using Macs, PCs and IOS devices.
And it is a disaster!
Typical phone call or email: I fell asleep waiting for your layouts to load…
What the heck happened?
First let’s consider the shared host. Cheap has its price. At 8:22 every weekday morning one of the sharing databases does an intensive update of 34,000 records and during this update the server is highly stressed and our ability to do our work is restricted. Layouts there loaded briskly now are slow to load. The same thing happens at several other times during the day. But to be fair, we take our own shot at every one else when our clients try to download 480 Megabytes just to list four records… And we have 10 of them logging in at the same time and a total of 30 clients during the day. And we get a notice that we have exceeded our download allotment and our clients exceed their 3G and 4G maximums… YIKES…
Why is it so slow? How can I make it go faster?
First, your file needs to be hosted on the fastest possible server and connection you can afford. A low priced shared server is not the fastest but the slowest even if it is on a T3 or faster. Ask your provider if you can get a private server where you are the only user. Mine provides shared for $20 and private beginning at $100 a month. Your in house server connected by Ethernet to a hub is the fastest but doesn’t compare to opening the file on from your hard drive.
Next, do everything you can to make your file faster. Which brings us to our own venture. We designed the file on our laptop working at home, at Starbucks, on the plane and so on. We imported or inserted all of the photographs from the files we saved from iPhoto and Photoshop or other graphic programs. We impressed the heck out of our self and whomever was looking over our shoulder as we tested the file on the laptop or MacBook Pro. The 17 inch monitor on the mobile computer is a winner.
Wow, is that file a big one! 4 Gigabytes… How did that happen. I only added a few hundred photos.
Sound familiar?
We copy it to the server either in house or on a remote hosted server. I like remote since that provider does all of the work of maintaining the equipment, etc. and has much faster pipes than I do. (If I pay for it.)
Now let’s think about what we did in Novice Mode as first time users.
Filemaker makes it easy to insert or import a 12 Megapixel image into a container field without Filemaker or you worrying about how this will affect the speed of our layout displays. Even experienced developers who haven’t worked with images may insert full size images into their containers as we did above. If the file is hosted on a remote network it can take forever to display a list view of 60 x 60 or 100 x 100 images, especially one where 5 or 6 images are displayed on each line. OK, what web page displays 40 100 x 100 12 megabyte images? NONE. How many Filemaker developers try to display 40 12 Megapixel images resized to fit 40 100 x 100 containers. Did you? Did I? Did We?
So, we are transferring 500 Megabytes of data to display one list view and wondering why it is so slow?
Let’s look at what we did to create that list view of 4 images per record. First we placed the full sized image file into a container field. Then we placed that container field on various layouts and sized it to fit the layout as needed. On the list view we sized the container to 100 x 100 pixels and on the form view we sized the container to 500 x 500 pixels. We discovered we could ask Filemaker to resize the image to fit even though our image file was 12 megs and perhaps 3000 x 3000 pixels.
What we overlooked is that to resize the image to fit much smaller container objects Filemaker must download the full image and then manipulate that image to create the smaller size. And do this for every image on the layout. So, the first time the list layout is displayed ( 6 lines of 4 images each) we are asking Filemaker to download and resize 24 x 12 Megs of image data or 288 Megabytes of data for one screen.
Some techy may point out serious numerical issues with my example and I won’t argue with him about that. Note, technical types, this is not an exercise in technical data but an attempt to point Filemaker designers in the right direction by exaggerated example.
So, back to reality or at least my brand of reality.
My laptop can process this fairly quickly from local files but must wait for a remote host to transmit the data. An in house Filemaker Server is a bit slower and slower still if there is a lot of network traffic. A remote host can be affected both by its own traffic and by bottlenecks on the Internet. Using 3G or 4G is even slower. Pushing 288 megabytes over cellular networks is amazingly slow.
I have created a file to display 4 images in one list record and sized to fit my laptop screen. These images just happen to be the size of an iPhone screen 320 x 4480 and it just so happens I am using this file to store screen dumps of my layouts and of apps that I find interesting. I use these layouts in this blog.
My laptop is quite happy displaying the list images with maybe just a hit of a redraw lag. I’m sure my next laptop will not do this but I only paid $500 for this one and it only has 4 Gigs of Ram and a 2.3 Gigahertz 4400 dual core processor.
So, let’s try that layout on my Touch/iPhone but first let’s consider its specs. 256 Megs of Ram and a single core A4 processor. 1/16th the RAM and 1/8th the speed or maybe less.
The result of trying to display that massive list is that it can be done BUT there are two issues: transfer speed and RAM image space. Computers allot a portion of ram to hold a desktop image and graphics programs create their own RAM images. Without being too technical it is easy to see that Filemaker Go is using about 1.5 the screen size for a picture map of its screen. I base this on how much of the display can be seen when I swipe to the right before the redraw begins.
This image map is one issue and the redraw rate another. Redraw is affected by the speed of our connection to a remote file and the type of connection to that remote file can be fast, slow or darn slow.
So there are various factors to consider: image size, container size and speed of data transfer and resizing the image and showing a different portion of the images.
The worst design would be to use a very large image size and try to resize it to fit in a small container over a very slow connection.
The best design would be to store use images resized to fit the size displayed on your layout. Thumbnail is a term used for an image that has been resized. Thumbnails can be created for each container object size and stored in a separate container field.
For instance, you will be using 400 x 400, 200 x 200 and 100 x 100 images on various layouts. So, you create three container fields to hold these 3 image sizes in one record. You then use a graphics program to create a new image file where the images are resized to these specs and saved as png.
The 400 x 400 pixel png image is imported or inserted into the container field that will hold all of the same size images. The 200 x 200 png images into that container field, etc.
Now the layout objects are the specified field and the object is sized to match the image size and the formatting is crop to fit. We now have the minimum sized image for the object size on our layout. Saving the file as a png or jpeg reduced the number of colors and also compressed the file.
Now rather than transferring giant image files and asking Filemaker to do a lot of work, we only transfer the minimum sized image and Filemaker does not have to resize it.
I was using a 300 x 200 image and resizing the container to 70 x 50 or so. When I created a thumbnail to match the 70 x 50 I gained a lot of speed displaying 5 images per line in list view using my Touch with an Internet connection to my Laptop.
In the past the thumbnails would require a graphics program to resize the image and save as png. Filemaker does create a thumbnail when you import pictures from a folder but not if you insert the image or use a linked image.
BUT…TRUMPETS AND DRUMS…
Filemaker 12 now has its own native functions for creating thumbnails using a script, features available using plugins for quite some time. Now we can create a thumbnail from an image in a container field and store that thumbnail in a second container in the same or other record, even in another table.
Whew, what a lot of hot air?
So, I am working on a file designed for screenshots of an iPhone since that is where I like to design. I will make this a demo file to show how thumbnails can load faster over wifi and the internet so keep an eye out for it in the Box downloads. Coming soon…