Server connect image filetype WebP

I saw that the module Wappler uses for image resize in Node has WebP available as a save file format.
Hoping this could be made available in the GUI of Server Connect Image Save step.

Using multiple SEO tools, most report the savings in image file size if using WebP and because it’s a Google format I assume it will take over half the world soon anyway.

Great idea, unfortunately webp is not well supported by all browsers currently:

https://caniuse.com/#feat=webp

1 Like

Aww, I didn’t know that, thanks for the info.

IE strikes again, they should give that browser Netscape Navigator status.

Safari as well :smiley:

1 Like

Yeah, but surely nobody uses safari, i mean like my analytics is about 2% safari, 40% IE, 40% Chrome, 12% Firefox, and then a whole bunch of random browsers. 1 i did not even know existed in the world till today CCleaner browser, wasn’t aware cr@p cleaner had a browser.
All chrome browser for Mac needs is a way to hide my URL bar beside full screen mode and life would be perfect.

1 Like

Some of the more adventurous developers are already using WebP. Here’s an example: https://pleysier.com.au . Works fine in Safari (with the help of a small .js file).

2 Likes

You could use the picture tag to have fallback to jpg, but again no IE support. (There is a polyfill to fix that)

<picture>
  <source srcset="img/awesomeWebPImage.webp" type="image/webp">
  <source srcset="img/creakyOldJPEG.jpg" type="image/jpeg"> 
  <img src="img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>
2 Likes

Great article, thanks @patrick

My main travel site has thousands of images in it, each under 135k
Screenshot 2020-06-03 at 21.11.37

Going on 11gb soon, this is why I am hoping the WebP format might be able to reduce that, I ran a tool a while back to give an estimated reduction on the folder, and it said it would reduce it down to 6gb, which would be a massive win for me.

1 Like

The bad thing is you will need to keep the jpg versions as well to be used as a fallback for the older browsers, so you will need like 17gb of space :slight_smile:

1 Like

Yeah, i know, space wise it will not do me many favours, and even bandwidth usage wise I am not too concerned as the site does not get more than 20k visitors a month, so it’s not super expensive, What my largest concern is


My competition is kicking my buttt, hugely.

1 Like

You have some nice competitors!

1 Like

They are my competitor, I honestly doubt they know I am even trying to compete, it’s frustrating trying to win a race the other guy doesn’t even know he is competing in.

1 Like

Paul you should consider using a CDN for your static content, not that I don’t enjoy picking apart peoples websites :wink: I see Live Chat Inc isn’t helping either.

Imagemin is on my list to play with but they have a commercial API offering if you’re feeling lazy.

1 Like

I must agree, I have used Cloudflare on the website before and had a number of issues with the site going down through UK2.net because of the turbo feature or something. Then I tried stackPath CDN and ran on. that for about a year, worked very well.
Eventually I switched hosting providers to InMotion Hosting, I ran it with CloudFlare for more than 3 months and checked average speeds, then tried it on StackPath for 2 weeks, then ran it directly on the server without CDNs, and found that the speed improvement was so tiny, that I felt it was not worth the hassle.

There are a few things I know slow down my site
LiveChat is a big one, and one I have tried to change a number of times, but my client likes it and all their staff know it etc. so I have been a little stuck with it.

Amount of .js calls which I have proven time and time again that when I have managed to combine 20.js and 20.css files in a single .min file has had a major impact, I have used a few solutions for this, @ben uses a nice one, but to be honest the whole process of combining the scripts no matter what way I have tried has always turned into a massive pain in the … When I ran this http://rakaz.nl/2006/12/make-your-pages-load-faster-by-combining-and-compressing-javascript-and-css-files.html it was the biggest speed increase I had ever had, was pretty amazing.

Images with lazy load and lazy sizes has helped a lot and I still use that even on the latest version of the website, also using swipers over slideshows.

Image file type I am hoping will also make a large difference.

I never mind people picking apart my sites, if it leads to ideas and suggestions, I am in.

I did show the google speed test, which seems to be the most pessimistic speed tool i have seen, while pingdom and gtmetrix both say my site loads in 2.3 seconds and list it as fast, while Google says its the slowest thing on the planet. haha, but I have to assume from an SEO standpoint that if a user typed in online accommodation booking or something especially on their mobile device, a site that takes 20 seconds to load will probably be last in the pile.

Out of interest when I took over this site from the original guys, Google speed tool was reporting 24mb and 18 seconds load time on the home page, I have managed to reduce that significantly without amuont of images or image quality issues, but 1 second would still be nicer.
Edit: in the other guys defence he was loading the standard facebook plugin on every page, so that was probably 4 seconds gone right there.

1 Like

By the way LiveChat would not be so bad if it actually ever stopped loading, I do not know what is wrong with it, its like it continues loading eternally or something.

Pingdom LiveChat removed

Pingdom LiveChat back

Even the requests make no sense

1 Like

This is where I’m hoping Webpack will come in the not too distant future.

Actually your site is pretty impressive, I see a lot of hours right there.

I have mixed feelings on CloudFlare tbh. A lot of these CDN’s have Image processing built in now like KeyCDN https://www.keycdn.com/support/image-processing. Saves you working on images server side.

Yeah LiveChat is a real pain in the ass. It’s loading asynchronously already. I don’t think you can defer it as I’m not sure their internal visitor tracking functions would work as well.

My workaround would be to create a fake Live Chat button using CSS which would then call the LiveChat script onClick. It’s not ideal but it’s the only solution I can think of.

1 Like

Very very smart, never even thought about a simple solution like that, thank you. Love it.

Because the site is backed by a FULL CMS of my own making, stackPath became an issue for me because i had to go in and update the cache everytime my client made a change, which was a total pain, and not really what they wanted, looking for instant changes.

My next thought has been this
https://prerender.io/

But to be honest, I have tried to set it up on. a dummy site a number of times and only managed once to get a half working site, so it looks great, it sounds like exactly what i need but getting it working has been an issue.
I was actually going to ask Teo if we could make a Wappler Weekly Challenge of how to hook into it, considering all the people who are going to be converting to Node.js i assume the SEO side is going to become an increasing issue with schema and head tags all not reading quite right.

1 Like

You should check out Flif too. No browser support so polyfill needed.

2 Likes

Looks brilliant, and I assume with cloudinary using it, it must be good, i have one site that is on cloudinary, expensive but good.
Expensive in South African terms, probably not in the global marketplace.

really good :+1: