We just released our latest stack “Caffeine”.
Caffeine for all intents and purposes is an image stack, but it has a valuable trick up it’s sleeve.
The stack will allow the page to load at a blistering speed, compared to an identical page using the standard image stack.
The way it achieves this is quite unique, and fully explained in the demo page here.
It has a few other nifty features that will be revealed as you scroll through the demo page
The details of how the stack works are at the bottom of the demo page, but I will add them below for clarity.
Suffice to say, some of the comments in that post are completely inaccurate, and disappointing.
SO HOW DOES CAFFEINE LOAD THE PAGE SO FAST?
Normally when your page contains a lot of large images, every single image has to be fully loaded into the browser before the page load is complete. Images can be extremely large in file size and extremely slow to load, especially when there are lots on the page.
What Caffeine does is makes a tiny copy of your image (just 50px) when you drop it into Rapidweaver. When the page initially loads it displays these tiny images stretched out to be the same size as the original for display.
Then once all those tiny images have loaded (just a few milliseconds, because they are tiny) the page will reach a loaded state. This is at least 20x faster than normal being conservative.
So what now. So you will briefly see those tiny images filling the space of the finished fully loaded large images, but they do give a good representation of whats about to appear.
Now Caffeine will load the full size images that it finds the user can actually see in the current window, (a second or so), and the user can now see any images that are visible in the window in all their glory.
What about the rest of images that are not yet visible in the window until the user scrolls down the page?
Well, as the user scrolls down the page, just before these other images come into view, the original image is loaded. The tiny blurry image fades out and the full size original fades in.
One other thing to note. Caffeine will never load a full size version of your image on a smaller screen. that would be a waste of bandwidth, and time. Instead, when Caffeine detects a smaller screen device it loads another smaller copy of your original image that is more suitable for this screen size. #stayfast
Thanks, appreciate the reply! BTW hunter 3 great upgrade!
Yeah unfortunately the google group has gotten to be too biased, a lot of foundation fan boys
A really good question. Why? I tend to avoid stacks that do now have that functionality as my websites like to grow. I cannot use drag and drop images as they make project huge. And when the website itself has about 50 pages I really need to warehouse images.
@zeebe, @koles
This Stack reduces the dropped image to a smaller size in addition to the original one, so that the smaller image is displayed first, and the larger one loaded afterwards.
This size reduction cannot be done with warehouse images, as it is done with Stacks functionality.
As @instacks said, but we generate 3 scaled images automatically when you drop an image for use on different device sizes, to speed page load (impossible with a warehoused image).
Warehoused images slow down the edit mode view of the stacks plugin.
Warehousing images just goes against the stacks plugins carefully designed User interface.
There are cases that could benefit from image warehousing in some shape or form. But we believe that only really starts to make sense for websites with thousands of images. Rapid weaver project files will happily sing along with many hundreds of images in them. Doobox is entirely self contained in a single Rapidweaver project without any form of image warehousing.
@instacks I understand that, but when in a warehouse option, you could actually give the user the option to have 3 different sized images, one for mobile, one for tablet and one for desktop. It is possible to do it with this stack, in a slightly different way. I understand now why @Doobox thinks warehoused images are not good for his products. I just had to ask as he has said it many times in the past without a real reason. I understand his answer and it makes sense. Just wondered why.
Emailed your support a week ago but didn’t get a reply.
I use caffeine on my site silkywebdesign.com in the sample portfolio section and many times (not all the time) the images are pixellated and do not become clear. They basically freeze in that condition. What could be causing this and how can I fix it? I am also using Bricks 2 for those images…could there be a conflict?
@cyclingone You even sent us a reminder when you never got an answer to the first email. Unfortunately the email address you provided returns undeliverable. I even shouted out for you in the Doobox Slack group in case you were a member.
Anyway try our support again. Double check the email address you enter or maybe try a different email address in case there is an ongoing issue with the one you supplied.
My guess is that your not going to be able to use the stack in conjunction with Bricks 2. But I’d really need to investigate further to be sure. You could in the mean time, try the stack without Bricks 2 to confirm this yourself.
