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