WebP is a method of lossy and lossless compression that can be used on a large variety of photographic, translucent and graphical images found on the web. The degree of lossy compression is adjustable so a user can choose the trade-off between file size and image quality. WebP typically achieves an average of 30% more compression than JPEG and JPEG 2000, without loss of image quality.
Will Woodgate/Stacks4Stacks has just released the WebPStack that makes it easy to add WebP images as resources or warehoused images in Stacks. Within the stack settings, you can provide an image ALT attribute, an optional tooltip title and an optional link. Then for older web browsers that do not currently support WebP, you can specify a traditional JPG, PNG or GIF image to use instead.
It's a well-known fact that images speak louder than words, so here's a comparison:
Test One: The image on the left is a compressed .jpg (ImageOptim) it weighs 385 kB. I took this compressed image and ran it through the WebPonise app which reduced it by a further 87.5% (default app settings) resulting in an image weighing 48 kB. After examining the image closely, I'm unable to detect any artefacts or a loss in quality.
Test Two: This 'jpg was dowloaded from Pixabay. After running it through ImageOptim it was reduced by 5.9% and weighed 193 kB (left). The WebPonise app (default app settings) reduced the same downloaded image by 41.5%. Result: 120 kB. Once again, I'm unable to discern any artefacts (although there's plenty of scope for them in the sky) and no difference in the image quality.
Did you notice the 'for older web browsers that do not currently support WebP' part? It's a fact that not all web browsers support WebP images. Safari, sadly, is one of those browsers and there's as yet no way to preview a WebP image on the Mac. Will's WebPStack ensures that your warehoused .jpeg is displayed on older browsers and will load the much lighter image for browsers that already support the WebP format.
And I know you're going to ask, so here's a list of the browsers that currently support the WebP format:WebP lossy support
Enter Portal from Joe Workman. Portal is a set of two stacks and a theme. The theme is important and MUST be used for your Portal In stack pages. It ensures that your content is correctly saved as .php elements and can be imported with the Portal Out stack.
The Portal Out stack then outputs your Portal content on every page that it's required. As a simple mnemonic, just remember that with the IN stack, you're putting content into the Portal, with the OUT stack, you're requesting data out of the Portal.
Instead of publishing your complete website (as is often necessary when using Partials), you only need to publish your altered Portal IN pages to ensure that all of your content is automatically updated. And the added advantage is that any images contained within a Portal page are cached so that they don't need to be reloaded. This is a game changer!
Using Portal is conceivably simple: build a Portal IN page that contains the content that needs to be repeated (using the Portal theme). Add a Portal OUT stack to a page that needs duplicate content and define the page that you wish to import. Publish.
Remember that you are using .php and that whilst RW can now render .php pages, you need to preview your Portal page before you can preview the imported pages.
Portal works with any theme, but there's a bonus for Foundation users. the IN stack has a setting for Foundation so that, if you use Foundation specific stacks on your portal page, you will not see the message that you haven't used the Foundation theme (remember, you MUST use the Portal theme for everything to work).
Partials – Great, but old hat! My future websites will use Portal instead!
NOTE: I have yet to test this stack in the wild.
* Text is 98% Yuzool original copy.
Loaderz is a completely different kettle of fish. It is simple to use, flexible, versatile and comes with 10 different animated loaders.
Flexible? A page loader appears when a page is loading and disappears when it's ready for viewing, right?
Well Loaderz is different. It can, of course, be set up to do exactly what you'd expect it to do, i.e. the above. But what if you've got a video banner on the page that takes an extra second or two to actually play the video? With Loaderz, you can set the length of time that the loading animation should be displayed.
Or let's say that you have a video on your page that's set to display when the page is scrolled down, or a stack that connects with a database and takes some time to load…
… drop Loaderz onto your page, drop your content into it and Loaderz will display an animation until the content has loaded.
Testing – Load Forever (useful for the setup process)
Hide On – Page Load, After Set Time
Position – Fixed, Inline (Wraps Content)
Z-Index – Couldn't count the default number of 0s!
Background – Off, Colour, Gradient, Image
Show Loading Text
Loader Type – 10 animation options – the screenshot above displays 'Android Material' and 'Rotating Circle With Image' You can add your own image, or logo.
Size – Loader Height in px
Max Width – Loader Width in %
Colours – 1,2 and 3
Percentage – Percentage Of Inner Circle
Loaderz is a great option for both page and content loader animations. It is highly configurable and you're likely to see it on one of my next sites.
This year's conference was as big a success as that from 2016, with many compelling talks on subjects that will interest all RapidWeavers. Don't worry if, like myself, you were unable to visit the conference, you can still get access to the sessions by visiting the conference website.
I just took a look at the 2017 videos and I must say that I'm glad I did. They present a thousand kilos• of valuable information.
So let's take a look at what you'll be getting if you subscribe…
I was a little surprised that the videos aren't presented in chronological order, but that doesn't reduce their value. Here, in the order that they took place, is what I saw.
Creative Insights With Nick Cates. Nick has some of the cleanest RW themes on the market and during this session he explains how he goes about designing a website and why his sites are so effective. The key to a great site, as we all know, is its presentation and Nick explains how to grab (and hold) a visitors attention.
Of course, Nick couldn't get through the session without plugging Cartloom and used it for many examples, but hey! The Cartloom site is a great, effective site.
Nick also demonstrates three other sites and explains in detail why they are presented the way they are. Watch and learn.
Stacks: Novice To Pro With Isaiah Carew. You work with Isaiah's Stacks regularly, but do you really know how to get the most out of them. On the forums, we often hear how slow RW is. In this session Isaiah demonstrates what is slowing you down, why it happens and – most importantly – how to cure the problem. I assure you that I've already begun to follow his advice and even JW got to learn something new! Watch and learn.
A To Z Of Building Forms With Joe Workman. Joe's session is aimed primarily at Foundation users and he explains in detail how to build effective forms. I've observed myself, that a number of Foundation users don't really lay their forms out, but simply drag the form fields one below the other. Joe not only addresses this shortcoming, but then goes on to explain each of the form stacks in detail. And at the end of the session, there's a 'Geheimtip' a secret tip just for the conference visitors. Watch and learn.
SEO And Meta Data With Brett Carmichael. Brett begins his session by explaining the ins and outs of SSL and just how it will affect all Weavers in the very near future. He then goes on to give you detailed instructions for adding Meta Data to your site. Learn how to leverage the power of not only Google, Yahoo, Bing etc. but also Facebook, Twitter and LinkedIn. If you're not an SEO expert, get ready to take notes and take screenshots of this session. Watch and learn.
Artful Web Design With Elizabeth Martinez. If you regularly visit the Weaver's Space, or take part in the weekly hangouts, you'll have encountered Elizabeth. If you've ever followed the links to the websites that she builds, you'll have been struck by how beautifully designed they are. Elizabeth's websites really are works of art. But not only do they look great, they are also extremely functional. Follow Elizabeth's session and learn the thought process behind her sites. Watch and learn.
Modern Web Imagery With Greg Barchard. We all know Greg from Chillidog. Chillidog supplies Weavers with Plugins, Stacks and hosting that is aimed especially at RW sites. Greg is also a great source of information for all things regarding servers. Specifically IP Servers. Probably the one thing that slows down the delivery of our websites is image content. Greg takes a look at how to reduce image size and how to deliver your images faster, he also previews a new stack. Watch and learn.
Design Every Element With Marten Claridge. We all know Marten. He provides Weavers with creative stacks and is the man behind StackCentral – a list of all stacks and stack developers – the place to go, if you're looking for something specific. Marten is also a gifted web designer. During his session Marten explains why the attention to detail is so important. The session is slow to take off, because Marten actually builds a complete webpage with you. But hang in there – the resulting page is amazing! Watch and learn.
Forms With MachForms With Dave Hidding. Dave's is a very specialised topic. Forms. Intricate forms. Weavers have a number of options for creating detailed forms, but sometimes those options are just not sufficient. If you need something more complicated, then you'll need an external solution. Dave demonstrates how to use and implement MachForms. Watch and learn.
Building an Online Course With Mathew Mitchell. Mathew's is also a very specialised session. During the session Mathew explains which applications he uses for his educational web content and how he makes his sites available the specific students taking part in the courses. He also goes into detail about how he structures his courses and – most importantly – why he structures them the way he does. Watch and learn.
Common Sense & Pragmatism Andrew Tavernor. Andrew is probably the most pragmatic person that I know. Do you design your website with your user in mind, or do you just open up RW and begin piecing pages together? Andrew's session helps us to understand our visitors, how they approach a web interface (or life in general) and how to cater for said users. If you really want to target your audience, get ready to take notes! Watch and learn.
Managing Project Resources With Paul Russam. Paul's websites will always grab your attention and this is because Paul pays great attention to detail – not only to his websites, but also to his data structure. I have seen a great number of computer users that fill their desktop with files. Some even use the waste basket to store files. Paul gives just as much attention to the structure of his RW projects as he does to their presentation. In this session he demonstrates the tools he uses to manage a project so that each single file may easily be found. Watch and learn.
Professional Client's Areas With Jon Hawkins. Besides its developer, Jon is possibly the person that knows Total CMS better than anyone else on this planet. CMS isn't just about editing a web page's content, it's also about content accessibility. In this session Jon demonstrates how he creates the user interfaces that allow his clients to interact with their sites. Get ready to be amazed. Watch and learn.
Stacks: Pro to Developer With Isaiah Carew. At some point every Weaver has asked her/himself if it's possible to build the stack that does exactly what she/he wants. In this session Isaiah demonstrates just how easy it could be for those that have an even limited understanding of CSS/HTML. Isaiah takes apart an existing stack for us and explains each of its components. He then goes on to change the stack's function and turn it into a completely new stack. Watch and learn.
Email Design With Joe Workman. For years people have wanted to design email newsletters with RapidWeaver. Joe workman's suite of Email stacks now makes the creation of newsletters within RW possible. In this session, Joe takes a look at all of the Email stacks and gives numerous valuable tips for creating the perfect email with your favourite application. A Specialised Topic? Only suitable for Business Mails? Absolutely not! What about those emails that you send out to family and friends at Christmas and Thanksgiving, Dhu'l-Hijjah, or Songkran, etc.? Watch and learn.
Each of the video sessions is around 45 minutes in length and each is guaranteed to give you valuable tips that will either speed up your work process within RapidWeaver, help get your message across to your website visitors more effectively, or give you deeper understanding of what's going on (or what should be going on) behind the scenes.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
Don’t miss a post!
Sign up for our monthly newsletter.
A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16