Skip to content

Instantly share code, notes, and snippets.

@vielhuber

vielhuber/_1.MD

Last active September 22, 2023 14:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vielhuber/454f5afa1469288bf0c00710890bb8af to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vielhuber/454f5afa1469288bf0c00710890bb8af to your computer and use it in GitHub Desktop.
Download ZIP
image optimization compression (jpg, png, gif, svg) for google page speed / progressive jpgs svgo #windows #linux
Raw
_1.MD

notes

  • use the latest version of the following tools (build them from source)
  • i spent a lot of time comparing and finally got to these final tools

jpg (lossless)

find . -iregex '.*\.\(jpg\|jpeg\)$' -type f -exec mozjpeg -copy none -optimize -progressive -outfile {} -verbose {} \;

jpg (lossy)

find . -iregex '.*\.\(jpg\|jpeg\)$' -type f -exec jpegoptim --max=85 --all-progressive --strip-all {} \;

on selected images (that get reported by seo tools), use --size=97kb to limit the size to max 100 kb

png

find . -iregex '.*\.\(png\)$' -type f -exec pngquant --quality 40-100 --strip --verbose --skip-if-larger --output {} --force {} \;

svg

set missing viewboxes

find . -iregex '.*\.\(svg\)$' -type f ! -exec grep -q 'viewBox=' {} \; -exec scour -i {} -o {}opt --enable-viewboxing \; -exec mv {}opt {} \;

optimize svgs

  • all default options
  • disabled: convertPathData, mergePaths, removeViewBox
  • additionally enabled: removeDimensions
echo "module.exports = { plugins: ['removeDoctype','removeXMLProcInst','removeComments','removeMetadata','removeEditorsNSData','cleanupAttrs','mergeStyles','inlineStyles','minifyStyles','cleanupIDs','removeUselessDefs','cleanupNumericValues','convertColors','removeUnknownsAndDefaults','removeNonInheritableGroupAttrs','removeUselessStrokeAndFill',/*'removeViewBox',*/'cleanupEnableBackground','removeHiddenElems','removeEmptyText','convertShapeToPath','convertEllipseToCircle','moveElemsAttrsToGroup','moveGroupAttrsToElems','collapseGroups',/*'convertPathData',*/'convertTransform','removeEmptyAttrs','removeEmptyContainers',/*'mergePaths',*/'removeUnusedNS','sortDefsChildren','removeTitle','removeDesc','removeDimensions'] };" > "/tmp/svgo.config.js"; svgo --config /tmp/svgo.config.js -r -f .; rm -f /tmp/svgo.config.js

gif

find . -iregex '.*\.\(gif\)$' -type f -exec gifsicle --optimize=3 --output {} --verbose {} \;
Raw
_2.MD

installation

mkdir tmp
cd tmp
npm install compress-images --save-dev

setup

nano compress_images.js
const compress_images = require('compress-images'),
      folder = '/mnt/c/Users/David/Downloads/test';

compress_images(
    folder+'/**/*.{jpg,JPG,jpeg,JPEG,png,svg,gif}',
    folder+'-compressed/',
    {
        compress_force: false,
        statistic: true,
        autoupdate: true
    },
    false,
    {
        jpg: {engine: 'mozjpeg', command: ['-quality', '60']}
    },
    {
        png: {engine: 'pngquant', command: ['--quality=20-50']}
    },
    {
        svg: {engine: 'svgo', command: '--multipass'}
    },
    {
        gif: {engine: 'gifsicle', command: ['--colors', '64', '--use-col=web']}
    },
    function(error, completed, statistic)
    {
        console.log('-------------');
        console.log(error);
        console.log(completed);
        console.log(statistic);
        console.log('-------------');       
});

usage

node compress_images.js

Raw
legacy.sh
# important: save this file with EOL unix/osx format (in notepad++)
# then run it with: "bash optimize.sh C:\Users\David\Downloads\uploads"
#!/bin/bash
#$1='C:\Users\David\Downloads\uploads';
find $1 -name '*.jpg' -type f -exec jpegoptim --strip-all -m85 -o -p {} \;
find $1 -name '*.jpeg' -type f -exec jpegoptim --strip-all -m85 -o -p {} \;
find $1 -name '*.png' -type f -exec pngout {} \;
find $1 -name '*.gif' -type f -exec gifsicle -force -o7 {} \;
#find $1 -name '*.jpg' -type f -exec jpegtran -verbose -optimize -progressive -copy none -outfile {} {} \;
#find $1 -name '*.png' -type f -exec optipng -o2 {} \;
# use this on the command line like this
find . -name '*.jpg' -type f -exec jpegoptim --strip-all -m85 -o -p {} \;
find . -name '*.png' -type f -exec pngout {} \;
find . '*.jpg' -type f -exec jpegtran -verbose -optimize -progressive -copy none -outfile {} {} \;
# mac/linux: add "\" before ;
find ~/path/to/folder/ -name '*.jpg' -type f -exec jpegoptim --strip-all -m85 -o -p {} \;
# imagemagick: resize images to max width/height
find . -name '*.jpg' -type f -exec convert {} -resize 900x900\> {} \;
# svg compression
npm install -g svgo
svgo input.svg –o output.svg
# compress folder recursively and overwrite
svgo -r -f path/to/folder/
# inline styles
svgo input.svg –o output.svg --enable=inlineStyles --config '{ "plugins": [ { "inlineStyles": { "onlyMatchedOnce": false } }] }' --pretty
# set base color to #000000 (dompdf has problems here)
find . -type f -name "*.svg" -print0 | xargs -0 sed -i '' -e 's/<svg xmlns/<svg fill="#000000" xmlns/g'
# alternative: https://github.com/scour-project/scour)
# first install python
pip install scour
scour -i input.svg -o output.svg
scour -i input.svg -o output.svg --enable-viewboxing --enable-id-stripping --enable-comment-stripping --shorten-ids --indent=none
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment