Demo

Auto Webp - A image hosting with Lsky Pro and Webp Server Go

Open source projects used

  • Lsky Pro - Your photo album on the cloud.
  • Webp Server Go - A tool that will serve your JPG/PNGs as WebP format with compression, on-the-fly.
  • uPic - A native, powerful, beautiful and simple picture and file upload tool for macOS.

Features

  • Supports all browsers on all platforms. If you encounter a browser that cannot support Webp, the original image is automatically displayed.
  • Compression of images and much faster access.
  • Preserve most of the details of the image. (Almost no difference in picture quality)

Build Steps

  • Install Lsky Pro in the usual way. Documents
  • Set up and modify the basic information of Lsky Pro.
  • Make sure you are able to upload the image and return an accessible link.
  • Start installing Webp Server Go.

Install Webp Server Go

  • Select an installation directory and create a new one.

    cd /opt
mkdir webps
cd webps
mkdir exhaust

  • Download the binary file.

    wget -O webp-server https://github.com/webp-sh/webp_server_go/releases/download/0.4.1/webp-server-linux-amd64

  • Generate a configuration file.

    vi config.json
    {
"HOST": "127.0.0.1",
"PORT": "3333",
"QUALITY": "80",
"IMG_PATH": "/www/wwwroot/static.missuo.me/public", # Modify to your Lsky Pro storage directory
"EXHAUST_PATH": "./exhaust",
"ALLOWED_TYPES": ["jpg","png","jpeg","bmp"],
"ENABLE_AVIF": false
}

  • Create daemon to start Webp Server

    CentOS
cd /usr/lib/systemd/system/
Debian
cd /etc/systemd/system/
Ubuntu
cd /lib/systemd/system/
vi webps.service
    [Unit]
Description=WebP Server
Documentation=https://github.com/n0vad3v/webp_server_go
After=nginx.target
[Service]
Type=simple
StandardError=journal
AmbientCapabilities=CAP_NET_BIND_SERVICE
WorkingDirectory=/opt/webps
ExecStart=/opt/webps/webp-server --config /opt/webps/config.json
ExecReload=/bin/kill -HUP $MAINPID
Restart=always
RestartSec=3s
[Install]
WantedBy=multi-user.target

  • Start Webp Server and set it to boot up.

    systemctl start webps.service
systemctl enable webps.service

  • Modify the Lsky Pro Nginx configuration file to add a reverse proxy.

    location ~ .*\.(jpg|jpeg|png|bmp)$
{
    proxy_pass http://127.0.0.1:3333;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_hide_header X-Powered-By;
    proxy_set_header HOST $http_host;
    add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
}

Easy upload

  • Install uPic for macOS in App Store.
  • Upload image with uPic.

Effect show

  • Original picture: 15M
  • Compressed picture: 582KB
    20220330zuv0xJ