Post

Squoosh

Posté
Preview Image
Par Olivier 9 min lire

Dans le monde numérique d’aujourd’hui, où les images jouent un rôle central dans la communication en ligne, la nécessité de compresser les fichiers image sans compromettre leur qualité est cruciale. C’est là que Google Squoosh entre en jeu, offrant une solution simple et puissante pour optimiser vos images sans tracas.

Précisions

Google Squoosh est un outil en ligne de compression d’images, développé par Google Chrome Labs. Il permet aux utilisateurs de réduire la taille de leurs images en ajustant différents paramètres de compression, tout en visualisant en temps réel l’impact sur la qualité de l’image. L’interface intuitive et conviviale de Squoosh en fait un choix idéal pour les débutants tout en offrant des fonctionnalités avancées pour les utilisateurs expérimentés.

Pour construire une image Docker compatible AMD64 vous aurez besoin de ces fichiers :

  • common-build-system.sh
  • build.sh
  • Dockerfile

Fichiers requis

common-build-system.sh

[Fichier]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146

#!/bin/bash
doBuildSystem() {
	echo "v2023-09-01"
}

# Compute images informations
LOGFILE=cbslog.log
BASE=$OWNER/$NAME
LATEST=${BASE}:latest

# Cleanup log file
if [ -f $LOGFILE ]; then
    rm -rf $LOGFILE
    touch $LOGFILE
fi

# Display introduction
doIntro() {
	echo "Docker Image Build: $HOSTNAME"
	doBuildSystem
	echo
}

# Prepare for cross compile
doPrepareCrossCompile() {
    echo "> Prepare for cross compile"
    export DOCKER_DEFAULT_PLATFORM=$1
    export DOCKER_CLI_EXPERIMENTAL=enabled
}

# Cross-platform emulator collection distributed with Docker images
doBinFMT() {
    echo "> Perform cross-platform setup"
    docker run --privileged --rm tonistiigi/binfmt:latest --install all
}

# Add a Tag to image
doDockerTag() {
    TAG=$1
    echo "> Add [$TAG] tag to image for registry [$REGISTRY]"
    docker tag ${BASE} ${REGISTRY}/${BASE}:${TAG}
    if [ $? -eq 0 ]; then
        echo " * tag done!"
    else
        echo " * tag failed!"
    fi
}

# Push to registry
doRegistryPush() {
    echo "> Push [$BASE] image to [$REGISTRY]"
    docker image push --all-tags ${REGISTRY}/${BASE}
}

# Build Docker image
doBuild() {
    PLATFORM="${1:=linux/amd64}"
    IMAGE=$2
    CACHING=$3
    echo "> Build image: [$IMAGE] for [$PLATFORM] ($CACHING)"
    docker buildx build \
        $CACHING \
        --network host \
        --compress \
        --output=type=docker \
        --pull \
        --build-arg CONCURRENCY=$(nproc) \
        --platform=${PLATFORM} \
        -t "${IMAGE}" \
        . 2>&1
}
doBuildCache() {
    doBuild $1 $2 ""
}
doBuildNoCache() {
    doBuild $1 $2 "--no-cache"
}

# Perform 'failed' action
doFailed() {
    echo "* failed!"
    exit 1
}

# Perform 'done' action
doDone() {
    echo "* done."
}

if [ "$(id -u)" != "0" ]; then
    doIntro
    echo "This script must be run as root" 1>&2
    echo
    exit 1
fi

clear
cd $CWD || exit 1

# Show introduction
doIntro

doPerformAll() {
    # Perform cross-compile tasks
    doBinFMT
    if [ $? -ne 0 ]; then
        doFailed
    else
        doDone
    fi

    # Perform image build
    if [ $CACHE == true ]; then
        doBuildCache "${OS}" "$LATEST"
    else
        doBuildNoCache "${OS}" "$LATEST"
    fi
    if [ $? -ne 0 ]; then
        doFailed
    else
        doDone
    fi

    # Perform image tagging
    doDockerTag "latest"
    if [ $? -ne 0 ]; then
        doFailed
    else
        doDone
    fi

    # Perform push ro registry
    doRegistryPush
    if [ $? -ne 0 ]; then
        doFailed
    else
        doDone
    fi
}

doPerformAll | tee $LOGFILE
sync

echo "> Finished!"

exit 0

build.sh

[Fichier]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#!/bin/bash
# 2023-11-13

# Image informations
OWNER=zogg
NAME=squoosh
REGISTRY=docker.io
OS="linux/amd64"
#CACHE=false
CACHE=true

# Build the image
HOSTNAME=$(hostname)
SELF=$(realpath $0)
SCRIPT=$(basename $SELF)
CWD=$(dirname $SELF)
cd $CWD
source ../_common/common-build-system.sh

Dockerfile

[Fichier]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

# 2023-11-13

## LINKS:
##
##      https://github.com/hellodk34/squoosh
##

## HOWTO:
## debug image with local bash session:
##
##       sudo docker run -it --entrypoint sh zogg/squoosh:latest
##


# --------------------------------------------------
# Intermediary Build
# --------------------------------------------------

FROM    alpine:latest as build

# Arguments from Docker build
ARG     TARGETPLATFORM
ARG     TARGETOS
ARG     TARGETARCH
ARG     BUILDPLATFORM
ARG     BUILDOS
ARG     BUILDARCH
ARG     BUILDVARIANT
ARG     CONCURRENCY

# Install packages
RUN             set -eux \
        &&      apk update \
        &&      apk upgrade --available \
        &&      apk add --no-cache \
                        git \
                        nodejs \
                        npm \
                        xsel

# Define where to go
WORKDIR         /app/squoosh/

# Clone & Build
RUN             mkdir -p /app \
        &&      cd /app \
        &&      git clone --branch=live https://github.com/GoogleChromeLabs/squoosh \
        &&      cd squoosh \
        &&      npm install \
        &&      npm run build \
        &&      npx update-browserslist-db@latest

# Perform some updates
RUN             npm update --save \
        &&      npm audit fix --force

# Update package.json to tweak what to serve
RUN             cd /app/squoosh/ \
        &&      sed -i 's#serve --listen=$DEV_PORT --config ../../../serve.json .tmp/build/static#serve -n --listen=8080 --config ../serve.json ./build#g' package.json

# Perform some cleanup
RUN             cd /app/squoosh/ \
        &&      rm -rf .git .github .gitattributes .tmp


# --------------------------------------------------
# Final Docker Image
# --------------------------------------------------

FROM    alpine:latest

# Redo Install packages
RUN             set -eux \
        &&      apk add --no-cache --update \
                        nodejs \
                        npm \
                        xsel

# Copy files from the build stage
COPY    --from=build    /app/squoosh                    /app/squoosh/

# Define where to go
WORKDIR         /app/squoosh/

# Define environement variables
ENV     LANG                                    en_US.UTF-8
ENV     LANGUAGE                                en_US:en
ENV     TZ                                      UTC
ENV     LC_ALL                                  en_US.UTF-8
ENV     LAN                                     en_US.UTF-8
ENV     LANGUAGE                                en_US

# Disable Watchtower image check
LABEL   com.centurylinklabs.watchtower.enable   false

# Enable DIUN image check
LABEL   diun.enable                             true

# Define author's informations
LABEL   org.opencontainers.image.title          "Squoosh Special Edition"
LABEL   author                                  "Olivier Le Bris"
LABEL   maintainer                              "tech@zogg.fr"
LABEL   org.opencontainers.image.source         "https://zogg.fr"
LABEL   org.opencontainers.image.licenses       MIT

# Run entrypoint
EXPOSE          8080
ENTRYPOINT      ["npm", "run", "serve"]

Procédure

Pour lancer la construction de l’image, il suffit de donner au script shell build.sh les droits d’exécution puis de le lancer :

Attention, cette étape de construction peut s’avérer longue selon la puissance de votre machine.

1

sudo chmod +x build.sh && sudo bash build.sh

Cela vous permet de générer l’image Docker

Utilisation

Utiliser Squoosh est un processus simple et rapide. Suivez ces étapes pour compresser vos images avec efficacité :

  • Accédez à la page Squoosh depuis votre navigateur.
  • Glissez-déposez votre image dans la fenêtre de l’application ou sélectionnez-la depuis votre ordinateur.
  • Ajustez les paramètres de compression en fonction de vos besoins.
  • Visualisez l’aperçu en temps réel pour trouver le bon compromis entre taille du fichier et qualité.
  • Une fois satisfait du résultat, téléchargez la version compressée de votre image.

Voici un exemple de fichier docker-compose.yml qui vous permet d’utiliser l’image ainsi générée :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

version: "3.0"

#
# updated: 2023-11-13
# stack:   squoosh
#

networks:
  squoosh:
    name: squoosh
    driver: bridge
    enable_ipv6: true

services:

  squoosh:
    extends:
      file: ../_vm/common.yml
      service: x-common
    user: 0:0
    cap_add:
      - CHOWN
      - DAC_OVERRIDE
      - FOWNER
      - FSETID
      - SETGID
      - SETUID
      - NET_BIND_SERVICE
      - MKNOD
    container_name: squoosh
    hostname: squoosh
    image: zogg/squoosh:latest
    restart: "no"
    ports:
      - "${VM_PORT_SQOOSH}:8080"
    expose:
      - "8080"
    networks:
      - squoosh
    healthcheck:
      test: wget --no-verbose --tries=1 --spider http://0.0.0.0:8080/ || exit 1
    labels:
      com.stack.name: "squoosh"
      com.stack.service.name: "squoosh"
    deploy:
      resources:
        limits:
          cpus: "8.0"
          memory: 4G

Les points imporant à prendre en compte dans ce compose sont les suivants :

  • image : il s’agit du nom de l’image qu’on vient de générer
  • VM_PORT_SQOOSH : le port sur lequel le service Squoosh sera exposé

Fonctionalités

  • Compression avancée : Squoosh propose une variété d’options de compression avancées, permettant aux utilisateurs de choisir le niveau de compression souhaité en fonction de leurs besoins spécifiques. Que vous ayez besoin d’une compression légère pour un partage rapide sur les réseaux sociaux ou d’une compression plus intensive pour optimiser les performances d’un site Web, Squoosh s’adapte à vos exigences.

  • Aperçu en temps réel : L’une des caractéristiques les plus impressionnantes de Squoosh est son aperçu en temps réel. Pendant que vous ajustez les paramètres de compression, vous pouvez voir instantanément comment ces changements affectent l’apparence de votre image. Cela permet aux utilisateurs de trouver le juste équilibre entre la taille du fichier et la qualité visuelle, garantissant un contrôle total sur le processus de compression.

  • Formats de fichier polyvalents : Squoosh prend en charge une variété de formats de fichiers, y compris les formats populaires tels que JPEG, PNG et WebP. Vous pouvez choisir le format qui convient le mieux à vos besoins spécifiques, que ce soit pour des images fixes, des graphiques vectoriels ou des photographies.

  • Utilisation hors ligne : Une autre caractéristique notable de Squoosh est sa capacité à fonctionner hors ligne. Une fois que vous avez chargé l’outil dans votre navigateur, vous pouvez l’utiliser même sans connexion Internet. Cela s’avère particulièrement utile pour les utilisateurs qui souhaitent compresser des images en déplacement ou dans des environnements où la connectivité Internet peut être limitée.

Conclusion

Google Squoosh offre une solution de compression d’images puissante, flexible et conviviale. Que vous soyez un professionnel de la création, un développeur Web ou simplement un utilisateur cherchant à économiser de l’espace de stockage, Squoosh répond à vos besoins. Essayez cet outil novateur de Google pour optimiser vos images et améliorer l’efficacité de votre présence en ligne.

homelab
docker compose image amd64 squoosh
Cet article est sous licence CC BY 4.0 par l'auteur.

© 2022- Olivier. Certains droits réservés.

Propulsé par τζ avec le thème Χ