tiny-site

In reality each terminal resolution and supports the picture format has its own differences, developers usually adopt a compromise (lazy): use the highest resolution, the most common image formats. For small resolution terminals, high resolution, do reduce display display, wasted bandwidth. Support for terminal better picture format, did not achieve better balance in terms of quality and flow.

Using the tiny-siteimage management system, then the original image can simply upload depending on Tiny , select the appropriate picture parameter depending on the application scenario may be generated webp, pngand jpeg. File format defined by name, in a simple form of support for custom picture quality and size, with a CDN can generate different types of images depending on the application needs.

Features

The main function of the site is relatively simple, upload pictures, picture list, select the preview picture parameters and picture updates.

Steps for usage

Start tiny compression services

docker run -d --restart=always \
  -p 7001:7001 \
  -p 7002:7002 \
  --name=tiny \
  vicanso/tiny

HTTP service 7001 is provided wherein, tiny-site service is mainly used GRPC 7002, 7001 can thus be set is available.

Initialize the database

Use database postgrescan be used to start docker relevant image and initialize the database is provided, wherein the account password can be set as desired.

docker run \
  -p 5432:5432 \
  -e POSTGRES_USER=test \
  -e POSTGRES_PASSWORD=123456 \
  --restart=always \
  --name=postgres \
  -v /data:/var/lib/postgresql/data \
  -d postgres:alpine

创建 db 以及初始化权限

docker exec -it postgres sh

psql -U test

CREATE DATABASE "tiny" OWNER test;

GRANT ALL PRIVILEGES ON DATABASE "tiny" to test;

启动服务

docker run -d --restart=always \
  -p 7500:7001 \
  -e GO_ENV=production \
  -e PASS=pass \
  --name=tiny-site \
  vicanso/tiny-site

配置中密码为PASS，如果在env中有此字段，则会取ENV中配置的值，因此可以根据需要直接将密码设置至配置文件或者ENV中。需要注意，因为production.yml中的数据库配置在各自应用场景中不一致，建议fork项目再自己编译。或者增加自定义配置文件，mount至/tiny-site/production.yml，则启动脚本如下：

# production 生产环境中使用的相关配置

# redis 配置 （填写相应密码与host)
redis: redis://:pass@redisHost:6379

# postgres 配置（填写相应密码与host)
postgres:
  user: test
  host: postgresHost
  password: pass

# tiny 配置tiny服务的IP（如果grpc的服务端口不是6002，也需要调整）
tiny:
  host: 192.168.0.171
  port: 7002

# 预览地址（根据实际使用配置预览地址，建议使用CDN，再设置CDN回源策略）
imagePreview:
  url: "http://localhost:7001/images/v1/preview/:file"

docker run -d --restart=always \
  -p 7500:7001 \
  -e GO_ENV=production \
  -v /opt/tiny/production.yml:/tiny-site/production.yml \
  --name=tiny-site \
  vicanso/tiny-site

使用建议

tiny-site目标是提供简单的方式定义图片参数，尽可能简单的使用较优的图片。为什么说是较优呢？因为此项目考虑的是能用性，主要是使用经常更新的图片应用场景，以及一图多终端使用的应用场景。由于各终端分辨率，支持图片类型各有差异，因此建议在终端中动态生成图片地址，根据展示的区域大小，支持的图片类型指定相应的图片参数。需要注意，由于tiny本身非专注与图片转换性能，因此建议使用CDN来缓存图片，提升性能。

浏览器中判断是否支持WEBP

let isSupportWebp = false;
(function() {
  const images = {
    basic:
      "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==",
    lossless:
      "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA="
  };
  const check = data =>
    new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = resolve;
      img.onerror = reject;
      img.src = data;
    });
  Promise.all(map(images, check))
    .then(() => true)
    .catch(() => false)
    .then(result => {
      isSupportWebp = result;
    });
})();

export function supportWebp() {
  return isSupportWebp;
}

在浏览器中，使用上面的判断，对于支持webp格式的，则将图片后续替换为.webp，而不支持的则使用原后缀。iOS并没有支持webp格式，如果是在APP中，则可以自己扩展实现，android则系统原生支持，不需要做调整。

tiny-site release a new version